Foundations
The decisions a system
has to lock first.
A design system is a set of constraints, not a component library. Lock these before you build a Button, and the Button writes itself.
Bootstrapping? Start with color and spacing. Inheriting? Start with accessibility and naming.
01 · How the system looks
The layer people argue about in review.
The visible layer. Color, type, and shape decisions that show up on every screen. Get these calibrated and the rest of the system has a register to compose against.
02 · How the system spaces, moves, and structures itself
The invisible rules that make it compose.
Spacing rhythm, layout grids, motion budget, and easing curves — the rules that make a hundred screens feel like the work of one designer instead of fifteen.
03 · How the system gets used
The operating manual, written down.
Principles people argue from, accessibility constraints they design against, language they write inside, and naming patterns that keep the token catalog from becoming a guessing game.
Foundations are decisions. Tokens are the artifact.
Once these are locked, the token generator turns them into a portable file — scales, ramps, radii and shadows, exported to Tokens Studio, Tailwind, CSS variables or Style Dictionary.