---
version: alpha
name: Vercel
description: "Near-white paper, hairline rules, and one black pill of intent."
colors:
  on-surface: "#171717"
  surface: "#FAFAFA"
  outline: "#E6E6E6"
  primary: "#0070F3"
  ink-muted: "#4D4D4D"
  ink-subtle: "#8F8F8F"
  ink-faint: "#7D7D7D"
  surface-2: "#FFFFFF"
  hairline: "#EBEBEB"
  rule: "#C9C9C9"
  gutter-grey: "#A8A8A8"
  syntax-keyword: "#BD2864"
  syntax-function: "#7820BC"
  syntax-string: "#297A3A"
  diff-add: "#DAF6DA"
  diff-remove: "#FFE6E6"
  window-lights: "#EE6D5E"
  shadow-ink: "rgba(0, 0, 0, 0.08)"
typography:
  display:
    fontFamily: GeistSans
    fontSize: 64px
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: -3.84px
  heading-xl:
    fontFamily: GeistSans
    fontSize: 56px
    fontWeight: 400
    lineHeight: 56px
    letterSpacing: -3.36px
  heading-l:
    fontFamily: GeistSans
    fontSize: 48px
    fontWeight: 400
    lineHeight: 56px
    letterSpacing: -2.88px
  lockup:
    fontFamily: GeistSans
    fontSize: 34px
    fontWeight: 400
    lineHeight: 34px
    letterSpacing: -1.258px
  heading-m:
    fontFamily: GeistSans
    fontSize: 24px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: -0.96px
  question:
    fontFamily: GeistSans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: 0em
  copy-l:
    fontFamily: GeistSans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0em
  copy-m:
    fontFamily: GeistSans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  body-label:
    fontFamily: GeistSans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  caption:
    fontFamily: GeistSans
    fontSize: 13px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  badge:
    fontFamily: GeistSans
    fontSize: 11px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0.2px
  code:
    fontFamily: Geist Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  pixel-numeral:
    fontFamily: GeistSans
    fontSize: 110px
    fontWeight: 400
    lineHeight: 96px
    letterSpacing: -3.3px
rounded:
  hairline-feature-card: 2px
  icon-well-segmented-track: 4px
  progress-rail: 5px
  control-code-chip-panel: 6px
  code-panel-body-mock-window: 8px
  elevated-product-card: 12px
  framed-diagram-surface: 24px
  pill-button-badge-chip-avatar: 9999px
spacing:
  3xs: 2px
  2xs: 4px
  xs: 6px
  sm: 8px
  md: 10px
  lg: 12px
  xl: 16px
  2xl: 24px
  3xl: 32px
  4xl: 72px
  section-sm: 96px
  section-md: 120px
  section-lg: 144px
---
# Vercel — Style Reference

> Near-white paper, hairline rules, and one black pill of intent.

**Theme:** light

