Design tokens are the atomic values of your design system—colors, typography, spacing, and more. This guide shows how to implement and scale design tokens effectively.
What Are Design Tokens?#
Design tokens are named entities storing visual design attributes:
Loading code block...
Token Architecture#
Three-Tier Token System#
┌─────────────────────────────────────────────────────────┐
│ SEMANTIC TOKENS (Component-level) │
│ button-primary-background → color-brand-500 │
│ card-shadow → shadow-md │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ ALIAS TOKENS (Theme-level) │
│ color-brand-500 → color-blue-500 │
│ color-text-primary → color-gray-900 │
└─────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────┐
│ PRIMITIVE TOKENS (Raw values) │
│ color-blue-500 → #3b82f6 │
│ spacing-4 → 16px │
└─────────────────────────────────────────────────────────┘
Token File Structure#
tokens/
├── primitives/
│ ├── colors.json
│ ├── typography.json
│ ├── spacing.json
│ └── shadows.json
├── semantic/
│ ├── light.json
│ └── dark.json
├── components/
│ ├── button.json
│ ├── input.json
│ └── card.json
└── index.js
Defining Tokens#
Color Tokens#
Loading code block...
Semantic Tokens with References#
Loading code block...
Loading code block...
Typography Tokens#
Loading code block...
Component Tokens#
Loading code block...
Transforming Tokens#
Using Style Dictionary#
Loading code block...
Generated CSS Output#
Loading code block...
Integration with Tailwind#
Extending Tailwind Config#
Loading code block...
Using in Components#
Loading code block...
Theme Switching#
CSS Variables Approach#
Loading code block...
System Preference Detection#
Loading code block...
Syncing with Figma#
Tokens Studio Plugin#
Loading code block...
Automated Sync Workflow#
Loading code block...
Best Practices#
1. Naming Conventions#
Loading code block...
2. Documentation#
Loading code block...
3. Versioning#
Loading code block...
Testing Tokens#
Loading code block...
Conclusion#
Design tokens bridge the gap between design and development. Start with primitives, build semantic layers, and use tools like Style Dictionary to transform tokens for each platform. Consistent tokens enable scalable design systems that maintain visual coherence across products.