Design Tokens
Design tokens are visual atoms that represent style values ranging from colors, size, spacing, and radius to be used across platforms to create consistency and cohesion.
Design System Tokens
Design tokens represent design decisions that work cohesively together to build the design system. When using the design system within your product, tokens can ensure that you are using the decisions made by the design system and allow you to maintain visual unity. Design tokens implemented across the enterprise ensure consistent visual identity across platforms reinforcing trust and visual appeal.
Design System Tokens Architechture
Why Are Tokens Important?
Tokens act as a single source of truth. Utilizing a token library within the design system allows style updates to propagate throughout the system, product, and enterprise. Over time, implementation of tokens will become more and more robust, allowing our product users to have system-wide updates with the click of a button.
For example, with color tokens, we use these tokens in place of hard coded HEX values. If any of our colors were to change, even slightly, updating the token HEX code would allow that change to be seen system-wide. This increases product scalability at a faster rate.
Using Tokens
When should you use design tokens?
- When updating your product’s design or building a new product within design system’s visual style
- For ease of maintenance and updating styles in the future
- Consistency across product and channels
- If you are not implementing the design system across your product
Definitions
| Terminology | Definition |
|---|---|
| Design Tokens | The single source of truth to name and store a design decision, distributed so teams can use it across design tools and coding languages. |
| Primitives | Primitives are the smallest building blocks of a set of design tokens. |
| Modes | Within our design system we support two modes Light Mode and Dark Mode. |
| States | Within our design system tokens we refer to state tokens which include all design decisions for surface and content for Default, Hover, Pressed, Success, Critical and Disabled. |
| Status | Within our design system tokens we refer to state tokens witch include all design decisions for surface and content for Information, Success, Caution, Critical and Neutral. |
| Surface | Refers to any container that has our design system colors set as background. When these tokens are leveraged any on-surface token content will automatically have accessibility considerations |
| On-Surface | This is a generic category that include things like text and graphic. When these tokens are paired with their surface will atomically be accessible and work with both light and dark modes. |
Resources
Updates
| Version | Change Date | Link |
|---|---|---|
| v7.0 | August 21st, 2024 | v7.0 Release notes |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.