Plantilla web

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.

La descripción de esta plantilla aún no está disponible en español, así que se muestra en inglés.

SaaS · E-commerce · Gratis

Abrir demo en vivo
Scalar - Product/app/SaaS template Next.js & Astro

Análisis del diseño

Una lectura por IA del diseño de esta plantilla: colores, tipografía, espaciado, secciones y detalles característicos. Ottermind parte de ella cuando usas la plantilla.

Este análisis aún no está disponible en español, así que se muestra en inglés.

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

Detalles de la plantilla

Categoría
SaaS, E-commerce
Tecnología
Next.js, Astro, Tailwind CSS, shadcn/ui
Licencia
Commercial
Autor
Shadcnblocks
Publicada en
Shadcnblocks
Precio
Gratis

Diseño original de Shadcnblocks, publicado en Shadcnblocks. Ottermind no copia el código de la plantilla: crea una web nueva a partir del briefing.

El briefing del que parte Ottermind

Se abre en Studio como borrador: añade tu marca, tu público y tus páginas antes de enviarlo.

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.

Cómo usar esta plantilla

  1. 1

    Haz clic en «Usar esta plantilla» para abrirla en Ottermind Studio con el briefing ya escrito.

  2. 2

    Añade al briefing tu marca, tu público, las páginas y el contenido.

  3. 3

    Ottermind crea una web nueva inspirada en este diseño; sigue ajustándola en el chat.