What a design token is
A design token is a named value that stores one design decision, such as a color, a spacing step, a font size, or a radius. Instead of hard coding the hex value blue everywhere, you reference a token like color primary and change it in one place.
- Tokens turn raw values into a shared vocabulary between design and code
- A single source of truth keeps buttons, links, and charts in sync
- Tools can export the same tokens to CSS, iOS, and Android
Token tiers
Mature systems split tokens into layers so changes stay easy.
- Primitive tokens hold raw values like blue 500 or space 4
- Semantic tokens give meaning, like color text primary maps to a primitive
- Component tokens scope to one widget, like button background
Semantic tokens are the ones product code should use, because a rename of the underlying primitive does not ripple through screens.
Token resolution
Key idea
Store every design decision as a named token in tiers so a single edit updates the whole product instead of a thousand scattered literals.