Reference fixture · Vercel

# Build, preview, and ship without rebuilding the platform underneath.

A token block distilled from Vercel's published design system — Geist Sans with -0.05em display tracking, shadow- as-border throughout, blue reserved for the chromatic moments. The fixture you are reading paints from the same `:root` block agents inline into every Vercel artifact.

View tokens
Read the spec See the pipeline

v0.1 · stable Press `⌘` `K` to search tokens.

The Vercel workflow

## Three steps, one platform.

DESIGN.md gives each stage its own workflow accent (Develop Blue, Preview Pink, Ship Red). Those colors are deliberately deferred here — they are pipeline labels, not brand accents, and would each promote in as a C-extension rather than ride on the shared accent slot.

01 · Develop

Write the code.

Local dev with hot-reload that mirrors the production runtime. No surprises between localhost and the deploy.

→

02 · Preview

Share the branch.

Every push gets a preview URL. Stakeholders review against the same runtime that will serve production.

→

03 · Ship

Promote, atomically.

One click promotes the previewed build. Rollback is the same one click in reverse.

10×
faster cold starts at the edge
≤2
accent uses per screen (lint enforced)
56
tokens declared in this :root

What this fixture exercises

## Every component below pulls from `var(--*)` — no raw hex, no off-token type.

Surface

### Achromatic canvas, one accent.

Pure white for the page, pure white for cards, no warm tier. The whole system stays achromatic until the accent moment — links, focus rings, badge tints.

Inspect tokens →
Shadows

### Edges live in the shadow layer.

`box-shadow: 0 0 0 1px rgba(0,0,0,.08)` replaces traditional borders throughout. Cards layer four shadows — ring, close, far, and inner glow — into a single elevation.

Read the rule →
Type

### Geist runs tight.

Display tracking is `-0.05em` — the most aggressive negative tracking of any major design system. Three weights only: 400 reads, 500 interacts, 600 announces.

Inspect typography →

Form components

## Inputs inherit the same tokens.

Focus rings, edges, placeholder color — all derive from `--accent` and `--border`. The submit button reuses `.btn-primary` unchanged — black fill, white label, 6px radius.

No new token is introduced for this section. The form card uses `--elev-raised` directly so the input shadow-borders read as recessed beneath the form's outer ring.

Full reference at tokens.css · spec at DESIGN.md.

Get the spec

Open
Work email

We'll send the spec PDF and nothing else.