HTML & CSS · Senior · Question 71 of 75
Why split design tokens into primitive and semantic layers?
--blue-600: oklch(0.55 0.2 260); /* primitive */
--color-action: var(--blue-600); /* semantic */- ✓Correct answer: Components use meaning-based tokens, so themes and rebrands change the mapping, not every component
- 2Primitive tokens are faster to render
- 3Browsers require two levels of variables
Explanation
Dark mode or a new brand only remaps --color-action. Components referencing --blue-600 directly would all need edits.