What are tokens?
Design tokens store all the values needed to construct and maintain a design system.
Examples: Color, type, opacity, shadows, corner radius.
On the top right, a hex code value represents color. By turning it into a token called “flight-60,” it becomes integrated in the design system.
Why use tokens?
Faster hand-off process
If designers and developers both change to this system of tools that speak to each other, there is greater alignment.
Scale with less doubt
Issues that come up can be handled by the design system’s team, technology, and established practices.
Saves time with reuseable work
Tokens help standardize decisions across a design system, allowing for flexibility and standardized decisions across design and development.
More engineering time
Reduced iterations from design QA means engineers can spend less time perfecting UI and work on other things.
Faster product changes
Tokens reduce UI development work among engineers. They just need to approve it on Storybook.
Higher quality UI/UX
A designer’s work can be directly implemented at the quality they want without them having to learn code.
Consistency between design and development
Tokens ensure consistency as designs are modified, including updates to color modes, themes, densities and dimensions.
Token types
Base tokens
Base tokens are the lowest building blocks of the design system, and are inherited by all other token types.
In this case, the base token is called “flight-60” and contains the hex code “#009AD7” to represent color.
Alias tokens
Alias tokens communicate the purpose. In this case, the alias token “interactive/primary/background/default” communicates the purpose of how the teal can be used.
The same base token (ex. flight-60) can have multiple alias tokens as instances to communicate different use cases.
