웹사이트 템플릿

Scalar - Product/app/SaaS template Next.js & Astro

A modern product/app/saas template crafted with shadcn/ui, and Tailwind. Available in both Next.js and Astro editions. Perfect for github projects, open source projects or developer focused saas and community driven projects.

이 템플릿의 설명은 아직 한국어로 제공되지 않아 영어로 표시됩니다.

SaaS · E-commerce · 무료

라이브 데모 열기
Scalar - Product/app/SaaS template Next.js & Astro

디자인 분석

이 템플릿 디자인을 AI가 분석한 내용입니다: 색상, 글꼴, 여백, 섹션, 특징적인 디테일. 템플릿을 사용하면 Ottermind가 여기에서 시작합니다.

이 분석은 아직 한국어로 제공되지 않아 영어로 표시됩니다.

Overall

SaaS product, clean and technical, low density, light

Palette

background #ffffff; surfaces #ffffff, #f9fafb; text #111827; muted text #6b7280; primary #10b981; accents #374151, #ef4444, #f59e0b

Type

headings Inter, 700, sentence-case; body Inter, 14px; scale h1 48px, h2 32px, h3 24px

Shape & spacing

button/card radius 8px, borders 1px solid #e5e7eb, shadows none, section spacing 80px, content width 1280px

Sections (top to bottom)
  • Header — horizontal nav with logo, links, user count, login, CTA button; white background
  • Hero — centered headline, subheading, two CTA buttons (dark and outlined); white background
  • Workflow table — full-width data grid with columns for workflows, triggers, status, users, last updated; light gray header row, alternating row opacity; white background
  • Sidebar — right-aligned code snippet panel with syntax-highlighted GraphQL query; fixed position, semi-transparent overlay
Signature details
  • Monospaced code block in sidebar with syntax highlighting
  • Status indicators using colored tags (green, red, gray)
  • Avatar icons with initials and color-coded backgrounds
  • Minimalist UI with no decorative elements
  • Hover states on table rows and buttons
  • Clean, aligned typography with consistent spacing
Other pages
  • /workflows: workflow management interface with filter/sort controls
  • /community: discussion forum layout with user avatars and message threads

템플릿 정보

카테고리
SaaS, E-commerce
기술
Next.js, Astro, Tailwind CSS, shadcn/ui
라이선스
Commercial
제작자
Shadcnblocks
게시처
Shadcnblocks
가격
무료

원본 디자인: Shadcnblocks (Shadcnblocks에 게시). Ottermind는 템플릿 코드를 복사하지 않고, 브리프를 바탕으로 새 사이트를 만듭니다.

Ottermind가 시작하는 브리프

Studio에서 초안으로 열립니다. 보내기 전에 브랜드, 대상, 페이지를 추가하세요.

Build a saas website inspired by the "Scalar" template. Reference brief: A modern product/app/saas template crafted with shadcn/ui, and Tailwind. Available in both Next.js and Astro editions. Perfect for github projects, open source projects or developer focused saas and community driven projects. Use original copy and imagery for my brand rather than the reference's placeholder content.

이 템플릿 사용 방법

  1. 1

    “이 템플릿 사용하기”를 누르면 브리프가 채워진 상태로 Ottermind Studio가 열립니다.

  2. 2

    브리프에 브랜드, 대상, 페이지, 콘텐츠를 추가하세요.

  3. 3

    Ottermind가 이 디자인에서 영감을 받은 새 사이트를 만듭니다. 채팅으로 계속 다듬으세요.