# Minimal UI Patterns — Linear, Stripe, Vercel, and friends

> A deep-dive into the six most useful minimal-SaaS sub-styles. Read this when `aesthetics.md` §1 (Refined Minimal) is right for the project, but you need to pick a *specific* direction. Each sub-style has concrete rules, palettes, components, and references — not vibes.

---

## How to use this file

`aesthetics.md` §1 says: **Refined Minimal** when the product is SaaS, fintech, dev tools, or B2B. That's the family.

This file says: **which Linear-style cousin** to ship. Because "minimal" without a specific direction is just empty.

Decision rule:
1. **Is the product B2B / SaaS / fintech / dev tools?** If no → wrong family, go back to `aesthetics.md`.
2. **Pick the sub-style** that matches the audience and tone (use the table below).
3. **Commit to it.** Don't blend Linear's purple with Stripe's indigo. Don't mix Vercel's pink with Arc's sage.

---

## Sub-style comparison

| Sub-style | Mood | Theme | Accent | Audience |
|---|---|---|---|---|
| **Linear** | Quiet confidence, dense, precise | Dark default | Purple `#5E6AD2` | Engineering teams, power users |
| **Stripe** | Authoritative, code-forward, premium | Light or dark | Indigo `#635BFF` | Developers, technical buyers |
| **Vercel** | Stark, geometric, opinionated | Either (often B/W) | None, or pink `#FF0080` | Frontend devs, designers, agencies |
| **Arc** | Warm, considered, premium browser | Light, warm tones | Subtle red or sage | Knowledge workers, writers, designers |
| **Mercury** | Editorial premium, banking-quality | Light, off-white | Deep green or deep blue | Finance teams, ops, founders |
| **Cron / Notion Calendar** | Friendly precise, soft personality | Off-white, warm | Multi-hue palette (semantic) | Creators, schedulers, knowledge workers |

When unsure → **Linear**. It is the safest high-quality baseline for dark-mode B2B SaaS.

---

## 1. Linear

