How to set up a design token system in CSS

· Category: HTML & CSS

Short answer

Design tokens are named values for colors, spacing, typography, and more. They act as a single source of truth across codebases and platforms.

Steps

  1. Define tokens in a central file or JSON source.
  2. Transform them into CSS custom properties, Sass variables, or platform-specific formats.
  3. Reference tokens in components instead of raw values.

Example

:root {
  --color-primary-500: #3b82f6;
  --space-md: 1rem;
  --font-body: system-ui, sans-serif;
}

.button {
  background: var(--color-primary-500);
  padding: var(--space-md);
}

Tips

  • Use Style Dictionary to generate tokens for multiple platforms.
  • Organize tokens by category and state (base, hover, disabled).
  • Document tokens in a Storybook or design system site.