The system stands on a near-white ground with a pure-white plane one step above it, and the distance between those two is the entire depth budget. Colour is almost absent: ink #171717, secondary ink #4D4D4D, and the only saturated inks live inside code — magenta keywords, purple functions, green strings — plus one blue held back for the status line at the foot of the page. Display type is GeistSans at weight 450 with tracking pulled to −0.06em and line-height locked to 1.0, so headlines set as tight optical blocks; the brand trusts scale and tracking, not weight, for hierarchy. Structure is drawn with 1px lines — sometimes a border, more often a ring painted as a box-shadow — and radius carries the rest: round pills for actions, 6px for controls, 2px for the austere hairline cards. Sections breathe on 96–144px of vertical padding while elements inside them sit 6px apart, and that gap between macro air and micro density is what makes the pages read as engineering documents.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#171717` | `--color-ink` | Primary text everywhere, the fill of the filled pill action, and the ground of the one inverted product panel. |
| Ink Muted | `#4D4D4D` | `--color-ink-muted` | Nav links, 16px and 18px body copy, the de-emphasised heading state. Never a heading you want read first. |
| Ink Subtle | `#8F8F8F` | `--color-ink-subtle` | List numerals and small utility labels. Sits below body copy, never above it. |
| Ink Faint | `#7D7D7D` | `--color-ink-faint` | File-name captions above code panels and status words like "Degraded". Caption ink only. |
| Canvas | `#FAFAFA` | `--color-canvas` | The html/body ground on every page, and the recessed strip at the top of a code panel — same value, so the header reads as a notch cut back to the page. |
| Surface | `#FFFFFF` | `--color-surface` | Cards, popovers, chips, floating panels. The one plane that lifts. |
| Hairline | `#EBEBEB` | `--color-hairline` | The structural 1px: card borders, `hr` rules, and the ring shadow `rgb(235,235,235) 0 0 0 1px` that outlines buttons without a border property. |
| Border Warm | `#E6E6E6` | `--color-border-card` | The 2px-radius feature-card border and the dot-rail fill. Use it when a card must hold its own on canvas. |
| Rule | `#C9C9C9` | `--color-rule` | Tick marks on the timeline rail. Structure, not text. |
| Gutter Grey | `#A8A8A8` | `--color-gutter` | Code line numbers, and one filter-pill border. |
| Signal Blue | `#0070F3` | `--color-signal` | Footer status dot, the "All systems normal." line, and the toggle's on-state. Never a CTA. |
| Syntax Keyword | `#BD2864` | `--color-syntax-keyword` | `import`, `const`, `await` in code panels. |
| Syntax Function | `#7820BC` | `--color-syntax-function` | Function identifiers in code panels. |
| Syntax String | `#297A3A` | `--color-syntax-string` | String literals, and the ✓ prefixing CLI success lines. |
| Diff Add | `#DAF6DA` on `#1B311E` | `--color-diff-add` | The added line in an env-var diff. Fill and ink ship as a pair. |
| Diff Remove | `#FFE6E6` on `#391417` | `--color-diff-remove` | The removed line in the same diff. |
| Window Lights | `#EE6D5E` `#F3BF4A` `#5DC753` | `--color-window-*` | The three 8px dots in a mock browser chrome — hue as pure decoration. |
| Shadow Ink | `rgba(0, 0, 0, 0.08)` | `--color-shadow-ink` | The 1px ring and border on chips and panel chrome; base layer of every stacked shadow. |

## Tokens — Typography

### GeistSans — the whole interface: display headlines at 450, nav and body at 400, labels and buttons at 500 · `--font-sans`
- **Substitute:** Inter, ui-sans-serif, system-ui
- **Weights:** 400, 450, 500, 550, 600, 700
- **Sizes:** 11px, 13px, 14px, 16px, 18px, 20px, 24px, 28.8px, 34px, 48px, 56px, 64px
- **Line height:** 16px–64px — 1.0 at display sizes, 1.43–1.55 at body sizes
- **Letter spacing:** normal at 13–20px; the 11px badge alone runs positive at 0.2px; from 24px up it turns negative — −0.96px at 24px, −2.88px at 48px, −3.36px at 56px, −3.84px at 64px (a steady −0.06em at the top three sizes)
- **Role:** the whole interface: display headlines at 450, nav and body at 400, labels and buttons at 500

### Geist Mono — code, CLI strings, file paths and the footer status line · `--font-mono`
- **Substitute:** ui-monospace, SFMono-Regular, Menlo
- **Weights:** 400, 450, 500, 600
- **Sizes:** 12px, 13px, 14px
- **Line height:** 16px–20px
- **Letter spacing:** normal at every measured size
- **Role:** code, CLI strings, file paths and the footer status line

### GeistPixelSquare — oversized pixel numerals used as illustration, not as text · `--font-pixel`
- **Substitute:** Silkscreen, "Press Start 2P", monospace
- **Weights:** 400
- **Sizes:** 72px, 110px
- **Line height:** 72px at 72px; 96px at 110px — the larger numeral sets tighter than its own size
- **Letter spacing:** −1.44px at 72px, −3.3px at 110px
- **Role:** oversized pixel numerals used as illustration, not as text

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 64px | 64px | −3.84px | `--text-display` |
| Heading XL | 56px | 56px | −3.36px | `--text-heading-xl` |
| Heading L | 48px | 56px | −2.88px | `--text-heading-l` |
| Lockup | 34px | 34px | −1.258px | `--text-lockup` |
| Heading M | 24px | 32px | −0.96px | `--text-heading-m` |
| Question | 20px | 32px | normal | `--text-question` |
| Copy L | 18px | 28px | normal | `--text-copy-18` |
| Copy M | 16px | 24px | normal | `--text-copy-16` |
| Body / Label | 14px | 20px | normal | `--text-label-14` |
| Caption | 13px | 16px | normal | `--text-label-13` |
| Badge | 11px | 20px | 0.2px | `--text-badge` |
| Code | 13px | 20px | normal | `--text-code` |
| Pixel Numeral | 110px | 96px | −3.3px | `--text-pixel` |

