Semantic Color
Colours that always mean the same thing.
Definition
Colour assigned a fixed communicative role, such as success, warning or error.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
In plain language
Colours that always mean the same thing.
Example
Red for destructive actions and errors, used consistently and always with text or an icon.
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.
Design Token
TermA named design decision stored once and consumed everywhere.
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 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.
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.
Local chart
TERM·066 · 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.
- Use of ColorA11Y·010 · Accessibility
- Design TokensSYS·001 · Design system
- Semantic ColorFND·023 · UI foundation
Nearby in the Atlas
Adjacent territory, found through shared tags rather than a stated link.