Design Tokens Overview
Design tokens are the foundational elements of our design system. They are the smallest units of design decisions, representing colors, typography, spacing, and other visual properties that define the look and feel of our user interfaces.
Our Token Structure
Our design tokens are organised in a simple structure, at the very simplest level the token structure follows this hierarchy:
- Base Tokens
- Semantic Tokens
- Component Tokens
- Theme Tokens
Base Tokens
Base tokens are the most basic tokens in our system, they are used to define the building blocks of our design system.
Semantic Tokens
Semantic tokens are tokens that are used to define the meaning of a component. For example, a semantic token might be used to define the color of a button.
Component Tokens
Component tokens are tokens that are used to define the visual properties of a component. For example, a component token might be used to define the color of a button.
Theme Tokens
Theme tokens are tokens that are used to define the visual properties of a theme. For example, a theme token might be used to define the color of a theme.
What are Design Tokens?
Design tokens are named entities that store visual design attributes. They help us maintain a consistent and scalable design language across our digital products. By centralizing these values, we can easily update and propagate changes throughout our entire system.
Key Benefits of Design Tokens
- Consistency: Ensure visual coherence across all platforms and products.
- Flexibility: Easily adapt to different themes or brand variations.
- Efficiency: Streamline the design-to-development process.
- Scalability: Manage design at scale with a single source of truth.
Types of Design Tokens
We use various types of design tokens in our system:
- Border-Radius:
- Buttons:
- Colors:
- Elevation:
- Forms:
- Layout:
- Spacing:
- Typography:
How We Use Design Tokens
Our design tokens are implemented using the Token Studio plugin in Figma and are version-controlled in our GitHub repository. This allows for seamless collaboration between designers and developers, ensuring that our design language remains consistent across all touchpoints.
For more information on how to use and implement our design tokens, please refer to the following resources:
By leveraging design tokens, we create a more cohesive, maintainable, and scalable design system that empowers our team to build better user experiences.