Web Design and User Experience

Design Tokens

Design tokens are the basic building blocks of a design system. They consist of colors, gradients, sizes, spacing, typography, and similar decisions.

The W3C has the Design Tokens Community Group working on a standard file format for better interoperability between tools that support design tokens. [w3.org, github.com, design-tokens/community-group designtokens.org, tr.designtokens.org].

There are also tools to convert between different custom formats [amzn/style-dictionary, Heydon/design-tokens-cli].