Vercel Inspired Design System

Vercel's design language is the dashboard marketing surface for a developer platform, written for engineers who already know the syntax. The page operates with one of the strictest stark systems on the web: a near-white #fafafa body, ink-near-black #171717 for type, and a 200-step gray scale where every divider, border, and disabled state lives on its own deliberate step. There is no brand-blue or marketing accent — the ink IS the brand. Conversion targets, dark bands, code mockups, and primary CTAs all share the same #171717 tone, polarity-flipped onto white when a section needs depth.

This DESIGN.md packages the system into a single machine-readable file. Inside: 40 color tokens (including the three-pair Develop / Preview / Ship gradient stack), 15 typography styles across Geist and Geist Mono, 9 corner radii (from 0px to 9999px, with the 100px pill as the marketing-CTA signature), 12 spacing values stepping from 4px to a 192px section gap, and 40+ components from `nav-bar` to `pricing-card-featured` to the polarity-flipped `showcase-band-dark`. The format follows the Google Labs DESIGN.md spec — colors, typography, rounded, spacing, components, all token-referenced.

Feed the file to Claude, Cursor, or Copilot when you need a React component that reads as Vercel rather than as a generic shadcn theme. The agent picks up the discipline — 100px pill CTAs, sentence-case headlines with -2.4px tracking, mono eyebrows above geometric-sans body, stacked shadows instead of heavy drops. Reference the tokens directly in Tailwind config, or use the spec as an audit checklist. The system is worth studying because of what it refuses: no second accent color, no display weight above 600, no gradient miniaturization. Restraint is the product.