Design tokens that survive a redesign
Naming tokens by role instead of value, and why dark mode should be a pure token swap.
Name by role
A token called --violet breaks the day the brand turns green. A token called --eyebrow survives.
:root { --color-primary: #524ae9; --eyebrow: var(--color-primary); }
html.dark { --eyebrow: #9f9f9f; }Need a hand?
Let’s build it together
Dark mode as a swap
If components only read semantic tokens, dark mode needs no component changes at all.