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.