Structuring color tokens for a new app
WHAT IT TESTS: tiered color-token architecture and why layering matters. OUTLINE: primitive palette, semantic role tokens, optional component tokens, theming benefit. RED FLAG: a flat list of named colors with no semantic layer, blocking theming and dark mode.
WHAT IT TESTS: whether you can design a layered color-token system rather than a flat palette. ANSWER OUTLINE: use tiers, primitive tokens hold the raw palette (blue-500, gray-100), semantic tokens express role and intent (color-text-primary, color-bg-surface, color-action-primary, plus state colors like success and error), and optional component tokens map to semantics; the separation lets you retheme, add dark mode, and rebrand by remapping semantic to primitive without touching components.
Read the original → interview
- #design-tokens
- #color
- #semantic-tokens
- #theming
- #architecture
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.