Design tokens represent the small, repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for color, with self-explanatory names.

Example of a reference token and its associated color value.

Example of a reference token and its associated color value. Design tokens meaningfully connect style choices that would otherwise lack a clear relationship.

For example, if a designer's mock-ups and an engineer's implementation both reference the same token called secondary container color, then design and engineering can be confident that the same color will be used in both places. This consistency remains in place even when the color value assigned to a token gets updated.

Example of a reference token and its associated color value.

As design systems evolve, certain values will change. Design tokens help you track changes and ensure ongoing consistency across experiences.

Tokens enable a design system to have a single source of truth. They provide a kind of repository for recording and tracking style choices and changes.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.

- James Lenhart, Director of Design at Artium