Design Token
A named value like a colour or spacing step, defined once and used everywhere.
Definition
A named entity storing a design decision, consumed by both design tools and code.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
In plain language
A named value like a colour or spacing step, defined once and used everywhere.
Example
surface-raised rather than a hex value repeated across forty components.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Semantic Color
TermA colour token named for its role, such as danger or surface, not for its hue.
Key difference
A design token is any named design decision, including raw values like a hex code. A semantic colour is a token named for its job rather than its appearance, which is the layer that makes theming possible.
Use Design Token when
- You are talking about the mechanism: naming, storage, distribution.
- The value may be a primitive such as a raw colour or spacing step.
- The question is where a decision lives.
Use Semantic Color when
- The same role must resolve differently per theme.
- Components should never reference a raw palette value.
- The question is what a colour means, not what it is.
Local chart
TERM·071 · Region X · Grid D5
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Deeper reading
The full entry behind this definition.
- Design TokensSYS·001 · Design system
- Color SystemsFND·026 · UI foundation
- Spacing SystemsFND·042 · UI foundation
Nearby in the Atlas
Adjacent territory, found through shared tags rather than a stated link.