ui-theme

A design-token system uses CSS custom properties to expose semantic tokens for colors, spacing, and typography, ensuring consistent theming across an application. You create a tokens.css file to define these variables as a single source of truth.

Dark-mode overrides are handled via [data-theme] attributes that switch between light and dark palettes. This approach swaps token values at the root level, meaning component code requires no changes to support dark-mode.

You prevent hard-coded values by applying token auditing policies that enforce semantic naming and token categorization. The system provides documented code patterns and usage guidelines to maintain a single source of truth.

Yes, this approach is designed for implementing a design system across large products. It establishes a single source of truth for semantic color, spacing, and typography tokens, enabling rapid theming and accessibility improvements at scale.

Semantic naming for CSS design tokens involves categorizing variables by their function rather than their visual value, such as using --color-primary or --spacing-md. This ensures tokens remain meaningful and maintainable across different themes.

You need to audit your CSS variables when hard-coded values appear in your stylesheets or when scaling a UI design system. Token auditing checks for semantic naming compliance and proper token scope to ensure consistent theming.