What are design tokens?
A design token is a named value, such as the brand colour or the standard spacing, defined once and used everywhere instead of repeating the raw value.
Tokens in CSS#
On the web, tokens are CSS custom properties, usually defined on :root:
--color-accent: #2b59ff;defines a tokencolor: var(--color-accent);uses it
Change the definition and every place that uses it follows. A colour that appears in forty rules becomes one line to change.
Two tiers: what a value is, and what it is for#
Good token systems have two layers. Primitive tokens name the raw palette (--blue-600). Semantic tokens name a job and point at a primitive (--color-accent: var(--blue-600)). Pages and components use only the semantic ones, so a dark mode is just a second set of semantic values, and a rebrand changes a handful of lines.
Tokens in Weblooks#
The Variables panel in the editor's Design mode lists your tokens, groups them, and shows where each is used. The contrast scan reads colours written as tokens, in light and dark mode, so a tokenized site is checked properly. The starter templates come with a two-tier token set and a dark mode.