Button & Card components updated
Radius and spacing tokens now drive both. Change one number, two components agree.
Interactive demo · token architecture
What a design token actually does.
Tokens live in a single source of truth. Semantic tokens reference primitives, not raw values, and names describe intent, not value. That's abstract until you move one. Change a decision below and watch it propagate through every component at once.
The playground
One change, everywhere at once
Drag a knob, change the whole card. That’s the leverage a real system gives a team — every component pulls from the same vocabulary.
drag the knobs
A design token, made visible.
One source of truth, many components in sync. Move a slider — the card on the right reacts. That’s a design system in miniature.
Primary color
Density
No JavaScript per component. Just CSS variables.
preview
1 token
7 elements
0 overrides
Try setting radius to 0 for a brutalist feel, or 28+ for friendly & rounded.
The trick, explained
Intent in the middle, value at the edge
The brand picker above changes exactly one value: the primitive. Every component updates because they
reference intent (action-primary) and intent references
the primitive. That indirection is the entire trick.
It's why a rebrand becomes an afternoon instead of a quarter, why a dark mode is a remap instead of a rewrite, and why no component ever redefines a value instead of referencing it. When the mode toggle flips this demo to ink, the components don't change — the semantic layer re-points to different primitives underneath them.
It's also why the audit checks token names as carefully as token values. A token called
color.blue can never survive the day the brand stops
being blue. A token called color.action.primary can.
Curious how yours measures up?
Token architecture is one of five audit dimensions. The free scorecard has six questions on exactly this. Ten minutes, and you'll know whether your tokens are load-bearing or decorative.