Tokens, not colors

A design token is a named variable that stores a design decision. Instead of writing the hex color #0a0a0e everywhere in your code, you write --color-surface-primary. Instead of hardcoding 16px as a padding value, you write --spacing-md. The difference seems small until you need to change something — and then it becomes enormous. Tokens turn a full-day find-and-replace into a one-line change.

Tokens work in two layers. Primitive tokens define the raw values: every color in the brand palette, every spacing step, every border radius. Semantic tokens reference primitives and give them meaning in context. --color-surface-primary doesn't describe a color — it describes a role. When you switch from light to dark mode, you don't touch the components. You change what --color-surface-primary resolves to. The components stay identical.

This model maps directly onto how Figma Variables work. Primitive tokens become the base palette in Figma. Semantic tokens become the mode-switching variables. When a designer creates a dark mode, they create a second mapping of semantic tokens to primitives — not a second set of components. The handoff from design to code becomes a structured exercise, not a guessing game. Developers always know exactly which token to use for a given element.

The compounding benefit shows up over time. We've shipped complete dark mode implementations in a single day on projects where every component was already using semantic tokens. We've seen brand color updates take 20 minutes instead of two days. The investment in a token system pays back on the first significant change — and every change after that.