Foundations

Design Tokens

Our visual design is based on consistent palettes of typography, spacing units, color, and other discrete elements of style we call design tokens.

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.

Illustration showing the cycle of a token. A color tile expands into values and tokens, which expands into color tokens for Figma, Code & Production.

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.

Example of how color tokens can be used together using the .on-error-container text color on a container using .error-container.

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.

There are multiple sections of a token name spaced by periods. The first section is 'color', the second is 'light', and the third is 'primary'.
  1. Attribute - The type of foundational style, such as color, elevation, or space.
  2. Theme - Indicates light or dark mode. Not all tokens have a theme.
  3. 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.

 

The card group component uses several different color tokens, displayed in this illustration.

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.

 

An image of a form component, highlighting the spacing between each form item to show how the spacing tokens can be used.

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.

 

The popover component displays on the page with an elevation of 4.