Vercel is a developer-platform brand — the page is a deployment dashboard's marketing surface, written for engineers who already know the syntax. It earns that posture with one of the cleanest stark systems on the web: near-white `{colors.canvas-soft}` body background, ink-near-black `{colors.ink}` text, a 200-step gray scale that gives every divider, border, and disabled state its own deliberate step. The only place the brand introduces colour at marketing scale is the multi-stop mesh gradient (`{colors.gradient-develop-start}` → `{colors.gradient-preview-end}` → `{colors.gradient-ship-start}` → cyan / magenta / amber) that floats in atmospheric backdrops, never miniaturised to a swatch. That gradient is the entire decoration system.

Type is the second decisive voice. The brand's own custom geometric sans (Geist) carries display, body, button — everything narrative — at weight 600 for display, 500 for buttons, 400 for body. A matching monospaced face (Geist Mono) carries technical labels: terminal mockups, code blocks, sometimes filename captions. Headlines are sentence-case with aggressive negative letter-spacing (`-2.4px` at 48 px hero) — the brand never letter-spaces positively, never goes uppercase outside of mono labels.

Surfaces use a four-step ladder: `{colors.canvas}` (pure white for cards), `{colors.canvas-soft}` 98% (the page body), `{colors.canvas-soft-2}` 95% (occasional inset region), `{colors.primary}` (the deep ink-near-black used as the polarity-flipped band when a section needs the dark mode treatment). Shadows are exceptionally subtle — every elevated card carries a stacked shadow built from `0px 1px 1px #00000005` + `0px 2px 2px #0000000a` + an inset border. Cards never float on heavy drop-shadow; they sit on the page held by hairline + soft glow.

**Key Characteristics:**

The brand's signature decoration is a three-pair gradient stack:

The three pairs collapse into a single multi-color mesh gradient when used as the hero atmospheric backdrop. Treat the gradient as one unified object — do not crop down to a single colour, do not reorder the stops, and do not miniaturise. Used at hero scale only.

Two custom faces carry the entire system:

1. **A custom geometric sans** (extracted as `Geist`) for every display, body, button, link, and label. Weights 400 / 500 / 600 are the working set; the face never appears in 700 or heavier. Display sizes are tracked aggressively negative (`-2.4 px` at 48 px hero, `-1.28 px` at 32 px section); body stays at neutral or slightly-negative tracking.

2. **A custom monospaced face** (extracted as `Geist Mono`) for terminal mockups, code blocks, and small mono-caption labels — anything that wants to signal "technical." Weight 400 only at 12 – 13 px. Tracking neutral.

A condensed display sans (`Space Grotesk`) is loaded as a third face for occasional editorial moments but does not render as the primary face anywhere in the captured surfaces.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 48px | 600 | 48px | -2.4px | Hero headline ("Build and deploy on the AI Cloud."). |

| `{typography.display-lg}` | 32px | 600 | 40px | -1.28px | Section headlines ("Your frontend, delivered.", "A compute model for all workloads."). |

| `{typography.display-md}` | 24px | 600 | 32px | -0.96px | Card-cluster headlines, pricing-tier names. |

| `{typography.display-sm}` | 20px | 600 | 28px | -0.6px | Inline display micro-headings. |

| `{typography.body-lg}` | 18px | 400 | 28px | 0 | Lead paragraphs under section headlines. |

| `{typography.body-md}` | 16px | 400 | 24px | 0 | Default body paragraph. |

| `{typography.body-md-strong}` | 16px | 500 | 24px | 0 | Bolded inline body. |

| `{typography.body-sm}` | 14px | 400 | 20px | -0.28px | Secondary body, nav-link text, button-md labels. |

| `{typography.body-sm-strong}` | 14px | 500 | 20px | -0.28px | Nav CTA labels, table-row emphasis. |

| `{typography.caption}` | 12px | 400 | 16px | 0 | Footer secondary lines, badge labels. |

| `{typography.caption-mono}` | 12px | 400 | 16px | 0 | Section eyebrows and label captions that want a technical voice. |

| `{typography.code}` | 13px | 400 | 20px | 0 | Inline code, terminal mockups, command snippets. |

| `{typography.button-md}` | 14px | 500 | 20px | 0 | Small / nav-scale button labels. |

| `{typography.button-lg}` | 16px | 500 | 24px | 0 | Marketing-scale pill button labels. |

The two primary faces are proprietary (custom-cut for the brand). Open-source substitutes:

The mesh gradient does most of the heavy decorative lifting; whitespace separates the bands. Section spacing is generous — `{spacing.4xl}` to `{spacing.5xl}` between bands lets the gradient breathe. Inside a card, the headline/paragraph stack is tight (`{spacing.xs}` 8 px gap), then a wider gap before the CTA cluster. The page reads as engineered — large gaps + tight interior, never the other way around.

| Name | Width | Key Changes |

|---|---|---|

| Mobile | < 600px | Hero stacks; nav collapses to hamburger; 3-up feature grids drop to 1-up; tab pill row enables horizontal scroll. |

| Tablet | 600–959px | 3-up grids drop to 2-up; nav still horizontal. |

| Desktop | 960–1199px | Full 3-up grids; pricing 3-up. |

| Wide | 1200–1399px | Container caps at 1400 px content width. |

| Ultra-wide | ≥ 1400px | Content stays centred at 1400 px; bands stretch edge-to-edge in colour but content holds the max-width. |

