Demand Designer: A Design System Generated From One File

Snapshot

• 143 — CSS custom properties generated from a single token file

• 67 — pages of specification, rebuilt by script on every change

• 22 — button states, every one measured above 4.5:1

The challenge

A studio that sells design consistency cannot hand out inconsistent work. Colour was drifting between the site, the decks and the ad creative, and every new asset restarted the same argument about which orange, which grey, which spacing step. The brand needed one place where a value is decided, and everything else needed to follow from it.

What I did

Build the system as a pipeline rather than a document. tokens.json is the only file anyone edits. A build step turns it into brand.css, a 67-page PDF guide and a matching Figma variable library, so the three cannot disagree.

The work

Foundation. Ink, Paper and Signal as the three brand colours on a 70 / 25 / 5 usage ratio, a 12-step neutral ramp and a 6-stop Signal ramp. In v1.4 Signal moved to #F4450C: the same OKLCh hue at 35.3 degrees, the same perceptual lightness, chroma up 15.5%, and the whole ramp hue-locked, which the previous one was not.

Type and layout. Inter across six weights, a 12-step scale carrying a desktop and a mobile size for every token, a 15-step 4pt spacing scale, five breakpoints, a 12 / 8 / 4 column grid and a measure capped at 680px.

Depth and surface. A four-layer elevation ramp, five grained grounds, five button variants including a glass tier that is legal only over imagery, and 79 texture files covering 22 motifs at four social ratios.

Voice. Thirteen pages covering two registers, seven dials and 22 formats, shipped as an installable skill file so the writing rules travel with the visual ones.

Stack: tokens.json, Python build scripts, CSS custom properties, Figma variables, Inter