Design Tokens with Style Dictionary
Define colour, spacing, and typography tokens in JSON, transform them with Style Dictionary into CSS variables, JS constants, or iOS/Android formats.
What Are Design Tokens?
Design tokens are the named, primitive values of a design system: colours, spacing, font sizes, border radii, shadows. They're the source of truth — every component derives styles from them.
Why Tokens Matter
Tokens decouple design decisions from implementation. Change color.primary from blue to green once, and every component using it updates. They also let you ship the same design to web, iOS, and Android.
All lessons in this course
- Storybook: Stories Controls and Docs
- Design Tokens with Style Dictionary
- Versioning and Publishing to npm
- Consuming a Design System