The Case for Design Tokens Over Hardcoded Styles

This site's own dark/light theme toggle only took an afternoon to build — because every color was already a CSS variable, not a hardcoded value scattered across components.

Three tiers of tokens

1. Primitive tokens — raw values, e.g. --blue-500
2. Semantic tokens — intent, e.g. --color-text-accent
3. Component tokens — scoped overrides for one component

Components should only ever reference semantic or component tokens — never primitives directly. That indirection is what makes theming (or rebranding) a config change instead of a rewrite.