Typeform Design System

Typeform's marketing canvas opens on a full-bleed Eggplant band (`#2a222b`) — not black, not navy, a warm near-black brown — with a Tobias serif h1 ("Build forms at the drop of a prompt") set at 80px / weight 400 / -1px tracking. A single rounded-rectangle product mockup sits below the headline against the same Eggplant floor, its prompt input field rendered as a soft lavender pill on the dark ground. Below the fold the page flips to an off-white floor (`#faf9fb`) where every other section runs: h2 at 48px in Twklausanne 350, eyebrow caps in `#9454ab` Get-Real Purple, and a 24px-radius gradient panel carrying each product proof point. Where most AI form builders crowd their hero with a saturated mesh gradient or an animated demo, Typeform places one Tobias headline, one Eggplant pill CTA, and one product still-life on a flat dark band.

This DESIGN.md packages the spec into one machine-readable file. Inside: 23 color tokens grouped into the Eggplant ink ladder, an off-white-to-white surface scale, two purple accents (Get-Real `#a25fba` for the brand voltage and Highlight `#9454ab` for eyebrow text), plus narrow yellow, green, and red token rows pulled from the `_colour-primitives` namespace; 11 typography tokens running Tobias serif from 80px hero h1 down to 64px h2 alt, and Twklausanne (350/400/500/600 weights) from 48px section h2 down to 12px paragraph-xxs; 5 corner radii anchored on 12px (buttons) and 24px (cards), with a 5rem xl tier reserved for the gradient hero panel; 9 spacing tokens stepping on a 4px grid up to 120px section padding; and 17 components covering the Eggplant primary pill, the white outlined secondary, the Tobias hero heading, the gradient feature panel, the integration tile row, the stat block, and the off-white footer. Format follows the Google Labs DESIGN.md spec.

Feed the file to Claude, Cursor, or Copilot and the agent will reproduce Typeform's discipline — Eggplant over off-white, Tobias confined to the hero h1, TWK Lausanne everywhere else, purple held back from the primary CTA — instead of a generic shadcn theme. Reference the tokens directly inside Tailwind config, CSS variables, or your own component library. The discipline worth studying is the two-radius rule: a 12px pill on every button and a 24px corner on every card or gradient panel, with nothing in between. That binary geometry is what lets a dense AI form-builder page read as a marketing site rather than a product dashboard.