Categories of Design Tokens
Design tokens fall into tiers: primitive tokens hold raw values, semantic tokens assign meaning by aliasing primitives, and component tokens scope decisions to specific UI parts.
Why it exists
A single flat list of tokens mixes raw values with usage decisions, so changing a theme forces edits everywhere and meaning gets lost. Categorizing tokens into tiers separates what a value is from what it means and where it applies, which is what makes large design systems maintainable and themeable.
The mental model
Picture three concentric layers. The innermost is primitives: the raw vocabulary of the system, like grey-100 through grey-900 or space-1 through space-8. The middle layer is semantic tokens: meaning assigned by aliasing a primitive, such as color-text-default or color-action-danger. The outer layer is component tokens: decisions scoped to one element, like button-bg-primary or card-padding. Each layer only references the one beneath it.
How it works
Primitives carry literal values and almost never change. Semantic tokens never hold raw values; they point at primitives and carry intent, so a theme is essentially a different set of semantic mappings. Component tokens point at semantics, letting a specific element diverge without forking the palette. Tools resolve this chain at build time into platform outputs like CSS custom properties.
When it matters
Tiering matters most for multi-theme and multi-brand products, dark mode, and cross-platform delivery. It also helps onboarding, since the layer a token lives in signals how broadly a change will ripple. Small projects can collapse layers, but the structure is what prevents chaos at scale.
A concrete example
For dark mode, you keep all primitives identical and define a second set of semantic tokens: color-bg-surface aliases grey-50 in light mode and grey-900 in dark mode. Components reference only the semantic token, so flipping the theme swaps one layer while primitives and component names stay frozen.
Interview question
What is the defining characteristic of a semantic (alias) token compared with a primitive token?
- a.It stores a raw hex or pixel value directly
- b.It can only be used inside a single component
- c.It is generated automatically by the browser
- d.It references a primitive and carries intent or meaningCorrect
Why? this is the answer
Semantic tokens alias primitives and add meaning like color-text-danger, which is what enables theming by repointing. Primitives are the ones that hold raw values; semantics deliberately avoid storing them.
Just read this? Test yourself on what you have been reading.
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on design-tokens — each one lists the topics its interview covers.
See open roles