A design token named for its purpose rather than its raw value — for example 'color-text-error' instead of 'red-500'. Because it describes a role, it can point to different raw colors in different themes while the meaning stays the same.
Synonyms
- alias token
- semantic design token
Related terms
In plain words
- a token named for its job, like 'error color', not the actual red
- a purpose-based nickname for a design value
Usage example
Using the semantic token 'surface-background' meant dark mode automatically supplied a dark value instead of white.
Don't confuse with…
- primitive tokenA primitive token holds a raw value like a specific hex color; a semantic token points at a primitive but is named for how it's used.
Categories
- Design systems