Design System
A Drift-Proof Design System
A three-tier token and type architecture authored once in globals.css — the class-merger, the docs, and the component layer all derive from that one file, so a value can never live in two places and silently drift.
- Design Systems
- Frontend
- Conceptual Direction
- Figma
- Visual Design
- CSS
- Tailwind
- Component Libraries
- Developer Tooling
Overview
The brief was a set of brand boards designed in Figma — Colors, Fonts, Pressables. The risk in turning brand boards into a real system is drift: the moment a value lives in two places — the CSS and a docs table, the design and the code — they fall out of sync within days. This build proved it directly: the generated layers stayed perfect across a run of merges while every hand-maintained prose copy went stale.
So the whole system is built around one contract: each fact has exactly one hand-written home, and everything else is generated from it or derives it. Colour and type values live in globals.css, named for the job they do rather than the hue they happen to be. The class-merger derives its role list from the same generated catalog. The docs name jobs, not values.
On top of that foundation sits a small cva component layer where the colour token is global and the variant name is just the component's emphasis tier — and a mechanism/policy split that lets genuinely unique controls compose freely without polluting the system with one-member variants.