The `button-primary` pill renders at ~32 px tall in nav and ~48 px tall in marketing contexts. Marketing CTAs comfortably meet WCAG AAA at all breakpoints; nav buttons inflate touch area through `{spacing.xs}` padding on mobile to meet the 44 × 44 px floor.

| Level | Treatment | Use |

|---|---|---|

| Level 0 — Flat | No shadow, no border. | Full-bleed hero bands and the polarity-flipped dark sections. |

| Level 1 — Inset Hairline | `0 0 0 1px #00000014` inset 1 px border. | Default card chrome — the brand's universal "you can see this card" cue. |

| Level 2 — Subtle Drop | `0px 1px 1px #00000005, 0px 2px 2px #0000000a` plus inset hairline. | Slightly elevated cards (template-grid, marketing-card). |

| Level 3 — Soft Stack | `0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a` plus inset hairline. | The "medium" elevation — feature-grid cards. |

| Level 4 — Float Stack | `0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a` plus inset hairline. | "Large" elevation — pricing cards, callout panels. |

| Level 5 — Modal | `0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f` plus inset hairline. | Modal / dialog surfaces and dropdown menus. |

The brand uses STACKED shadows — multiple small offsets layered to fake natural light — never a single 8-px-blur generic drop. Inset hairline rings are always added so the card edge stays crisp.

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Full-bleed hero / footer bands. |

| `{rounded.xs}` | 4px | Tightest inline pill — the `nav-cta-signup` 6-px-radius button (mapped to `xs/sm`). |

| `{rounded.sm}` | 6px | The brand's `--geist-radius` token — base UI radius for in-app buttons, form inputs, dropdown menus. |

| `{rounded.md}` | 8px | The brand's `--geist-marketing-radius` token — feature cards, template cards. |

| `{rounded.lg}` | 12px | Slightly larger card chrome (pricing-card variants). |

| `{rounded.xl}` | 16px | Largest card chrome — when a card hosts a hero image cap. |

| `{rounded.pill-sm}` | 64px | Tab-ghost pills inside the "AI Apps / Web Apps / Ecommerce / Marketing / Platforms" row. |

| `{rounded.pill}` | 100px | The marketing CTA pill — `button-primary`, `button-secondary`, "Start Deploying" pill. |

| `{rounded.full}` | 9999px | Icon-button circular containers, nav-link ghost pills. |

**`button-primary`** — the canonical 100-px-radius black pill, marketing scale.

**`button-secondary`** — the white pill paired with the black primary inside marketing bands.

**`button-primary-sm`** — the smaller-scale primary pill used inside nav and pricing-card CTAs.

**`button-secondary-sm`** — the smaller-scale white pill paired with `button-primary-sm`.

**`tab-ghost`** — the centred-row tab pill ("AI Apps / Web Apps / Ecommerce / Marketing / Platforms").

**`icon-button-circular`** — the circular icon container (often a "?" or arrow inside).

**Nav CTAs:**

**`nav-cta-signup`** — the small black "Sign Up" button in the nav row.

**`nav-cta-login`** — the white "Log In" button in the nav.

**`nav-cta-ask-ai`** — the small "Ask AI" button with a faint border.

**`card-marketing`** — the canonical marketing feature card (3-up section cards).

**`card-marketing-large`** — the larger marketing card used for "compute model" / "AI Gateway" callouts.

**`card-soft`** — the soft-tinted card used inside cluster groups (lighter than canvas-soft).

**`template-card`** — the deploy-template card in the "Deploy your first app" grid.

**`code-editor-mockup`** — the dark code-preview surface inside marketing bands.

**`pricing-card`** — the default pricing-tier card.

**`pricing-card-featured`** — the polarity-flipped "Pro" tier card.

**`form-input`** — the canonical text input.

**`form-input-sm`** — small-height variant (32 px tall) for tight forms.

**`form-input-lg`** — large-height variant (48 px tall) for hero CTAs.

**`nav-bar`** — the sticky top nav.

**`nav-link`** — the centred link row inside `nav-bar`.

**`footer`** — the bottom 4-column nav.

**`hero-band`** — the white hero with the mesh gradient backdrop.

**`feature-mesh-band`** — the secondary section that hosts a mesh-gradient atmospheric backdrop with feature copy on top.

**`showcase-band-light`** — a soft-canvas section ("Deploy your first app in seconds").

**`showcase-band-dark`** — the polarity-flipped dark band ("A compute model for all workloads").

**`logo-strip`** — the customer-logo wrapping row near the top of the page.

**`badge-secondary`** — the small inline metadata pill ("New", "Beta", "Live").

**`banner-marketing`** — the "Introducing X" announcement pill at the top of pages.

**`link-inline`** — body-copy inline links.

> Auto-derived kit-mirror demonstration surfaces (`scripts/derive-examples-block.mjs`). Each `ex-*` entry references brand-native primitives so downstream consumers (`/preview-design`, `/generate-kit`) re-skin the same 10 surfaces consistently. `TO_FILL` markers indicate missing primitives — resolve in the LLM judgment pass.

**`ex-pricing-tier`** — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

**`ex-pricing-tier-featured`** — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

**`ex-product-selector`** — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

**`ex-cart-drawer`** — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

**`ex-app-shell-row`** — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

**`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

**`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

**`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with elevated shadow.

**`ex-empty-state-card`** — Empty-state illustration frame.

**`ex-toast`** — Toast notification surface — feature-card shape + medium shadow.