Components and Design Tokens
LunchLoop now has three slightly different Change buttons, one on each screen, with three oranges and three corner radii, because three designers drew them at different times. When the orange is darkened to pass contrast, someone has to hunt down every copy by hand, and one will be missed. Components and design tokens exist so that a decision is made once and followed everywhere.
The rule
Name each decision once as a token; build each piece once as a component.
A design token is a named value for a design decision: a colour, a spacing step, a type size, a corner radius, a shadow. Design files and code refer to the name, never the raw value. Tokens usually come in two layers:
- Base tokens hold the raw palette:
orange-700 = #C4501F. - Semantic tokens say what a value is for:
color-action-primary = orange-700. Change what the semantic token points to, and every button that uses it follows.
On the web, tokens often become CSS custom properties:
:root {
--color-action-primary: #c4501f;
--color-text-muted: #5f6368;
--space-2: 8px;
--space-4: 16px;
--radius-md: 8px;
}A component is a reusable piece of interface with a defined anatomy (its parts), variants (primary or secondary, medium or large) and states (default, pressed, focused, disabled, loading). Components are built from tokens: LunchLoop's Button uses color-action-primary, radius-md and space-4, never a hand-typed hex code.
The payoff: consistency without policing, faster design and build, one place to fix things, and a shared vocabulary, because designers and developers use the same names.
The shortcut
Before drawing anything, ask: "Is this a new decision, or an old decision in a new place?" An old decision reuses its token or component. A genuinely new one is added once, named for its purpose, not its appearance.
Audit
Three buttons, three oranges (#EB6A2C, #E4572E and #C4501F) and three radii (6, 8 and 10 px).
Not everything needs to be a component. Something that appears once and is unlikely to repeat can simply be drawn. The trigger is repetition: the second or third time a pattern shows up, turn it into a component before the copies start to drift apart.
Drills
Answer fast — trust the rule.
What is a design token?
Which is the best name for the token behind the main button colour?
What should LunchLoop's Button component define?
Why does it help that designers and developers use the same token names?
Remember
- Name each decision once as a token; build each piece once as a component.
- Shortcut: new decision or old decision in a new place? Reuse whenever you can.
- Trap: tokens named for how things look (
orange-button) instead of what they are for.