Build & CMS
Design tokens
Design tokens are the named values a design system is built from: a colour called "surface-dark", a spacing unit called "space-md", a type size called "heading-2". Elements reference the token, not the raw value.
The benefit is indirection. If forty elements use the raw value #2547ff and the brand blue changes, forty edits follow. If they reference a token named "brand-primary", one edit follows. Tokens also carry meaning: a developer reading "surface-dark" knows what it is for in a way that #0d0d0d does not convey.
In Webflow tokens are variables, grouped into collections and applied through the designer. They can have modes, so the same token resolves to different values in light and dark themes, or at different breakpoints. That is how a single set of components can serve several visual contexts without duplication.
A small token set beats a large one. Five or six type sizes, a spacing scale of six or seven steps, a dozen colours with semantic names. More than that and people stop using them, which returns the site to raw values with extra steps.
Design tokens in practiceBuild & CMS