What are design tokens?
Design tokens are the smallest, reusable pieces of a design system—named values that represent design decisions like:
Colors: e.g.,
brand-orangeinstead of#FFA500Typography: font sizes, line heights
Spacing: padding, margins
Shadows & animation durations
They’re used in both design tools and code. When a token is updated, that change can cascade across the entire product—keeping styles consistent and easy to maintain.
Teams often store tokens in a central file or sync them with development environments, making them essential for theming, scaling, and aligning design and development.