No. 030
Design Systems
Design Token
A design token is a named value for a design decision — like a color, spacing unit, or font size — stored in one place and reused everywhere.
Why it matters
Tokens make change easy and consistency automatic. Update one token and every component using it updates too, across design and code.
In depth
Tokens abstract raw values (like a hex code) behind meaningful names, often in layers from primitive to semantic. They are the bridge that keeps design tools and codebases in sync, and they make theming — such as dark mode — far more manageable.
Real-world example
A token named color-primary set to a specific blue is referenced by every button, link, and highlight instead of hard-coding the value.
Related terms