CSS Custom Properties as a Design Token System

Tokens, not magic numbers

Every colour, spacing step, duration, and easing curve lives in :root as a custom property. When a component references --color-gold rather than #C8A97E, the meaning is self-documenting and the value is changeable in one place.

Layering specificity intentionally

The cascade is not your enemy — undisciplined specificity is. A flat class system (no nesting beyond one level of BEM modifier) keeps overrides predictable. The browser devtools become readable again.

Responsive type without a library

clamp() does the work of a full responsive type scale in a single expression. --text-display: clamp(2.5rem, 6vw, 4rem) scales smoothly between viewport extremes with no media query breakpoints needed.