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.
Inheriting? Start with accessibility and naming.
The layer people argue about in review.
How the system looks
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.
The invisible rules that make it compose.
How the system spaces, moves, and structures itself
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.
The operating manual, written down.
How the system gets used
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.