A design system is a position, not a parts bin. Below are the four arguments this one is willing to make in public. Each essay is short, opinionated, and cites real numbers from our migration. Disagree freely — but if you adopt these tokens, you adopt this argument.
- 01
Tokens, not values
A design system is a vocabulary, not a paint kit. Every spacing, radius, shadow, color, and z-index sits behind a named token — and the moment a literal value shows up in source, the system has lost. The Week-1 audit found 1,016 unique CSS vars across 6 token files and a 3-way collision on --radius-md (8 / 16 / 12). This essay argues that the cost of naming is always cheaper than the cost of cascade-order roulette.
- 02
Hub-tinted identity
One global brand color is the wrong unit of identity for a B2B site with multiple technical audiences. Compliance readers, ops readers, and AI researchers need to know which surface they are on at a glance. We push identity down one level — every blog hub gets its own accent — and let the system handle the propagation through --hub-accent and friends. Adding a new hub becomes one entry in taxonomy.ts.
- 03
Reading surface vs cockpit
There are two visual modes in this system, and they are not the same job. A reading surface (long-form article body) is dark, single-column, whitespace-rich, and optimized for sustained attention. A cockpit (dashboard, admin, marketing landing) is denser, multi-region, motion-rich, and hub-tinted. Most design systems fail because they force one mode on every context. We refuse to.
- 04
Motion that earns its keep
Motion is a load-bearing element. It conveys hierarchy (z-elevation), causality (button → modal), and continuity (page transitions). When a transition does none of those things, it should be removed. The Week-5 data-motion contract makes the reduced-motion default real: prefers-reduced-motion globally rewires durations to 0, and any decorative animation either keeps working without motion or is opt-in.