frontend-design-saas

# SaaS Design System (Stripe / Linear / Vercel lineage) > **AI-Optimized Design Reference** for building S-tier SaaS dashboards, admin consoles, billing pages, settings UIs, data-dense application shells, and product surfaces. > > Tonal anchors: `stripe.com/dashboard`, `linear.app`, `vercel.com/dashboard`, `notion.so/teamspace`, `clerk.com`, `planetscale.com/console`. --- ## Quick Reference (TL;DR) ``` Brand Accent: #5E6AD2 (indigo) - replace with product brand Neutrals: #FFFFFF → #F8FAFC → #F1F5F9 → #E2E8F0 → #94A3B8 → #475569 → #0F172A Text: #0F172A (primary) / #475569 (muted) / #94A3B8 (subtle) Border: #E2E8F0 (default) / #CBD5E1 (strong) Font Sans: "Inter", "Geist", system-ui (NOT Arial, NOT Roboto) Font Mono: "JetBrains Mono", "Geist Mono", ui-monospace Base Spacing: 4px (scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64) Border Radius: Buttons/inputs = 6-8px (NOT pill), Cards = 8-12px, Modals = 12-16px Shadow: Tight, low-spread, single-direction (NOT diffuse marketing shadows) Density: Compact-to-comfortable; row heights 36-44px, button heights 32-36px ``` The fastest way to get this wrong: use marketing-page aesthetics (huge type, generous whitespace, pill buttons, gradient hero shadows) in a product surface. SaaS UIs are **dense, neutral, fast, and quiet**. The brand color appears in <5% of the pixels and earns its weight by marking only what's interactive or active. --- ## 1. Brand Foundation ### Design Philosophy | Principle | Description | |-----------|-------------| | **Users First** | Workflows, keyboard navigation, and information density beat decoration. | | **Quiet by Default** | Neutrals dominate; the brand color is reserved for primary action, active state, and focus. | | **Speed & Density** | Snappy transitions (≤200ms), compact row heights, no entrance animations on every page load. | | **Opinionated Defaults** | Single canonical pattern per surface (one button hierarchy, one date picker, one empty state). | | **Meticulous Craft** | 1px borders aligned to pixel grid, focus rings 2px offset 2px, motion uses ease-out not linear. | | **Accessible (WCAG AA+)** | 4.5:1 text contrast, 3:1 UI element contrast, every interactive surface keyboard-reachable. | | **Predictable** | Same component looks/behaves identically on every page; no marketing-grade variants. | ### Visual Identity Rules - **Do not use pure black on pure white.** Use `#0F172A` on `#FFFFFF` (or `#0B1220` on `#0A0E1A` in dark mode). - **Brand color is the accent, never the dominant.** If the brand color fills more than ~5% of the viewport in steady state, something is wrong. - **Avoid pill buttons** (`border-radius: 9999px`) for SaaS actions. Pills read as marketing/consumer; SaaS uses `6-8px` radius for buttons and inputs. - **No glassmorphism, no blur, no gradient borders.** The aesthetic is precision, not richness. - **Shadows are tight and downward.** Not diffuse, not multi-direction. Reserved for floating layers (popovers, modals, dropdowns). - **One font.** Inter / Geist / IBM Plex Sans / native system stack. Avoid mixing display + body fonts; SaaS uses a single workhorse sans. - **Mono for IDs, code, tokens, money.** Tabular figures (`font-variant-numeric: tabular-nums`) for any column of numbers. ### Reference apps to mentally calibrate against | Surface to build | Look at | |---|---| | Application shell | Linear, Vercel, Stripe Dashboard | | Data table | Stripe `/payments`, Linear backlog, PlanetScale branches | | Settings page | Vercel project settings, Clerk dashboard, GitHub repo settings | | Billing / invoice | Stripe billing, Vercel usage | | Empty state | Linear, Notion, Vercel deployments | | Command palette | Linear ⌘K, Vercel ⌘K, Raycast | | Auth | Clerk hosted pages, Stripe Connect onboarding | | Onboarding checklist | Stripe Atlas, Vercel project import | --- ## 2. Color System ### 2.1 Neutral Scale (the backbone) SaaS UIs are 80–90% neutrals. The neutral scale carries the entire interface; brand is sprinkled on top. Use a slightly cool neutral (slate) by default — it reads more "product" than warm grays which feel marketing/lifestyle. | Token | Hex | Usage | |---|---|---| | `--neutral-0` | `#FFFFFF` | Page background (light mode), surface lifted onto canvas | | `--neutral-50` | `#F8FAFC` | Canvas background, alternating row stripe | | `--neutral-100` | `#F1F5F9` | Hover background, subtle fill, table header | | `--neutral-200` | `#E2E8F0` | **Default border**, divider | | `--neutral-300` | `#CBD5E1` | Strong border, input border on focus-within parent | | `--neutral-400` | `#94A3B8` | **Subtle text** (placeholders, disabled, captions) | | `--neutral-500` | `#64748B` | Tertiary text, icon default | | `--neutral-600` | `#475569` | **Muted text** (descriptions, secondary labels) | | `--neutral-700` | `#334155` | Strong icon, hover text | | `--neutral-800` | `#1E293B` | Heading in dense UIs, code text | | `--neutral-900` | `#0F172A` | **Primary text**, primary icons | | `--neutral-950` | `#020617` | Highest contrast (rare; only for critical labels) | ### 2.2 Brand Accent (single color, used sparingly) Pick **one** accent. Use a 6-step ramp so hover/active/focused/disabled all derive from the same hue. Defaults below use indigo (`#5E6AD2`, Linear's accent) — swap the hue for your brand but keep the structure. | Token | Hex | Usage | |---|---|---| | `--brand-50` | `#EEF0FB` | Selected row background, badge background, focus ring background | | `--brand-100` | `#DDE0F7` | Hover on brand surfaces | | `--brand-200` | `#B9C0EF` | Disabled brand button, decorative | | `--brand-500` | `#7B85DC` | Brand hover surface stroke | | `--brand-600` | `#5E6AD2` | **Primary brand** — default button bg, link text, focus ring, active nav item | | `--brand-700` | `#4A56C0` | Hover state for primary button | | `--brand-800` | `#3A45A8` | Active/pressed state | | `--brand-900` | `#2A3284` | High-contrast brand text on light background | ### 2.3 Semantic / Status Colors Used for state — never for decoration. Each has a `text`, `bg`, `border` triplet so badges and inline messages stay legible. | State | `text` | `bg` (filled) | `bg-subtle` (badge) | `border` | |---|---|---|---|---| | **Success** | `#15803D` | `#16A34A` | `#DCFCE7` | `#86EFAC` | | **Warning** | `#A16207` | `#CA8A04` | `#FEF9C3` | `#FDE68A` | | **Error / Destructive** | `#B91C1C` | `#DC2626` | `#FEE2E2` | `#FCA5A5` | | **Info** | `#1D4ED8` | `#2563EB` | `#DBEAFE` | `#93C5FD` | | **Neutral (default badge)** | `#334155` | `#64748B` | `#F1F5F9` | `#CBD5E1` | Rules: - Inline form errors: `text` color on `bg-subtle` background, `border` for the input. - Toasts: `bg-subtle` panel, `text` heading, `--neutral-700` body. - Status badges: `text` on `bg-subtle` + 1px `border`. Never use solid `bg` for badges (too loud). ### 2.4 Data Visualization Palette When you need >1 color for charts. Categorical — visually distinct, similar luminance. Avoid the brand color in this palette so brand reads as "interactive" elsewhere. ``` --chart-1: #2563EB (blue) --chart-2: #16A34A (green) --chart-3: #CA8A04 (amber) --chart-4: #DC2626 (red) --chart-5: #9333EA (violet) --chart-6: #0891B2 (cyan) --chart-7: #DB2777 (pink) --chart-8: #65A30D (lime) ``` ### 2.5 Dark Mode Mapping SaaS dark modes are **not just inverted**. They are slightly desaturated, slightly lifted, with carefully tuned elevation. Use `#0A0E1A` (or `#0B0F1C`) as the canvas — NEVER `#000000`. Pure black creates harsh contrast and exposes any banding in shadows. | Token | Light | Dark | |---|---|---| | `--bg-canvas` | `#F8FAFC` | `#0A0E1A` | | `--bg-surface` | `#FFFFFF` | `#111827` | | `--bg-elevated` | `#FFFFFF` | `#1F2937` | | `--bg-overlay` (popover/modal) | `#FFFFFF` | `#1F2937` | | `--text-primary` | `#0F172A` | `#F1F5F9` | | `--text-muted` | `#475569` | `#94A3B8` | | `--text-subtle` | `#94A3B8` | `#64748B` | | `--border-default` | `#E2E8F0` | `#1F2937` | | `--border-strong` | `#CBD5E1` | `#374151` | | `--brand-bg-subtle` | `#EEF0FB` | `rgba(94, 106, 210, 0.16)` | | `--brand-fg` | `#5E6AD2` | `#A5B4FC` | In dark mode the **brand color shifts lighter** (toward `--brand-500/400` instead of `--brand-600/700`) to maintain contrast against the dark canvas. --- ## 3. Typography ### 3.1 Font Stack ```css --font-sans: "Inter", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Geist Mono", "SF Mono", "Menlo", "Consolas", ui-monospace, monospace; ``` Hard rules: - **Never use `Arial`, `Helvetica`, `Roboto`, or `Times`** in a SaaS UI. These read as default/unstyled. If you can't load a webfont, fall through to `system-ui` instead. - **Never mix two display fonts.** One sans + one mono is the entire stack. - **`font-feature-settings: "cv11", "ss01", "ss03"`** for Inter (or whatever stylistic sets your font has) — small caps and alternate forms make tables look intentional. - **`font-variant-numeric: tabular-nums`** on EVERY column that contains numbers (money, dates, IDs, counts). Non-tabular figures make rows shimmer. ### 3.2 Type Scale (SaaS-tuned — denser than marketing) | Token | Size | Line Height | Weight | Letter Spacing | Use | |---|---|---|---|---|---| | `text-2xs` | 11px / 0.6875rem | 1.36 (15px) | 500 | 0.04em | Microlabels (uppercase metadata, table column tags) | | `text-xs` | 12px / 0.75rem | 1.33 (16px) | 400/500 | 0 | Captions, badge text, table secondary | | `text-sm` | 13px / 0.8125rem | 1.38 (18px) | 400/500 | 0 | **Default UI text**: table rows, buttons, form labels | | `text-base` | 14px / 0.875rem | 1.43 (20px) | 400/500 | 0 | Body text, paragraph copy in panels | | `text-md` | 15px / 0.9375rem | 1.47 (22px) | 400/500 | 0 | Comfortable reading (descriptions, modals) | | `text-lg` | 16px / 1rem | 1.5 (24px) | 500/600 | -0.005em | Card headings, sidebar section labels | | `text-xl` | 18px / 1.125rem | 1.44 (26px) | 600 | -0.01em | Subsection headings | | `text-2xl` | 20px / 1.25rem | 1.4 (28px) | 600 | -0.015em | Page subheadings | | `text-3xl` | 24px / 1.5rem | 1.33 (32px) | 600 | -0.02em | Page title (h1 in dashboards) | | `text-4xl` | 30px / 1.875rem | 1.2 (36px) | 600/700 | -0.025em | Marketing-adjacent hero in settings | **Critical**: the default UI size in SaaS is **13px or 14px**, NOT 16px. Stripe is 14px. Linear is 13px. Vercel is 14px. 16px feels too big and creates pages that scroll forever. ### 3.3 Weights | Weight | Value | Use | |---|---|---| | Regular | 400 | Body, table cells, descriptions | | Medium | 500 | Default for buttons, labels, table headers, navigation, badge text | | Semibold | 600 | Headings, emphasized stats, active nav | | Bold | 700 | Rare — only marketing-adjacent surfaces or KPI numbers | **Never** use weight 800 or 900 in a SaaS UI. ### 3.4 Letter Spacing | Context | Value |