## Tokens — Spacing & Shapes

**Base unit:** 2px   **Density:** compact inside components, comfortable between sections

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 3xs | 2px | `--spacing-3xs` |
| 2xs | 4px | `--spacing-2xs` |
| xs | 6px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 10px | `--spacing-md` |
| lg | 12px | `--spacing-lg` |
| xl | 16px | `--spacing-xl` |
| 2xl | 24px | `--spacing-2xl` |
| 3xl | 32px | `--spacing-3xl` |
| 4xl | 72px | `--spacing-4xl` |
| section-sm | 96px | `--spacing-section-sm` |
| section-md | 120px | `--spacing-section-md` |
| section-lg | 144px | `--spacing-section-lg` |

### Border Radius
| Element | Value |
|---------|-------|
| Hairline feature card | 2px |
| Icon well / segmented track | 4px |
| Progress rail | 5px |
| Control, code chip, panel | 6px |
| Code panel body, mock window | 8px |
| Elevated product card | 12px |
| Framed diagram surface | 24px |
| Pill button, badge, chip, avatar | 9999px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Ring | `rgb(235, 235, 235) 0px 0px 0px 1px` | `--shadow-ring` |
| Ring Inset | `rgb(235, 235, 235) 0px 0px 0px 1px inset` | `--shadow-ring-inset` |
| Lift | `rgba(0, 0, 0, 0.04) 0px 2px 2px 0px` | `--shadow-lift` |
| Halo | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgb(250, 250, 250) 0px 0px 0px 1px` | `--shadow-halo` |
| Material Large | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 16px -4px, rgb(250, 250, 250) 0px 0px 0px 1px` | `--shadow-material-large` |
| Material Modal | `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.02) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 8px 16px -4px, rgba(0, 0, 0, 0.06) 0px 24px 32px -8px, rgb(250, 250, 250) 0px 0px 0px 1px` | `--shadow-material-modal` |
| Avatar Ring | `rgb(255, 255, 255) 0px 0px 0px 1px` | `--shadow-avatar-ring` |

### Layout
- **Page max-width:** `not measured` — the census carries no container width; the tiles show one centered column whose edges are set by the logo and the Sign Up button.
- **Section gap:** 72px flex gap between stacked sections, over 96px, 120px or 144px of vertical section padding.
- **Card padding:** 24px and 32px on hairline feature cards; 16px on the elevated white card; 10px 12px on inline chips.
- **Element gap:** 6px is the default; 12px joins a control cluster; 24px is the grid gutter (`.grid.grid-cols-12.gap-x-6.gap-y-6`); 32px separates blocks inside a section.

## Components

### Primary Pill Button
**Role:** The one filled action on a page — deploy, get the key, get started.

Built from the control row `.outline-none.m-0.p-0.border-0` at fill #171717 / text #FFFFFF / 16px weight 500 / padding 0px 12px / radius 9999px / border none / shadow none, on all pages. Height comes from line-height and horizontal padding only, so the pill is short and wide — a lozenge, not a slab. A 14px twin runs the same fill and radius at padding 0px 12px for a product page's sub-hero.

### Secondary Pill Button
**Role:** The companion to the filled action — talk to sales, read the docs, see examples.

Same geometry as the primary — `.outline-none.m-0.p-0.border-0`, 16px weight 500, padding 0px 12px, radius 9999px — inverted to fill #FFFFFF, text #171717, no border. Its edge is the ring shadow `rgb(235, 235, 235) 0px 0px 0px 1px`, which sits outside the box model, so a hero pair aligns at identical heights with no 1px correction. On canvas the ring thickens to `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgb(250, 250, 250) 0px 0px 0px 1px`.

