Design System Glossary

Theming

Theming is the practice of letting a single design system render in multiple visual modes — light and dark, brand variants, customer-specific white-label — without forking the underlying components. It's almost entirely an exercise in token architecture.

The pattern that works: components consume only semantic tokens (color-surface, color-text-primary); themes are different sets of reference tokens those semantics resolve to. Swap the theme, and every component repaints with no code change. CSS custom properties make this trivial in browsers; Tokens Studio and Style Dictionary handle the build for native platforms. The hardest part isn't engineering — it's discipline. The first time a component hard-codes a colour, theming is broken.