What Are Design Tokens and Why They Matter
Define design tokens as the single source of truth for color, spacing, typography, and other design decisions.
Defining Design Tokens
Design tokens are the atomic decisions of a design system expressed as named, reusable values. Instead of hardcoding #3b82f6 in a stylesheet, you define color-primary-500: #3b82f6 and reference that name everywhere. The name carries meaning; the value can change without updating every reference.
Concrete Token Examples
Tokens span every visual property: color tokens (color-primary-500: #3b82f6), spacing tokens (spacing-4: 16px), typography tokens (font-size-lg: 18px, font-weight-bold: 700), border radius tokens (radius-md: 8px), shadow tokens, and animation duration tokens. Together they encode the complete visual language.
All lessons in this course
- What Are Design Tokens and Why They Matter
- Style Dictionary: Transforming and Generating Tokens
- Tokens in Tailwind, CSS Variables, and CSS-in-JS
- Multi-Theme and Multi-Brand Token Architecture