01 · Develop
Write the code.
Local dev with hot-reload that mirrors the production runtime. No surprises between localhost and the deploy.
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.
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.
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.
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 →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.
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.
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.