Introduction
Design tokens are the fundamental building blocks of a design system. They represent the atomic elements of a design, such as colors, typography, spacing, and more. Design tokens allow for a more scalable, consistent, and manageable approach to designing digital products.
What are Design Tokens?
Design tokens are abstracted values that store visual design attributes. They help maintain consistency across different platforms and devices. For example, a color token might be defined once and used in multiple places, ensuring uniformity.
Benefits of Using Design Tokens
- Consistency: Ensures visual and thematic consistency across the website.
- Scalability: Makes it easier to scale the design by changing values in a single place.
- Maintainability: Simplifies the process of updating the design system.
- Platform Independence: Facilitates sharing a common design language across various platforms and technologies.
How to Read Design Token Names
Knowing how to read token names will help you find the right token faster when working in designs and in code.
- Attribute - The type of foundational style, such as color, elevation, or space.
- Theme - Indicates light or dark mode. Not all tokens have a theme.
- Role - Additional details about the token’s purpose.
Design Tokens Examples
Use these examples to get a better understanding of how different tokens work.
Color Tokens
- Define all the colors used across the website.
- Include primary, secondary, tertiary and error colors, along with neutral shades for text, backgrounds, borders, etc.
- A few extended palettes are also included: success, warning, focus, etc.
Learn more about our Color Guidelines.
Example of color design tokens in use
Spacing Tokens
- Define a consistent spacing scale for margins, paddings, gaps, etc.
- Helps in creating a harmonious and balanced layout.
Learn more about Spacing Tokens.
Typography Tokens
- Define font families, sizes, weights, line heights, and other typographic details.
- Ensure text is legible and accessible across all devices.
Learn more in our Typography Guidelines.
Elevation Tokens
- Define shadow styles for different UI elements like modals, pop-overs, etc.
- Helps in creating depth and focus in the interface.
Learn more in our Elevation Guidelines.