←  All terms
D
Design Systems

Design Token

A design token stores a reusable design decision such as color, spacing, or type size as a named value.

A design token stores a reusable design decision such as color, spacing, or type size as a named value. Value comes from governed tokens, accessible components, clear documentation, and consistent maintenance. The concept is closely related to Design System and Webflow Variables.

Read more

Design System

Webflow Variables

Style Guide

CSS

FAQ

Design Token

What typical mistakes occur with design tokens?
Tokens are often named after their value instead of their purpose, such as blue-500 used everywhere. Other mistakes include a flood of tokens, missing documentation, and one-off values that live on beside the tokens. A color change can then no longer be made in one place, and the main benefit is lost.
How can design tokens be implemented in Webflow?
In Webflow, variables represent tokens for colors, sizes, and fonts. Variable modes can express variants such as a dark theme. Semantic naming helps, as does avoiding one-off values entered directly in classes. Otherwise a second, uncontrolled system emerges alongside the variables.
Which token layers make sense in practice?
Three layers are common: primitive tokens with raw values such as a color palette, semantic tokens with a purpose such as primary text color, and component-specific tokens. Semantic tokens enable themes, such as a dark mode, because only the mapping changes. Too many layers, however, add complexity without benefit.
How does a design token differ from a CSS variable?
A design token is a platform-neutral concept, while a CSS custom property is one possible implementation on the web. The same tokens can also be exported for iOS or Android. The variable carries a value, whereas the token also carries its meaning and naming. The benefit lies in the naming scheme, not in the syntax.