**Live reference:** [linear.app](https://linear.app)

### Identity
The reference standard for dark-mode minimal SaaS. Quiet, dense, precise. Every pixel is a decision. The interface gets out of the way. The accent is purple, the chrome is hairline, the typography is Inter, the geometry is exact.

### When to choose
- Engineering teams, product teams, ops teams
- Power users who live in the app 8 hours a day
- Products that compete on density of information
- Dark mode by default is appropriate

### Palette
```
--surface:         #08090A   /* deep, near-black */
--surface-1:       #1B1C1F   /* panels, sidebar */
--surface-2:       #26272B   /* elevated cards */
--surface-3:       #2F3034   /* hover */

--ink:             #F7F8F8   /* warm-tinted near-white */
--ink-muted:       #8A8F98   /* secondary */
--ink-subtle:      #62666D   /* tertiary */

--hairline:        #1F2024
--hairline-strong: #2C2D31

--accent:          #5E6AD2   /* Linear purple — the signature */
--accent-strong:   #7176E0   /* hover */
--accent-soft:     rgba(94, 106, 210, 0.14)

--good:            #4CB782
--warn:            #E2B203
--bad:             #EB5757
```

### Typography
- **All sans.** Inter Display for headlines, Inter for UI, Inter (or Geist) for body.
- **No mono in chrome**, except for keyboard shortcut hints (`⌘K`).
- **Weights:** 400 body, 500 medium for UI controls, 600 semibold for headings and primary actions. Almost never 700.
- **Hero size:** `clamp(2.75rem, 5vw, 4.5rem)` — confident, not dramatic.
- **Line-height:** tight on display (1.05–1.15), 1.5 on body.
- **Tracking:** -0.02em on display, 0 elsewhere. Linear doesn't track all-caps positive in chrome.

### Layout
- **Max content width:** ~1100px
- **Sidebar:** ~240px wide, collapsible to 56px (icon-only). Always dark, always present in app.
- **Top nav (marketing):** 60–64px tall, sticky, blur backdrop, hairline bottom border.
- **Asymmetric hero:** headline left (5/12 cols), product UI right (7/12 cols). Never centered.
- **Padding:** generous (px-12 desktop, px-6 mobile).

### Signature patterns

**The sidebar**
- Section labels in caps mono, +0.1em tracking
- Active item: 4px left border in `--accent`, OR background tint in `--accent-soft`
- Icon + label, 32px row height, 14px font
- Section dividers as 1px hairlines, generous vertical spacing between sections

**The "New Issue" modal (or any command modal)**
- Centered, max-width 560px
- Input field at the top, full-width, no border, large
- List of suggestions below, keyboard-driven (`↑ ↓ ↵`)
- `Esc` closes, `⌘K` opens
- Background dimmed to ~50% opacity
- Subtle scale-in (0.98 → 1, 120ms ease-out)

**The empty state**
- Centered, single illustration or icon (geometric, 1.5px stroke)
- One sentence explaining what's missing
- One action button ("Create your first issue")
- Linear's empty states are famously restrained — almost no decoration

**The list item**
- 40–48px tall
- Single line of content
- Status dot (left), title (center), metadata (right, mono)
- Hover: background tints to `--surface-2`
- Selected: background tints to `--accent-soft` (subtle)
- No drop shadows, no rounded corners beyond 6px

**The button**
- Two heights: 32px (compact) and 40px (default)
- Border radius: 6px
- Primary: `--accent` background, white text
- Secondary: transparent, 1px hairline-strong border
- Hover (secondary): border becomes white
- Active: `transform: scale(0.98)` 80ms

### Hallmarks to preserve
- ✅ Hairline borders instead of shadows
- ✅ Tabular numerals everywhere (font-feature-settings: 'tnum')
- ✅ Inter (or close cousin — Geist) as the *only* family
- ✅ 6px radius on everything — never pill
- ✅ Information density is high, density is comfortable
- ✅ Keyboard-first (visible shortcuts, ⌘K command palette)

### Anti-patterns to avoid
- ❌ Drop shadows on cards
- ❌ Bright/saturated colors anywhere
- ❌ Glassmorphism
- ❌ Animations beyond 150ms
- ❌ Centering hero content
- ❌ Decorative illustrations in chrome
- ❌ Bouncy/spring easing

---

## 2. Stripe

**Live reference:** [stripe.com](https://stripe.com)

### Identity
Authoritative. Code-forward. Premium. Stripe uses code as marketing — every page has a code block, every product has a curl example. The typography is Söhne (paid) or a careful sans substitute. The accent is a distinctive indigo, present but never loud.

### When to choose
- Developer-facing products
- API products, infrastructure, fintech, payments
- Audiences who read code on landing pages
- Products where the API IS the value proposition

### Palette
```
--surface:         #FFFFFF   /* or #F6F9FC for sections */
--surface-1:       #F6F9FC   /* soft cool tint */
--surface-2:       #FFFFFF
--surface-3:       #E8EDF2

--ink:             #0A2540   /* Stripe's deep navy, not black */
--ink-muted:       #425466
--ink-subtle:      #8898AA

--hairline:        #E8EDF2
--hairline-strong: #D4DBE3

--accent:          #635BFF   /* Stripe indigo */
--accent-strong:   #5247DB
--accent-soft:     #EBF0FF

--good:            #00875A
--warn:            #FFB300
--bad:             #E25950
```

Note: Stripe's primary ink is `#0A2540` (deep navy), not pure black. This is a signature choice — softer than black, more authoritative than gray.

### Typography
- **Söhne** (paid) for everything; substitute with **Inter Display** + **Inter** for free.
- Weights: 400 body, 500 for UI, 600 for headings.
- **Hero size:** `clamp(2.5rem, 5vw, 4.25rem)` — confident, restrained.
- **Section H2:** `clamp(1.875rem, 3vw, 2.5rem)`.
- **Tracking:** -0.02em on display, 0 on body.

### Layout
- Max-width 1080–1140px (Stripe is slightly narrower than typical SaaS)
- Hero: text left, abstract visualization right (gradients OK here, used with restraint and brand-color)
- Below the fold: dense sections, often with code blocks
- Code block as a marketing surface — never decorative

### Signature patterns

**The "gradient hero" (Stripe-specific)**
Stripe is one of the few brands that uses a gradient hero well — and only because the gradient is *internal*, not purple-to-blue:
```
background: linear-gradient(180deg, #F6F9FC 0%, #FFFFFF 100%);
/* or a subtle radial in brand color */
background: radial-gradient(ellipse at top, rgba(99, 91, 255, 0.12) 0%, transparent 50%);
```
The gradient is atmosphere, not decoration. Pure white below the fold.

**The code block**
- This is the marketing surface. Make it look like a real terminal.
- Dark background (`#0A2540` or `#1B1B3A`)
- Syntax highlighting in brand palette (indigo, light cyan, light pink)
- Window chrome (red/yellow/green dots) for terminal feel
- Inline cursor blinking on one line
- Comment line explaining what the code does, in italic

```
$ stripe listen --forward-to localhost:3000/webhook
> Ready! Listening for events...
> 2026-04-12 14:32:11  [200] checkout.session.completed
```

**The "stacked cards" pricing**
Stripe uses stacked card preview — three cards with subtle offset and shadow, showing the product from multiple angles. Used in payment-method pages.

**The numbered grid**
Often Stripe presents features as a numbered list (01, 02, 03) with a description and a small visualization. Not the generic 3-card row.

### Hallmarks
- ✅ Code block is a hero element
- ✅ Stripe indigo used precisely (links, focus, primary CTA, syntax highlighting)
- ✅ Navy ink `#0A2540` instead of pure black
- ✅ Generous whitespace, dense info
- ✅ Real product screenshots in context, not abstract
- ✅ Subtle gradients (atmospheric, not decorative)

### Anti-patterns to avoid
- ❌ Generic "3-card features" grid
- ❌ Stock photos of developers
- ❌ "Empowering developers to..." copy
- ❌ Code blocks with fake/lorem code (Stripe uses real examples)
- ❌ Loud hero gradients that compete with content

---

## 3. Vercel

**Live reference:** [vercel.com](https://vercel.com)

### Identity
Stark. Geometric. Opinionated. Vercel often ships pure black on white or pure white on black, with a single accent color (often none, sometimes a hot pink). The type is Geist (their own). The geometry is sharp — square corners, dense info, sharp typography.

### When to choose
- Frontend developer tools, frameworks, deployment platforms
- Products that need to feel fast and modern
- Audiences that respect B/W restraint
- Anything that needs to feel "opinionated"

### Palette

**Default (white):**
```
--surface:         #FFFFFF
--surface-1:       #FAFAFA
--surface-2:       #F4F4F5

--ink:             #000000   /* Vercel uses pure black */
--ink-muted:       #71717A
--ink-subtle:      #A1A1AA

--hairline:        #E4E4E7
--hairline-strong: #D4D4D8

--accent:          #FF0080   /* Vercel pink, used sparingly */
--accent-soft:     rgba(255, 0, 128, 0.08)
```

**Dark (also common):**
```
--surface:         #000000
--surface-1:       #0A0A0A
--surface-2:       #111111

--ink:             #FFFFFF   /* Vercel uses pure white */
--ink-muted:       #A1A1AA
--ink-subtle:      #71717A

--hairline:        #1F1F1F
--hairline-strong: #2E2E2E

--accent:          #FF0080
--accent-soft:     rgba(255, 0, 128, 0.12)
```

Vercel uses *pure* black and *pure* white — this is a deliberate choice. Most brands shouldn't, but Vercel can because the rest of the design carries the weight.

### Typography
- **Geist Sans** (their own, free) or **Inter** as substitute
- **Geist Mono** for code, kickers
- Weights: 400 body, 500 UI, 600 headings. Very rarely 700.
- **Hero size:** `clamp(3rem, 6vw, 5rem)` — confident, often large.
- **Tracking:** -0.04em on display headlines (Vercel tracks tight, even tighter than Linear).
- **Line-height:** 1.0 on display headlines (very tight).

### Layout
- Max-width 1200px
- Hero: usually large headline left or centered, with a sharp product UI mockup (often a terminal or dashboard).
- Sharp grid, generous spacing between sections.
- Sharp corners (radius 0 or 4px max).

### Signature patterns

**The black/white inversion**
Vercel often ships the same product in both themes. The dark theme is *pure black* with white text — not the "not-quite-black" pattern of Linear.

**The terminal-as-hero**
Terminal screenshots as the hero image. Pure black background, monospace text, sometimes a subtle gradient at the edge. The terminal is the product.

```
$ vercel deploy
> Production: https://my-app.vercel.app [copied to clipboard]
> Completed in 1.247s
```

**The "all caps micro labels"**
Section labels and metadata in uppercase mono, but with Vercel's tight tracking (not the wide tracking common elsewhere). Reads as a system, not a decoration.

**The geometric icons**
Custom or Lucide icons, 16–20px, 1.5px stroke. Sharp, no rounded corners on icons.

### Hallmarks
- ✅ Pure black or pure white backgrounds (Vercel breaks the "don't use pure" rule, intentionally)
- ✅ Geist Sans + Geist Mono pairing
- ✅ Very tight tracking (-0.04em on display)
- ✅ Sharp corners (radius 0–4px)
- ✅ Terminals as hero images
- ✅ Hot pink accent used on one CTA per page max

### Anti-patterns to avoid
- ❌ Rounded corners > 8px
- ❌ Soft pastels
- ❌ Decorative illustrations
- ❌ Multiple accent colors
- ❌ Centered everything (Vercel often centers hero, but it's deliberate — a *statement* of restraint, not a default)
- ❌ Heavy animations

---

## 4. Arc

**Live reference:** [arc.net](https://arc.net)

### Identity
Warm, considered, premium. Arc's marketing is editorial-influenced — generous typography, soft warm tones, restrained accents, considered spacing. The browser itself is also designed this way. The aesthetic is "premium software for thoughtful people."

### When to choose
- Consumer products with premium positioning
- Tools for writers, designers, knowledge workers
- Products where personality is a feature
- Anything that wants to feel "considered" without feeling cold

### Palette
```
--surface:         #FBFBF8   /* warm off-white, Arc's signature */
--surface-1:       #FFFFFF
--surface-2:       #F4F4EE   /* slightly warmer */

--ink:             #191919
--ink-muted:       #6E6E6E
--ink-subtle:      #A8A8A8

--hairline:        #E8E8E0
--hairline-strong: #D4D4C8

--accent:          #FF554A   /* Arc red — used very sparingly */
--accent-soft:     rgba(255, 85, 74, 0.1)

--good:            #2E7D32
--warn:            #ED6C02
--bad:             #D32F2F
```

The accent is red — used like editorial red (subhead accents, focus, "go" indicators). Almost never on backgrounds.

### Typography
- **GT Walsheim** (paid) or **Inter** substitute
- Generous display sizes, often with serif influence
- Hero size: `clamp(2.75rem, 5vw, 4.5rem)` — confident, generous
- Tracking: -0.02em on display
- Line-height: 1.05 on display

### Layout
- Max-width 1200px
- Hero: large headline, product UI as visual (often the browser window itself)
- Section H2s often have serif italic emphasis on key word
- Asymmetric but warm

### Signature patterns

**The browser-as-hero**
The product is the browser, so the hero *is* a browser window. Rendered in CSS, sharp, considered.

**The "red emphasis"**
Italic word or short phrase in display face, set in accent red. Like an editorial pull quote, used inline in headlines.

```
The browser<br>
that <em>thinks</em><br>
with you.
```

**The "small card, big moment"**
Arc uses small product moments (a single feature panel) with very generous surrounding whitespace. Less is more.

### Hallmarks
- ✅ Warm off-white background (not pure white)
- ✅ Considered italic emphasis in headlines
- ✅ Soft product screenshots (browser windows with internal UI)
- ✅ Generous whitespace
- ✅ Red accent on maybe 5% of pixels

### Anti-patterns to avoid
- ❌ Pure white background (breaks warmth)
- ❌ Cold blue accents
- ❌ Glassmorphism
- ❌ Multiple accent colors
- ❌ Bouncy animations

---

## 5. Mercury / premium fintech

**Live reference:** [mercury.com](https://mercury.com)

### Identity
Editorial premium. Banking-quality. Mercury positions itself as the bank for startups, and its design language is "Stripe for finance" — clean, dense, considered, with serif influence in some headlines.

### When to choose
- Fintech products
- Banking, payments, treasury
- Premium positioning in any B2B vertical
- Products where the audience expects "considered" design

### Palette
```
--surface:         #FFFFFF
--surface-1:       #FAFAF8   /* warm tint */
--surface-2:       #F4F2EE

--ink:             #1A1A1A
--ink-muted:       #6E6E6E
--ink-subtle:      #999999

--hairline:        #E8E5DE
--hairline-strong: #D4D0C6

--accent:          #1B4332   /* Mercury deep green */
--accent-soft:     #E8F0EC
```

Mercury uses a deep, considered green as accent — almost no other brand does this, so it reads as "premium banking" instantly.

### Typography
- **Söhne** (paid) + occasional serif (Tiempos) for editorial moments
- Substitute: **Inter** for sans, **GT Super** or **Fraunces** for serif
- Hero size: `clamp(2.5rem, 5vw, 4rem)` — confident
- Section H2: `clamp(1.875rem, 3vw, 2.5rem)`

### Layout
- Max-width 1200px
- Hero: headline left, product UI right (always — never centered)
- Dense sections below with data and tables
- Generous whitespace between sections

### Signature patterns

**The "table as hero"**
Fintech products often show tables of data (transactions, balances) in hero sections. Mercury does this well — clean rows, tabular numerals, hairline dividers.

**The "data visualization"**
Numbers are presented as design — not as decoration. Big numbers with context, comparison, trend indicators.

**The serif moment**
A serif word in an otherwise sans context. Used sparingly. Signals "we have time to consider this."

### Hallmarks
- ✅ Deep green or deep blue accent (premium banking colors)
- ✅ Serif moment in headlines (sparingly)
- ✅ Tables as design elements
- ✅ Editorial influence in copy and rhythm
- ✅ Generous whitespace

### Anti-patterns to avoid
- ❌ Bright/banking-blue accents (#1E88E5 etc.)
- ❌ Decorative charts (charts should be data, not decoration)
- ❌ Centered hero
- ❌ Generic fintech marketing copy

---

## 6. Cron / Notion Calendar (friendly precise)

**Live reference:** [cron.com](https://cron.com), [notion.so/product/calendar](https://notion.so/product/calendar)

### Identity
Friendly but precise. Off-white backgrounds, warm tones, multi-hue palette used *semantically* (each color = a category, state, or feature). Rounded but not pill. Custom illustrations. Has personality without losing professionalism.

### When to choose
- Productivity tools, calendars, schedulers
- Knowledge work products
- Consumer B2B (Notion, Cron, Things)
- Anything where delight is part of the value

### Palette
```
--surface:         #FAF8F5   /* warm off-white */
--surface-1:       #FFFFFF
--surface-2:       #F2EFEA

--ink:             #1F1F1F
--ink-muted:       #6B6B6B
--ink-subtle:      #A8A8A8

--hairline:        #E8E5DE

/* Multi-hue semantic palette — used like categories */
--hue-1:           #FF6B6B   /* coral */
--hue-2:           #4ECDC4   /* teal */
--hue-3:           #FFD93D   /* mustard */
--hue-4:           #6C5CE7   /* soft purple */
--hue-5:           #95E1D3   /* mint */
```

Each color is used for a specific category. The palette is coherent (all desaturated, similar value).

### Typography
- **GT Walsheim** (paid) or **Inter** substitute
- Display: `clamp(2.5rem, 5vw, 4rem)`
- Friendly but not casual
- Tracking: -0.02em on display

### Layout
- Max-width 1200px
- Hero: large headline + product UI (calendar view)
- Custom illustrations as visual texture
- Rounded corners: 8–12px

### Signature patterns

**The semantic color**
Each product category, feature, or user has a color. The color is *meaningful*, not decorative.

**The custom illustration**
Cron and Notion Calendar use custom illustrations as visual texture — geometric, friendly, consistent style. Not stock, not emoji.

**The "personality in microcopy"**
Microcopy has a voice. Empty states have a sentence that makes you smile. Tooltips have one-liners.

### Hallmarks
- ✅ Multi-hue palette used semantically
- ✅ Custom illustrations (geometric, friendly)
- ✅ Off-white warm backgrounds
- ✅ Rounded but not pill (8–12px)
- ✅ Microcopy with personality

### Anti-patterns to avoid
- ❌ Emoji as icons
- ❌ Stock photos
- ❌ Generic 3-card row with icons
- ❌ Loud/bright colors with no logic
- ❌ Corporate throat-clearing copy

---

## 7. Sublime

**Live reference:** [sublime.app](https://sublime.app)

### Identity
macOS-native email client with a calm, considered, premium feel. Generous spacing, light, airy. Subtle warm off-white. The aesthetic of "premium productivity software" applied to email — quiet confidence, soft depth, restraint.

### When to choose
- Productivity tools with macOS / native feel
- Email, notes, calendar apps
- Anything targeting "thoughtful" professional users
- Premium positioning in consumer productivity

### Palette
```
--surface:         #FBFBFA   /* warm off-white, very subtle tint */
--surface-1:       #FFFFFF
--surface-2:       #F4F4F1

--ink:             #1A1A1A
--ink-muted:       #6B6B6B
--ink-subtle:      #A0A0A0

--hairline:        #E8E8E5
--hairline-strong: #D4D4D0

--accent:          #1A73E8   /* Sublime's restrained blue */
--accent-soft:     #E8F0FE

--good:            #1E8E3E
--warn:            #F9AB00
--bad:             #D93025
```

Note: Sublime uses a quiet blue, not a loud one. Almost editorial in restraint.

### Typography
- **SF Pro Display / SF Pro Text** (Apple system) or **Inter** as substitute
- Weights: 400 body, 500 for UI, 600 for headings
- Hero size: `clamp(2rem, 4vw, 3rem)` — calm, not dramatic
- Tracking: -0.01em on display (subtle)
- Generous line-height: 1.6 on body

### Layout
- Max-width 1100px (narrower than typical SaaS)
- Hero: small headline + generous space + product UI screenshot
- Section H2s often in serif (subtle editorial influence)

### Signature patterns
- ✅ Sidebar with subtle hover state, no harsh borders
- ✅ Generous line-height in lists (each row has air)
- ✅ Soft shadows only on floating elements (modals, popovers)
- ✅ "Premium native app" feel — like Apple Mail, but better designed
- ✅ Soft depth via very subtle backgrounds, not shadows

### Anti-patterns to avoid
- ❌ Heavy drop shadows
- ❌ Loud accent colors
- ❌ Dense data tables (Sublime is about calm, not density)
- ❌ Aggressive animations

---

## 8. Height (project management)

**Live reference:** [height.app](https://height.app)

### Identity
Auto-updating project management with a clean, professional aesthetic. Light by default (rare for PM tools). Specific to "tasks that update themselves" — the interface gets out of the way, the data does the talking.

### When to choose
- Project management, task tools
- Tools where automation is the value proposition
- B2B tools that want to feel "modern but professional"
- Audiences that want clarity over personality

### Palette
```
--surface:         #FFFFFF
--surface-1:       #FAFAFA
--surface-2:       #F4F4F5

--ink:             #18181B   /* near-black, slightly cool */
--ink-muted:       #71717A
--ink-subtle:      #A1A1AA

--hairline:        #E4E4E7
--hairline-strong: #D4D4D8

--accent:          #5D5FEF   /* Height's blue-purple */
--accent-soft:     #EEEEFE

--good:            #10B981
--warn:            #F59E0B
--bad:             #EF4444
```

### Typography
- **Inter** for everything (Height's choice)
- Mono for keyboard shortcuts and metadata
- Hero size: `clamp(2.25rem, 4.5vw, 3.5rem)` — calm, confident
- Tracking: -0.02em on display
- Line-height: 1.05 on display, 1.5 on body

### Layout
- Max-width 1200px
- Sidebar (in app) — collapsible
- Marketing hero: text left, product UI right
- Generous section spacing

### Signature patterns
- ✅ Clean, light professional aesthetic (rare for PM tools)
- ✅ Strong, clear status indicators
- ✅ Property-based UI (custom fields visible, machine-readable)
- ✅ Generous whitespace, low visual noise
- ✅ Dense info but never cluttered

### Anti-patterns to avoid
- ❌ Heavy dark themes (Height is light-first)
- ❌ Loud, marketing-y hero
- ❌ Decorative illustrations
- ❌ Generic "3-card features" presentation

---

## 9. Pitch

**Live reference:** [pitch.com](https://pitch.com)

### Identity
Presentation tool with more personality than Linear, more polish than Notion. Modern, warm, with strong color usage (multi-hue semantic palette like Cron). Custom illustrations. Generous whitespace.

### When to choose
- Creative tools, presentation software
- Collaboration products
- Tools that want personality without losing professionalism
- Anything targeting designers, marketers, agencies

### Palette
```
--surface:         #FAFAF7
--surface-1:       #FFFFFF
--surface-2:       #F4F2EC

--ink:             #1F1F1F
--ink-muted:       #6B6B6B
--ink-subtle:      #A8A8A8

--hairline:        #E8E5DE

/* Multi-hue semantic — each color has meaning */
--hue-primary:     #FF4D6D   /* coral pink — primary CTA */
--hue-secondary:   #5B5FED   /* purple-blue — secondary */
--hue-tertiary:    #00C2A8   /* teal — status */
--hue-warning:     #FFB800
```

### Typography
- **Inter** for UI + **GT Super** or **Fraunces** for display moments
- Display: `clamp(2.5rem, 5vw, 4rem)`
- Tracking: -0.02em on display
- Line-height: 1.1 on display

### Layout
- Max-width 1200px
- Hero: text + product UI mockup (a slide being edited)
- Custom illustrations as visual texture
- Asymmetric sections with mixed media

### Signature patterns
- ✅ Multi-color semantic palette (each color = a category or feature)
- ✅ Custom geometric illustrations
- ✅ Personality in microcopy
- ✅ Slight serif influence (display moments)
- ✅ Generous whitespace between bold moments

### Anti-patterns to avoid
- ❌ Boring single-accent palette
- ❌ Stock illustrations
- ❌ Generic 3-card features
- ❌ Loud animations

---

## 10. Figma

**Live reference:** [figma.com](https://figma.com)

### Identity
Design tool marketing that's technical, dense, and full of personality. Multi-color palette (each Figma product has its color). Mixed sans typography. Strong grid. Custom iconography. Code-forward in some pages (CSS, SVG, Figma plugin code).

### When to choose
- Developer / designer tools
- Products where extensibility / API is a feature
- Tools with multiple sub-products (each can have its own color)
- Anything that wants to feel "made by designers, for designers"

### Palette
```
--surface:         #FFFFFF
--surface-1:       #F5F5F5
--surface-2:       #E5E5E5

--ink:             #1E1E1E
--ink-muted:       #5C5C5C
--ink-subtle:      #8C8C8C

--hairline:        #E5E5E5
--hairline-strong: #C7C7C7

/* Multi-product palette — each Figma product = a color */
--hue-figma:       #F24E1E   /* orange-red */
--hue-figjam:      #A259FF   /* purple */
--hue-dev:         #0ACF83   /* green */
--hue-make:        #9747FF   /* deeper purple */
--hue-slides:      #FF7262   /* coral */
```

### Typography
- **Inter** for everything (Figma's choice)
- Mono for code blocks (JetBrains Mono)
- Hero size: `clamp(2.5rem, 5vw, 4rem)` — confident
- Tracking: -0.02em on display
- Sometimes uses serif for editorial moments (rare)

### Layout
- Max-width 1280px
- Hero: large headline + product UI screenshot (a Figma canvas with shapes)
- Code blocks as marketing surfaces (CSS, plugin code)
- Strong grids, dense info

### Signature patterns
- ✅ Multi-product color coding
- ✅ Custom geometric icons (Figma's famous logomark family)
- ✅ CSS / SVG / plugin code shown as marketing
- ✅ "Designed by designers" aesthetic — slightly meta
- ✅ Mixed media: UI + illustration + code on one page

### Anti-patterns to avoid
- ❌ Single-accent palette (defeats Figma's multi-product identity)
- ❌ Heavy drop shadows
- ❌ Generic "tools for designers" marketing
- ❌ Stock photos

---

## 11. Notion (main app / workspace)

**Live reference:** [notion.so](https://notion.so)

### Identity
All-in-one workspace with the most distinctive illustration system in modern SaaS. Off-white warm background, custom hand-drawn-feeling illustrations (geometric, friendly, slightly weird), generous whitespace, restrained accents, personality in microcopy.

### When to choose
- Productivity, notes, docs tools
- All-in-one workspace products
- Tools targeting "creative knowledge workers"
- Anything that wants warmth + utility

### Palette
```
--surface:         #FAF9F7   /* warm off-white */
--surface-1:       #FFFFFF
--surface-2:       #F4F2EE

--ink:             #2F2F2F
--ink-muted:       #6B6B6B
--ink-subtle:      #A8A8A8

--hairline:        #E8E5DE
--hairline-strong: #D4D0C6

--accent:          #2383E2   /* Notion's blue */
--accent-soft:     #E6F0FB
```

Notion's "accent" is blue, but it's used very sparingly. The illustrations carry the color.

### Typography
- **Inter** for UI
- Sometimes **Source Serif** for editorial moments
- Hero size: `clamp(2.5rem, 5vw, 4rem)` — confident, generous
- Tracking: -0.02em on display
- Line-height: 1.1 on display, 1.55 on body

### Layout
- Max-width 1200px
- Hero: text + product UI (a Notion page being edited)
- Custom illustrations throughout, often as the visual focus of a section

### Signature patterns
- ✅ **Custom illustrations** — hand-drawn feel, geometric, slightly weird, friendly. This is Notion's signature. Don't try to copy exactly; understand the principle: illustrations have *personality*, are *consistent in style*, and are *the visual focus* of sections.
- ✅ Generous whitespace
- ✅ Personality in microcopy: "Welcome back", "Add a thing", empty states that say something
- ✅ Sidebar with sections, page tree, simple icons
- ✅ Minimal chrome — the page is the focus

### Anti-patterns to avoid
- ❌ Generic 3-card features with stock icons
- ❌ Loud bright colors
- ❌ Heavy drop shadows
- ❌ Corporate throat-clearing copy

---

## Decision tree (updated)



```
B2B SaaS / fintech / dev tool?
├── Yes
│   ├── Dark mode primary?
│   │   ├── Yes → Linear
│   │   └── No (or both) → continue
│   ├── Code-forward / API-first?
│   │   ├── Yes → Stripe
│   │   └── No → continue
│   ├── B/W stark minimal?
│   │   ├── Yes → Vercel
│   │   └── No → continue
│   ├── Premium fintech / banking?
│   │   ├── Yes → Mercury
│   │   └── No → continue
│   ├── Premium consumer with personality?
│   │   ├── Yes → Arc
│   │   └── No → continue
│   └── Friendly productive tool?
│       └── Yes → Cron / Notion Calendar
└── No → wrong family, return to aesthetics.md
```

---

## Hybrid rules (when forced to combine)

Sometimes a project sits between two sub-styles. Rules:

1. **Pick the dominant one** — 70/30, not 50/50.
2. **Share typography family** — if Linear + Stripe, both use Inter. Don't mix Söhne and Inter.
3. **Share accent philosophy** — don't blend purple + indigo + sage. Pick one.
4. **Surface consistency** — if dark in some places and light in others, ensure the chrome (nav, footer) is consistent.
5. **Different sub-styles for marketing vs product** is fine — Linear-style marketing, Mercury-style dashboard, etc. They share typography and tokens.

---

## What to read next

- For typography system setup → `typography.md`
- For color token implementation → `color.md`
- For component patterns (buttons, forms, tables) → `components.md`
- For motion principles → `motion.md`
- For anti-patterns to reject → `anti-patterns.md`
- For final QA → `checklist.md`