Design Tokens: a single source of truth
Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code. Design tokens are design decisions, represented as data, that ensure systematically unified and cohesive product experiences. Design tokens point to style values like colors, fonts, and measurements. Tokens ensure the same style values are used across design files and code. Using design tokens instead of hardcoded values can streamline the work of building, maintaining, and scaling products with a design system.
from Material Design’s design token examples: https://m3.material.io/foundations/design-tokens/how-to-read-tokens
Across Material's guidelines, you’ll find tables that list tokens for color and typography.
Token reference tables can be used to look up (Material Design's) default values for color, font, font size, font weight, and more.
The tables map the relationship between a role, its system token, reference token, and the stored default value.
Components:
These tables show a diagram with accompanying data in a component for:
State: Interaction status of the component, such as enabled, hovered, or pressed.
Element: Part of a component that a given token or value applies to, such as the container or label text for a button.
Design attribute: Style aspect that the token or value applies to, such as color or font.
Role: Nickname for the system token (ex: secondary container color; Headline 1).
Token or value: Information defining a design attribute, either stored in a token or hardcoded.
To Summarize:
There are three kinds of tokens: reference, system, and component. Material Design currently uses reference and system tokens; component tokens are in development.
Tokens help maintain alignment and consistency in a design system
Tokens create a single source of truth for big systems as they grow and change
When using tokens for design and implementation, style updates will propagate consistently through an entire product or suite of products.
Because tokens are reusable and purpose-driven, they can define system-wide updates to themes and contexts for use. For example, tokens can be used to systematically apply a high-contrast color scheme for improved visibility or to change the type scale to make small text legible on a TV.
For those not using Design tokens just yet: File Naming Conventions
For design systems not yet using design tokens, there is also a way to name each item for engineering so that there is a cross-check for each file used. See above for simplified examples.
