Webflow's Variables feature replaces legacy color swatches with a true design token system. Create Color Variables in Style Panel > Variables, assign them to any color field across your entire site, and update all instances in one click. Variables work across colors, font sizes, spacing, and numbers — making site-wide rebrands a single-step operation.
Webflow Global Colors and Variables: Site-Wide Color Management
Webflow's Variables system (released 2024) is the modern replacement for the legacy color swatch picker. Instead of managing individual hex values scattered across dozens of elements, Variables let you define named design tokens — Primary Blue, Brand Red, Text Dark — and apply them everywhere. When you update a Variable, every element using it updates instantly across all pages. This tutorial walks through creating a complete color system, applying it to typography and backgrounds, and using Size Variables for consistent spacing.
Prerequisites
- A Webflow project open in the Designer with at least one page and some elements
- Your brand color palette (hex values) ready to enter
- Basic familiarity with the Style Panel (S)
Step-by-step guide
Open the Variables panel
Open the Variables panel
Variables are accessed through the Style Panel. Open the Style Panel by pressing S or clicking the paintbrush icon in the right toolbar. At the very top of the Style Panel, look for the Variables button (a small token icon or 'Variables' label, depending on your Webflow version). Alternatively, click the color swatch in any color picker — you'll see a token/variable icon you can click to switch to the Variables view. The primary entry point is through the Style Panel's global Variables section.
Expected result: The Variables panel opens, showing any existing variables or an empty state with an 'Add Variable Collection' button.
Create a Variable Collection for brand colors
Create a Variable Collection for brand colors
Click 'Add Variable Collection' and name it 'Brand Colors'. Collections group related variables together — think of them like folders. Good collections to create: 'Brand Colors' (your primary/secondary/accent palette), 'Neutrals' (grays, blacks, whites), 'Semantic Colors' (text-primary, background-default, border-subtle). For now, create the 'Brand Colors' collection. Click the collection name to confirm.
Expected result: A 'Brand Colors' collection appears in the Variables panel, ready for you to add individual color variables.
Add Color Variables to the collection
Add Color Variables to the collection
Inside the 'Brand Colors' collection, click the '+' icon to add a new variable. Select 'Color' as the variable type. Name it 'Primary' and click the color swatch to open the color picker — enter your brand's primary hex value (e.g., #2563EB). Press Enter to save. Repeat this process to add: 'Secondary' (e.g., #7C3AED), 'Accent' (e.g., #F59E0B), and 'CTA' (e.g., #10B981). Create a second collection named 'Neutrals' and add: 'Text Dark' (#111827), 'Text Medium' (#6B7280), 'Background Light' (#F9FAFB), 'White' (#FFFFFF).
Expected result: Your Variables panel shows two collections — Brand Colors and Neutrals — each with named color variables and their corresponding swatches.
Apply a Color Variable to a typography element
Apply a Color Variable to a typography element
Click on a heading element on your canvas. Open the Style Panel (S) and scroll to the Typography section. Click the Font Color swatch to open the color picker. In the color picker, you'll see a small token/diamond icon in the top-right area — click it to switch from the raw color picker to the Variables picker. Your variables collections appear as a list. Click 'Text Dark' to apply it. The heading's font color is now linked to your Variable instead of a raw hex value.
Expected result: The heading displays using the 'Text Dark' variable color, and the color picker shows the variable name instead of a hex code.
Apply Variables to backgrounds and buttons
Apply Variables to backgrounds and buttons
Select a Button element. In the Style Panel, scroll to Backgrounds. Click '+' to add a background color, then click the color swatch. Switch to Variables mode (token icon) and select 'Primary'. Now the button background uses your Brand Colors > Primary variable. Next, select the button's text (the link block inside the button). In Typography > Font Color, apply the 'White' variable from Neutrals. Repeat this process for all key elements: section backgrounds → Background Light, borders → a neutral variable, hover states → a darker shade from your palette.
Expected result: Buttons, headings, and section backgrounds all display using Variables. The design looks cohesive because all colors trace back to your defined palette.
Add Size Variables for consistent spacing and typography
Add Size Variables for consistent spacing and typography
Back in the Variables panel, create a new collection named 'Typography Scale'. Click '+' > Variable Type: Size. Add these variables: 'Text SM' (14px), 'Text Base' (16px), 'Text LG' (18px), 'Heading H3' (24px), 'Heading H2' (32px), 'Heading H1' (48px). Now apply them: select a heading, Style Panel > Typography > Font Size > click the link/chain icon next to the size input to switch to variable mode > select 'Heading H1'. Do the same for body text paragraphs using 'Text Base'. This creates a consistent type scale that's easy to adjust globally.
Expected result: Typography elements across your site consistently use the defined scale values, and changing 'Heading H1' from 48px to 52px updates all H1s simultaneously.
Test a site-wide rebrand using Variables
Test a site-wide rebrand using Variables
Return to the Variables panel. Click the color swatch next to 'Primary' in Brand Colors. Change the hex value from your original blue to a different color — for example, change it to a deep green (#16A34A). Press Enter and watch your canvas update in real time. Every element that uses the 'Primary' variable — your buttons, links, highlights — instantly switches to the new color. This demonstrates the power of the Variables system versus manually hunting down individual elements. Change it back to your original color when you're done testing.
Expected result: All elements using the 'Primary' variable updated simultaneously when you changed the variable value, confirming that your color system is working correctly.
Clean up legacy hardcoded colors
Clean up legacy hardcoded colors
Open the Style Selectors Panel (G) by clicking the three-droplets icon in the left toolbar. Look for the 'Unused' indicator on any classes. For each class that still uses hardcoded hex colors (shown without a variable indicator in the color picker), click the element, go to each color field, and replace it with the appropriate variable. Use the Style Panel's class view to systematically work through each class. The goal is that after this step, no element in your design uses a raw hex code — everything references a variable.
Expected result: Your site's color management is centralized. All colors reference Variables, and your Variables panel represents the complete color truth of your design.
Complete working example
1COLOR VARIABLES SETUP — VISUAL STEPS SUMMARY231. Style Panel (S) > Variables button at top of panel (or token icon in any color picker)42. 'Add Variable Collection' > Name: 'Brand Colors'53. Inside collection > '+' > Type: Color > Name each variable > Set hex value6 Recommended: Primary, Secondary, Accent, CTA74. Create second collection: 'Neutrals'8 Add: Text Dark, Text Medium, Background Light, White95. Create third collection: 'Typography Scale'10 Add Size variables: Text SM (14px), Text Base (16px), Heading H1 (48px), etc.116. Apply to elements: any color picker > token/diamond icon > select variable127. Apply to font sizes: Typography > Font Size > chain/link icon > select variable138. Test rebrand: Variables panel > edit any variable value > observe site-wide update1415NO custom code required. Variables are a fully native Webflow feature.Common mistakes
Why it's a problem: Changing a Variable value but some elements don't update
How to avoid: Those elements are still using hardcoded hex colors, not the variable. Select each element that didn't update, open the color picker for that property, look for a hex code instead of a variable name, and replace it by switching to Variables mode (token icon in the color picker) and selecting the correct variable.
Why it's a problem: The token icon is not visible in the color picker
How to avoid: Ensure you're in the color picker opened from within the Style Panel, not a global color panel. Click the element first, press S to open the Style Panel, then click a color swatch (font color, background, border). The token/variable icon appears in the top area of the color picker popup.
Why it's a problem: Variables are not showing up in hover or interaction states
How to avoid: Variables work in all states, but you must be in the correct state when applying them. Use the States dropdown at the top of the Style Panel to switch to 'Hover', then open the color picker and apply the variable. The variable indicator will then appear in the hover state's color field.
Why it's a problem: Deleting a Variable that's still in use breaks element colors
How to avoid: Webflow will warn you before deleting a variable that's in use. If you delete one accidentally, use Cmd+Z to undo immediately. To safely remove a variable, first reassign all elements using it to a different variable, then delete the unused variable from the Variables panel.
Best practices
- Name variables by semantic role ('Text Primary', 'CTA Button') not by color value ('Blue', 'Green') so they remain meaningful if you rebrand.
- Create a 'Semantic' collection that references your brand colors by purpose: 'Button Background' → Primary, 'Danger' → Red, 'Success' → Green. This two-tier system makes future updates even faster.
- Apply Variables to hover and focus states in addition to default states — consistency matters across all interaction states.
- Use Size Variables for spacing (padding, margin) as well as typography. A 'Spacing MD' (24px) variable applied to section padding ensures all sections stay in sync.
- Document your variable structure in a Webflow Note or a separate text element on a hidden 'Style Guide' page so collaborators understand the system.
- Avoid creating too many variables. A system of 12-20 well-named variables is more manageable than 60 granular ones.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm setting up a design system in Webflow using Variables. I have brand colors I want to apply across my entire site — headings, buttons, backgrounds, and borders — so I can update them all at once later. Walk me through creating a Variables collection structure, naming conventions for semantic tokens, and how to apply variables through Webflow's color picker. I want to avoid hardcoded hex colors anywhere in my project.
Set up a complete Webflow Variables color system for this project. Create a 'Brand Colors' collection with Primary (#2563EB), Secondary (#7C3AED), and Accent (#F59E0B) variables. Create a 'Neutrals' collection with Text Dark (#111827), Text Light (#6B7280), and White (#FFFFFF). Apply the Primary variable to all buttons and the Text Dark variable to all headings.
Frequently asked questions
What is the difference between Webflow Variables and the old color swatches?
Legacy color swatches in Webflow stored a shared color value that you could pick from the color picker, but they didn't create a true link between the swatch and the elements using it. Changing a swatch didn't update existing elements. Webflow Variables create a live reference — when you change a variable's value, every element using that variable updates instantly across all pages. Variables also support sizes, percentages, numbers, and font families, not just colors.
Can I use Webflow Variables inside CSS custom properties or Embed code?
Webflow Variables export as CSS custom properties (e.g., --color-primary: #2563EB). You can reference them in custom CSS with var(--color-primary). In Embed elements or Page/Project Head code, use the exact CSS custom property name that Webflow generates. Check the variable name by publishing your site and inspecting the :root CSS in browser DevTools.
Do Variables work on the free Webflow plan?
Yes, creating and applying Variables in the Designer is available on all plans including free. However, if you want to inject custom CSS that references the generated CSS custom property variables in Embed elements or Page Head code, that requires a paid site plan (Basic and above).
Can Webflow Variables be used for font families, not just colors?
Yes. Webflow Variables support five types: Color, Size, Percentage, Number, and Font Family. Create a Font Family variable (e.g., 'Body Font' = Inter, 'Heading Font' = Playfair Display) and apply it to the Font Family field in the Typography section. Changing the variable updates that font across all elements using it.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation