←  All terms
W
Webflow

Webflow Variables

Webflow Variables store reusable values such as colors, sizes, and spacing for consistent styling.

Webflow Variables create a centralized system for managing reusable design values across a project. When a linked value changes, every connected style updates automatically, making large-scale design changes easier to maintain. Collections, aliases, and modes help organize these values as design tokens and support responsive, contextual, or theme-specific variations.

Read more

Design Token

Design System

Style Guide

CSS

FAQ

Webflow Variables

What are typical mistakes with Webflow Variables?
Common ones are hardcoded values next to variables, unclear names, and too many exceptions. Changes then take effect only partly, and the system loses its reliability. A good rule: create new values as variables first, then use them, and document the naming.
How should variables be structured in a project?
Separating layers works well: base values such as a color palette and scale, with aliases carrying meaning on top, such as primary color or text color. Styles point to the semantic layer, not to raw values. A rebrand can then be done by changing a few base values. Collections organize values by topic.
What are modes used for in Webflow Variables?
Modes supply different values for the same variable, for example for light and dark themes or brand variants. Styles stay unchanged, and only the mode switches the values. This reduces duplicate classes. The effort lies in planning, since names and aliases must be defined consistently beforehand.
How do Webflow Variables and design tokens differ?
Design tokens are the concept, and variables are the implementation in Webflow. Tokens describe design decisions such as colors and spacing independent of technology, while variables store those values in the project and bind them to styles. Exchange with code or Figma needs its own coordination beyond that.