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

هذا التحليل غير متوفر بالعربية بعد، لذلك يظهر بالإنجليزية.

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

1. 1

   انقر على «استخدم هذا القالب» لفتحه في Ottermind Studio مع ملء الموجز.

2. 2

   أضف إلى الموجز علامتك التجارية وجمهورك وصفحاتك ومحتواك.

3. 3

   ينشئ Ottermind موقعًا جديدًا مستوحى من هذا التصميم، وتابع تعديله في المحادثة.