What are design tokens?

Design tokens are platform-agnostic variables that represent the look and feel of your brand and product. They constitute the atomic building blocks of your design system and can be used to define colors, text styles, spacing, and other property types. They provide the foundation for theming and design process automation.

We can define design tokens as named entities that store visual attributes and are platform-agnostic. What does that mean?

• Named entities. Tokens consist of a name and a value.
• Store visual attributes. Tokens represent visual attributes such as color, spacing, line height, elevation, and animation time.
• Platform-agnostic. Tokens are an abstraction layer on top of platform-specific variables. They create a common language for design properties independent of the implementation framework.