### Header Action Button
**Role:** The persistent top-right cluster — get a demo, log in, sign up.

The same class `.outline-none.m-0.p-0.border-0` measures a second way in the header: 14px weight 500, padding 0px 6px, **radius 6px**, fill #FFFFFF with ink #171717 and the `rgb(235, 235, 235) 0px 0px 0px 1px` ring; its filled sibling is fill #171717 / text #FFFFFF at the same 14px, 0px 6px, radius 6px, shadow none. Two radius vocabularies for one family is deliberate — 9999px belongs to the page, 6px to the chrome, and the change of shape is how the header stops competing with the hero.

### Navigation Bar
**Role:** The fixed top rail: mark, four product menus, three actions.

Links are the text row `.flex.items-center.gap-0.75.py-1.5` — GeistSans 14px weight 400, line-height 20px, ink #4D4D4D — so the nav sits a step below page ink and never reads as content. The bar is a 12px-gap flex row (`.mx-auto.flex.h-full.w-full`) with the action cluster pushed right (`.ml-auto.flex.shrink-0.items-center`). Product pages add a second rail below: mono eyebrow, then segmented tabs. No fill, no shadow — the hairline alone separates it from the page.

### Hero Block
**Role:** The first screen: one headline, one sentence, two buttons.

The home headline is a 64px GeistSans h1 at weight **400**, line-height 64px, tracking −3.84px, ink #171717, class `.my-0.text-balance.text-heading-48.@sm:text-heading-64`; product pages run the same 64px at weight 450 (`.text-heading-40.@md:text-heading-64.text-balance.text-gray-1000`). The deck below sets at 18px/28px in #4D4D4D, capped at 64ch (`.text-balance.text-gray-900.text-copy-18.max-w-[64ch]`), then the button pair. Everything else is empty canvas: left-aligned type on one half, a product artefact on the other.

### New Badge
**Role:** Marks a shipped-this-cycle item in the nav and footer sitemap.

The row `.inline-flex.shrink-0.items-center.justify-center` — span, fill none, ink #171717, 11px weight 500 at line-height 20px with +0.2px tracking, padding 2px 8px, radius 9999px, border none, shadow none — appears across all pages. It carries the only positive tracking in the type census, and its shape is implied by padding alone: no fill, no ring. Quiet enough to sit inline in a link list without pulling the eye off the label.

### Segmented Tab Control
**Role:** Switches the example shown in a code or diagram panel.

The class `.relative.inline-flex.h-8.items-center` measures twice. Active: fill #EBEBEB, text #171717, 14px weight 400, padding 4px 12px, radius 6px, border none, shadow none. Inactive: identical box — 14px/400, padding 4px 12px, radius 6px, no border, no shadow — with no fill. Selection is a flat grey block and nothing else: no underline, no weight change, no colour. On the #FAFAFA canvas, #EBEBEB is one perceptual step up, and that step is the whole indication.

### Code Panel
**Role:** Shows the three-to-six lines of TypeScript or shell that make the product's argument.

Two halves. Header `.py-0.pl-4.rounded-t-lg.border-gray-400` — fill #FAFAFA, padding 0px 16px, radius 8px 8px 0px 0px, border 1px #EBEBEB, shadow none — carries the file name at 13px/16px in #7D7D7D. Body `.border-gray-400.border-x.rounded-b-lg.[&>pre]:rounded-b-lg` — no fill, radius 0px 0px 8px 8px, border 1px #EBEBEB — holds Geist Mono 13px on a 20px line, gutter numbers at 13px in #A8A8A8 (`.vF3MAa_lineNumber`). Syntax runs four inks: #BD2864 keywords, #7820BC functions, #297A3A strings, #171717 punctuation.

### Hairline Feature Card
**Role:** A linked product tile in a grid — icon, title, one line of copy.

The class `.flex.flex-col.gap-8.rounded-xs` measures two paddings: 24px 24px on the gateway page, 32px 32px on the SDK page. Both are anchors with **no fill**, radius **2px**, border 1px #E6E6E6, shadow none, 32px internal flex gap. The 2px radius is the austerity move — it reads as a drawn rectangle rather than a card, so a grid of them stays flat against the canvas while 12px is reserved for anything that must feel like an object.

