Design Tokens Explained

What are design tokens, how do they work, and why use them? Guide to design tokens for developers and designers.

What Are Design Tokens?

Design tokens are named values that represent design decisions. Instead of hardcoding colors like `#10b981`, you use a token like `--primary` or `primary`. Tokens abstract design values from implementation, making it easier to maintain consistency and update designs across platforms.

Common token categories include colors (primary, secondary, background), typography (font families, sizes, line heights), spacing (margins, padding), shadows, and border radius. Tokens can be exported to CSS variables, Tailwind config, JSON, iOS, Android, or other formats.

How Do They Work?

Tokens are defined once and referenced everywhere. In CSS, you use `var(--primary)` instead of `#10b981`. In Tailwind, you use `bg-primary` instead of `bg-[#10b981]`. When you update the token value, all references update automatically.

Tokens can be organized hierarchically. For example, `--color-primary` and `--color-secondary` group related tokens. Some systems use namespaces like `--chromui-primary` to avoid conflicts with other design systems.

Why Use Design Tokens?

Consistency: Tokens ensure the same values are used across all platforms and components. No more mismatched colors or spacing between web, iOS, and Android.

Maintainability: Update a token value once, and it updates everywhere. No need to search and replace hardcoded values across codebases.

Collaboration: Designers and developers share the same token definitions. Design tools (Figma, Sketch) can import tokens, and code can export tokens back to design tools.

/* Without tokens */
.button {
  background: #10b981;
  color: #ffffff;
  padding: 12px 24px;
}

/* With tokens */
.button {
  background: var(--primary);
  color: var(--primary-foreground);
  padding: var(--spacing-3) var(--spacing-6);
}