Modal Design System

Modal's marketing page is what happens when a serverless-compute brand decides the right reference is not Vercel and not Linear but a console terminal painted in radioactive-lime. The upper canvas is a near-black `#231c1c` ground that reads as warm rather than neutral (a 0.234 lightness with a faint red tilt at hue 18, not the dead `#0a0a0a` most dev-infra brands reach for), and every line of text on that ground is set in a pale-green ink `#ddffdc` — the single highest-frequency color on the page at 411 occurrences, splitting 218 text against 193 border. The hero headline ("AI infrastructure that developers love") runs Goga, a sturdy proprietary grotesque with humanist quirks, at 64px / weight 500 / 64px line / neutral tracking. Below it, the only saturated filled surface on the entire page: a `#7fee64` lime pill CTA at 38px height with a corner radius of `3.35544e+07px`, the brand's float-to-pill Tailwind hack that guarantees perfect capsules regardless of height.

This DESIGN.md packages the system into a single machine-readable file following the Google Labs spec. Inside: 20 color tokens (the deep operator ground `#231c1c` and its dark-band sibling `#000000`, the pale-green ink `#ddffdc` with 411 page occurrences, the lime CTA `#7fee64` with only 20 occurrences, the dual canvas pivot `#ddffdc` pale-green band, a graded pale-green ladder from `#c8f9b6` through `#677d64` to `#4d614c` for borders and supporting text, a muted-green body color `#8cab87`, plus zinc neutrals `#a3a3a3` and `#697368` for tertiary captions), 9 typography tokens across Goga display and Inter Variable UI, 5 radii from 0px to the float-to-pill 9999px, 9 spacing tokens built around a strong 16px base, and 17 components covering the lime pill CTA, the dark hero band, the pale-green feature band, the eyebrow tag, and the global nav.

Feed the file to Claude, Cursor, or Copilot when you want a React surface that reads as Modal — black operator ground, pale-green text, a single lime conversion target, Goga at neutral tracking. The agent picks up the constraints: never escalate Goga past weight 500, never replace `#ddffdc` with a neutral white, never use `#7fee64` for anything other than the primary CTA pill. Reference the tokens directly in Tailwind config or use the spec as an audit checklist against the page. Where most serverless-compute brands signal speed with electric purple or hot blue, Modal signals it with a green that reads as oscilloscope phosphor — confidence by chromatic restraint and a single voltage point.