### Elevated Product Card
**Role:** A white object that must lift off the page — a panel, a spec block, a stat tile.

`.flex.flex-col.rounded-xl.relative` — fill #FFFFFF, radius 12px, border 1px #EBEBEB, shadow `rgba(0, 0, 0, 0.04) 0px 2px 2px 0px`. The most-repeated box on the sandbox page, and the one place border and shadow are both used: a 1px hairline for the edge, a 2px offset at 4% black for the lift. The blur never exceeds 2px, so the card sits about a millimetre above the paper. Mock windows and popovers swap this for the four-layer Material Large stack at the same 12px.

### Provider Chip
**Role:** A selectable model or provider in the row beneath a code panel.

`.flex.h-8.cursor-pointer.items-center` — fill #FFFFFF, padding 0px 12px, radius 9999px, border 1px #EBEBEB, shadow none, 32px tall. The overflow link in the row ("And More") keeps the geometry and drops ink to #4D4D4D at 14px weight 500; one variant raises the border to #A8A8A8. Chips set a provider mark, 6px of gap, then the label — the same 6px that separates every other inline pair here.

### FAQ Accordion Row
**Role:** A numbered, expandable question at the foot of a product page.

Two text rows compose it: the numeral `.tabular-nums.text-copy-24.text-gray-700.w-[2ch]` at 20px/32px in #8F8F8F, locked to a 2-character box so "01" and "09" align; and the question `.min-w-0.flex-1.text-label-20.text-gray-1000` at 20px/32px weight 400 in #171717. Rows separate on the 1px `hr` (`.m-0.h-px.w-full.shrink-0`) in #EBEBEB. Weight stays 400 — size alone carries the emphasis, the same bet the display type makes.

## Do's and Don'ts

### Do
- Reach for radius 9999px or 6px first — the two most-painted radii, and between them they cover every control the census measures.
- Draw edges with the ring shadow `rgb(235, 235, 235) 0px 0px 0px 1px` when controls must align optically; keep `border: 1px #EBEBEB` for boxes whose geometry is fixed.
- Set section rhythm at 96px or 120px of vertical padding with a 72px flex gap, on 12 columns with 24px gutters.
- Ground body copy at #4D4D4D 16px/24px; reserve #171717 for headings, weight-500 labels, and the filled action.
- Set anything a developer would paste in Geist Mono 13px/20px inside the 8px-radius panel.
- Track display type at −0.06em from 48px up, and leave 20px and under at normal.

### Don't
- Don't give Signal Blue #0070F3 a button. Its carriers are the status dot, the "All systems normal." line and the toggle track; every filled control the census measures is #171717 or #FFFFFF.
- Don't set display type bolder than 450. The four largest heading rows — 64px, 56px, 48px, 24px — paint 400 or 450; weight 600 appears in the heading census on two inline lockup spans, "Gateway" at 34px and "SDK" at 28.8px.
- Don't tint the canvas. Every fill in the box census is neutral: `.py-0.pl-4.rounded-t-lg.border-gray-400` at #FAFAFA, `.relative.w-fit.text-[var(--themed-fg)].max-w-full` at #FFFFFF, the "Preview" cell at #F2F2F2, the "fallback" pill at #171717.
- Don't blur a shadow to fake depth. The most-painted shadow is a 2px offset at 4% black; the deepest measured stack tops out at 32px of blur on a modal.
- Don't add a fifth colour to a code block: keywords, functions, strings, punctuation, plus the diff pairs.
- Don't mix radii inside one control — a 6px button does not get a 9999px icon well.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FAFAFA` | The page ground on all four captured pages — html, body and the full-bleed section wrappers. |
| 1 | Surface | `#FFFFFF` | Cards, chips, popovers, mock windows. The only plane that lifts. |
| 1r | Recessed | `#FAFAFA` | The code-panel header strip and the toolbar foot — canvas value re-used inside a white panel to read as a notch. |
| 2 | Muted Fill | `#F2F2F2` | The active cell of a two-up segmented control. |
| 3 | Inverse | `#171717` | The filled action, one inverted product panel, and the "fallback" marker pill. |

## Elevation

