Modèle de site 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 description de ce modèle n’est pas encore disponible en français ; elle s’affiche en anglais.

SaaS · E-commerce · Gratuit

Ouvrir la démo
Scalar - Product/app/SaaS template Next.js & Astro

Analyse du design

Une lecture par IA du design de ce modèle : couleurs, typographie, espacements, sections et détails marquants. Ottermind en part quand vous utilisez le modèle.

Cette analyse n’est pas encore disponible en français ; elle s’affiche en anglais.

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

Détails du modèle

Catégorie
SaaS, E-commerce
Technologies
Next.js, Astro, Tailwind CSS, shadcn/ui
Licence
Commercial
Auteur
Shadcnblocks
Publié sur
Shadcnblocks
Prix
Gratuit

Design original de Shadcnblocks, publié sur Shadcnblocks. Ottermind ne copie pas le code du modèle : il crée un nouveau site à partir du brief.

Le brief dont part Ottermind

Il s’ouvre dans Studio comme brouillon — ajoutez votre marque, votre public et vos pages avant l’envoi.

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.

Comment utiliser ce modèle

  1. 1

    Cliquez sur « Utiliser ce modèle » pour l’ouvrir dans Ottermind Studio avec son brief prérempli.

  2. 2

    Ajoutez au brief votre marque, votre public, vos pages et votre contenu.

  3. 3

    Ottermind crée un nouveau site inspiré de ce design — continuez à l’ajuster dans la conversation.