Skip to content

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

  1. Consistency: Ensure visual coherence across all platforms and products.
  2. Flexibility: Easily adapt to different themes or brand variations.
  3. Efficiency: Streamline the design-to-development process.
  4. 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.