Design Tokens
Design Processes
Abstracted design properties for consistent use.
In practice
In design systems and digital platforms, design tokens are key elements such as colors, typography, and spacing defined as reusable, standardized units, ensuring consistent visual elements across various components and user interfaces, streamlining the design process and enhancing maintainability and consistency.
Questions
What is Design Tokens?
Design tokens are the named values that hold a design's decisions (colours, spacing, type sizes, radii) stored once and referenced everywhere.
Why do you use Design Tokens?
They let a visual decision change in one place and propagate everywhere, across platforms that share no code.
How do you use/apply Design Tokens?
Name them by role rather than appearance, so a token called surface-primary survives a rebrand that a token called grey-100 does not.
When do you use Design Tokens?
As soon as design values are duplicated across more than one codebase or platform.
Who uses Design Tokens?
Design system teams; consumed by designers in tooling and engineers in code.
