Design Tokens

Introduction to Design Tokens

A design token is the tiniest constructive element required to create a design system. It has a meaningful name that represents visual attributes such as color, typography, spacing, effects, and so on. Design tokens hold hard-coded values. When used instead of static values throughout the entire product, they become an instrument that allows you to implement a scalable and consistent visual language synced across all design system files.

Tokens are the single source of truth, a collection of design decisions that propagate throughout the entire system, product, or group of products. They are the vocabulary of a language that helps designers and engineers collaborate and make the connection between design files and implemented code. Design tokens are an integral part of any design system because they make the transformation of a design into a product easier for both designers and developers.

Each design token represents a named collection of properties that store specific values for the visual design. A design token can store any of the following elements:

• A single value—For example, the $primary design token can store the #FF6358 value.
• A collection of indivisible values—For example, the $Header 1 design token can store the values for multiple properties that define specific typography.

Benefits of Using Design Tokens

You can use design tokens to represent anything in the visual design such as colors, typography, effects, and more. They allow you to scale changes—you can change the value of the $primary design token from #FF6358 to #28B4C8, and all components that have the $primary color will be affected. If you use local values instead of design tokens, such changes will be extremely time-consuming.

With design tokens, you achieve:

• Consistency—Brand principles are more accessible and easier to use.
• One design language—Improve the collaboration efficiency between the teams by using a single design language.
• Easy maintenance—You can edit and update all design system files from a single place.
• Synchronization—All files are in sync because you have a single source of truth.
• Reusability—The reusability of the design tokens allows you to improve the consistency within a product or between multiple products.