Depth is a ring first, a shadow second. The most-used elevation is barely a shadow at all: `rgb(235, 235, 235) 0px 0px 0px 1px`, a zero-blur 1px ring in the hairline colour, painted on buttons and links across all four pages. Above it sits `rgba(0, 0, 0, 0.04) 0px 2px 2px 0px` — 2px down, 2px blur, 4% black. Floating chrome stacks four layers: the 8% ring, the 2px lift, an `rgba(0, 0, 0, 0.04) 0px 8px 16px -4px` spread, then `rgb(250, 250, 250) 0px 0px 0px 1px` — a canvas-coloured ring painted *outside* the dark one, so the object carries its own halo of page colour and never touches the content behind it. Modals extend that to five layers with a 32px, 6%-black bottom spread. Stacked avatars use `rgb(255, 255, 255) 0px 0px 0px 1px` for the same reason at 1px scale.

## Imagery

No photography in the capture, and no illustration in the decorative sense. The visual half of a section is product evidence: real interfaces rendered as flat mock windows at 8px radius with an `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px` chrome ring and three 8px traffic-light dots (#EE6D5E, #F3BF4A, #5DC753) — the system's only purely ornamental hue. Customer proof is monochrome wordmarks on canvas, one evenly-spaced row, never tinted. Diagrams sit on a faint dotted field with routing drawn as thin curves between white pill labels. The single abstract image is a soft grey bloom behind a triangle of white dots on the home hero, over a `#FAFAFA → #FAFAFA` gradient layer. Decorative type is GeistPixelSquare: a 110px "0%" and a 72px "20x", used as figures rather than headlines.

## Layout

Full-bleed background, contained content. Every page runs the same fixed top rail; the three product pages add a second rail below it carrying a mono eyebrow and a segmented tab set — the main structural difference between the marketing home and the product pages. Sections stack as flex columns with a 72px gap, each with its own vertical padding: 96px on the SDK and sandbox pages, 120px on the gateway page, 144px for hero and closing bands. Grids are 12-column with 24px gutters, plus a 4-column variant for card rows. The recurring shape is a two-up split — type left at 18px/28px, product artefact right, heading spanning above. Inside a component spacing collapses hard: 6px default, 12px for a cluster, 32px between blocks, so cards stay dense on a page that is mostly empty.

## Typography Voice

Two modes, cleanly separated. Prose mode runs GeistSans 14–20px at weight 400, normal tracking, 1.43–1.55 line-heights — nav, body, questions, captions. Display mode is a different instrument: 48px, 56px and 64px at weight 450, line-height locked to exactly the font size, tracking a constant −0.06em. A half-step above regular, zero leading, heavy negative tracking — that turns a two-line headline into a solid optical rectangle whose silhouette is the design, which is why the pages need no rules or fills to feel structured. The one flourish is an inline lockup: a word at weight 600 and slightly smaller (34px "Gateway", 28.8px "SDK") inside a rounded outline, dropped into a 64px line. Everything technical goes to Geist Mono 13px/20px, and the footer status line runs mono in Signal Blue — the quietest brand gesture in the system.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FAFAFA`
- text: `#171717`
- surface: `#FFFFFF`
- border: `#EBEBEB`
- accent: `#0070F3`
- primary action: `#171717`

## Example Component Prompts
1. **Primary Pill Button**: fill #171717, text #FFFFFF, GeistSans 16px weight 500, padding 0 12px, border-radius 9999px, no border, no shadow. One per view.
2. **Secondary Pill Button**: fill #FFFFFF, text #171717, GeistSans 16px weight 500, padding 0 12px, border-radius 9999px, no border property — the edge is `box-shadow: rgb(235,235,235) 0 0 0 1px`. Sits 12px right of the primary.
3. **Code Panel**: two stacked divs. Header fill #FAFAFA, padding 0 16px, radius 8px 8px 0 0, border 1px #EBEBEB, file name Geist Mono 13px/16px #7D7D7D. Body no fill, radius 0 0 8px 8px, border 1px #EBEBEB, code Geist Mono 13px/20px — #BD2864 keywords, #7820BC functions, #297A3A strings, #171717 punctuation, gutter #A8A8A8.
4. **Hairline Feature Card**: anchor, no fill, padding 24px, border-radius 2px, border 1px #E6E6E6, no shadow, 32px flex-column gap. Title GeistSans 24px/32px weight 450 tracking −0.96px #171717; body 16px/24px #4D4D4D.
5. **Elevated Product Card**: fill #FFFFFF, border-radius 12px, border 1px #EBEBEB, `box-shadow: rgba(0,0,0,0.04) 0 2px 2px 0`, 16px padding, 8px internal gap. Label GeistSans 14px weight 500 #171717.

## Similar Brands
- **Linear** — near-white canvas, 1px ring elevation, tightly-tracked sans display; hierarchy by scale, not weight.
- **Stripe** — an equally restrained neutral system where syntax colour in a code panel is the loudest thing on the page.
- **Resend** — hairline cards on off-white, mono for anything a developer would copy, one dark filled action.
- **Raycast** — the pill-and-6px control vocabulary, dense internal gaps, product UI shown as its own illustration.
- **Railway** — flat panels with canvas-coloured halo rings, monochrome customer marks, colour saved for status.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-ink: #171717;
  --color-ink-muted: #4D4D4D;
  --color-ink-subtle: #8F8F8F;
  --color-ink-faint: #7D7D7D;
  --color-canvas: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-hairline: #EBEBEB;
  --color-border-card: #E6E6E6;
  --color-rule: #C9C9C9;
  --color-gutter: #A8A8A8;
  --color-muted-fill: #F2F2F2;
  --color-signal: #0070F3;
  --color-signal-deep: #0068D6;
  --color-syntax-keyword: #BD2864;
  --color-syntax-function: #7820BC;
  --color-syntax-string: #297A3A;
  --color-danger: #CB2A2F;
  --color-diff-add-bg: #DAF6DA;
  --color-diff-add-ink: #1B311E;
  --color-diff-remove-bg: #FFE6E6;
  --color-diff-remove-ink: #391417;
  --color-window-red: #EE6D5E;
  --color-window-amber: #F3BF4A;
  --color-window-green: #5DC753;
  --color-ink-quiet: #666666;
  --color-shadow-ink: rgba(0, 0, 0, 0.08);
  --color-shadow-ink-soft: rgba(0, 0, 0, 0.05);

  /* Typography — Families */
  --font-sans: 'GeistSans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  --font-pixel: 'GeistPixelSquare', 'Silkscreen', monospace;

  /* Typography — Scale */
  --text-display: 64px;      --leading-display: 64px;
  --text-heading-xl: 56px;   --leading-heading-xl: 56px;
  --text-heading-l: 48px;    --leading-heading-l: 56px;
  --text-lockup: 34px;       --leading-lockup: 34px;
  --text-heading-m: 24px;    --leading-heading-m: 32px;
  --text-question: 20px;     --leading-question: 32px;
  --text-copy-18: 18px;      --leading-copy-18: 28px;
  --text-copy-16: 16px;      --leading-copy-16: 24px;
  --text-label-14: 14px;     --leading-label-14: 20px;
  --text-label-13: 13px;     --leading-label-13: 16px;
  --text-badge: 11px;        --leading-badge: 20px;
  --text-code: 13px;         --leading-code: 20px;
  --text-pixel: 110px;       --leading-pixel: 96px;
  --tracking-display: -3.84px;
  --tracking-heading-xl: -3.36px;
  --tracking-heading-l: -2.88px;
  --tracking-heading-m: -0.96px;
  --tracking-badge: 0.2px;

  /* Spacing */
  --spacing-3xs: 2px;
  --spacing-2xs: 4px;
  --spacing-xs: 6px;
  --spacing-sm: 8px;
  --spacing-md: 10px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 72px;
  --spacing-section-sm: 96px;
  --spacing-section-md: 120px;
  --spacing-section-lg: 144px;

  /* Border Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-rail: 5px;
  --radius-control: 6px;
  --radius-panel: 8px;
  --radius-card: 12px;
  --radius-frame: 24px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-ring: rgb(235, 235, 235) 0px 0px 0px 1px;
  --shadow-ring-inset: rgb(235, 235, 235) 0px 0px 0px 1px inset;
  --shadow-lift: rgba(0, 0, 0, 0.04) 0px 2px 2px 0px;
  --shadow-halo: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgb(250, 250, 250) 0px 0px 0px 1px;
  --shadow-material-large: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 16px -4px, rgb(250, 250, 250) 0px 0px 0px 1px;
  --shadow-material-modal: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.02) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 8px 16px -4px, rgba(0, 0, 0, 0.06) 0px 24px 32px -8px, rgb(250, 250, 250) 0px 0px 0px 1px;
  --shadow-avatar-ring: rgb(255, 255, 255) 0px 0px 0px 1px;
}
```

### Tailwind v4
```css
@theme {
  --color-ink: #171717;
  --color-ink-muted: #4D4D4D;
  --color-ink-subtle: #8F8F8F;
  --color-ink-faint: #7D7D7D;
  --color-canvas: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-hairline: #EBEBEB;
  --color-border-card: #E6E6E6;
  --color-rule: #C9C9C9;
  --color-gutter: #A8A8A8;
  --color-muted-fill: #F2F2F2;
  --color-signal: #0070F3;
  --color-signal-deep: #0068D6;
  --color-syntax-keyword: #BD2864;
  --color-syntax-function: #7820BC;
  --color-syntax-string: #297A3A;
  --color-danger: #CB2A2F;
  --color-diff-add-bg: #DAF6DA;
  --color-diff-add-ink: #1B311E;
  --color-diff-remove-bg: #FFE6E6;
  --color-diff-remove-ink: #391417;
  --color-window-red: #EE6D5E;
  --color-window-amber: #F3BF4A;
  --color-window-green: #5DC753;
  --color-ink-quiet: #666666;

  --font-sans: 'GeistSans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  --font-pixel: 'GeistPixelSquare', 'Silkscreen', monospace;

  --text-display: 64px;
  --text-display--line-height: 64px;
  --text-display--letter-spacing: -3.84px;
  --text-heading-xl: 56px;
  --text-heading-xl--line-height: 56px;
  --text-heading-xl--letter-spacing: -3.36px;
  --text-heading-l: 48px;
  --text-heading-l--line-height: 56px;
  --text-heading-l--letter-spacing: -2.88px;
  --text-lockup: 34px;
  --text-lockup--line-height: 34px;
  --text-lockup--letter-spacing: -1.258px;
  --text-heading-m: 24px;
  --text-heading-m--line-height: 32px;
  --text-heading-m--letter-spacing: -0.96px;
  --text-question: 20px;
  --text-question--line-height: 32px;
  --text-copy-18: 18px;
  --text-copy-18--line-height: 28px;
  --text-copy-16: 16px;
  --text-copy-16--line-height: 24px;
  --text-label-14: 14px;
  --text-label-14--line-height: 20px;
  --text-label-13: 13px;
  --text-label-13--line-height: 16px;
  --text-badge: 11px;
  --text-badge--line-height: 20px;
  --text-badge--letter-spacing: 0.2px;
  --text-code: 13px;
  --text-code--line-height: 20px;
  --text-pixel: 110px;
  --text-pixel--line-height: 96px;
  --text-pixel--letter-spacing: -3.3px;

  --spacing-3xs: 2px;
  --spacing-2xs: 4px;
  --spacing-xs: 6px;
  --spacing-sm: 8px;
  --spacing-md: 10px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 72px;
  --spacing-section-sm: 96px;
  --spacing-section-md: 120px;
  --spacing-section-lg: 144px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-rail: 5px;
  --radius-control: 6px;
  --radius-panel: 8px;
  --radius-card: 12px;
  --radius-frame: 24px;
  --radius-pill: 9999px;

  --shadow-ring: rgb(235, 235, 235) 0px 0px 0px 1px;
  --shadow-lift: rgba(0, 0, 0, 0.04) 0px 2px 2px 0px;
  --shadow-halo: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgb(250, 250, 250) 0px 0px 0px 1px;
  --shadow-material-large: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgba(0, 0, 0, 0.04) 0px 8px 16px -4px, rgb(250, 250, 250) 0px 0px 0px 1px;
  --shadow-avatar-ring: rgb(255, 255, 255) 0px 0px 0px 1px;
}
```