Naming is the whole trick
Tokens named after their appearance stop being useful the moment the appearance changes. A token called blue-500 used for every primary action becomes a lie the day the brand colour turns green.
Name by role instead: colour-action-primary, space-section, text-heading-lg. The name says what the value is for, so the value can change without the name becoming wrong.
| Category | Example name | Example value |
|---|---|---|
| Colour | colour-action-primary | #1E44B8 |
| Spacing | space-section | 96px |
| Type size | text-heading-lg | 40px |
| Radius | radius-card | 8px |
| Breakpoint | screen-md | 768px |
A usable set
- Colour, by role rather than by hue
- Spacing, as a fixed scale rather than arbitrary values
- Type sizes and line heights, as a scale
- Radii, borders, and shadows
- Breakpoints, named once and reused
In Webflow and in code
Webflow variables are design tokens in practice, and treating them that way keeps a large site consistent. In a code base the same tokens live as CSS custom properties or a theme file, which lets a design system stay in step across both a marketing site and a product.
Why it matters for B2B marketing teams
Tokens are what make a rebrand affordable rather than a rebuild. For a B2B company likely to refresh its brand every few years while keeping the site, the difference between a token change and a redraw across hundreds of pages is weeks of work.