Codify your design system with variables

<p id="">Variables let you store values — including colors, sizes, and typography — so they can be reused and modified at scale.&nbsp;</p><p id="">Centrally manage your design tokens from the new Variables panel, where you can replace hard-coded values with a variable, then leverage that variable across the Designer.&nbsp;</p><figure id="" class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:2400px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="2400px"><div id=""><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/651df77026163687bdd66e84_Variables.jpg>" loading="lazy" id="" width="auto" height="auto" alt=""></div></figure><p id="">As of today, we’re phasing out support for color swatches, which we’ve seamlessly migrated to variables. Variables do everything a color swatch does, including a few extra perks:&nbsp;</p><ul id=""><li id="">They’re now centrally managed in the Variables panel&nbsp;</li><li id="">They bring the benefits of color swatches to other values — such as size and font&nbsp;</li><li id="">They are extensible — whereas color swatches were specific to Webflow, variables are an industry standard and compatible with CSS variables and variables in Figma via our APIs</li></ul><p id=""><strong id="">Streamline your workstreams&nbsp;</strong></p><p id="">With variables, you can construct a list of pre-vetted values to choose from in the Designer, so you can focus on building and designing, instead of referencing a stylesheet. Variables also make it more straightforward to make sweeping changes – whether that’s completing a rebrand in record time, or faster iteration cycles at the outset of a project, you’ll be able to focus on what matters with less tedious work.&nbsp;</p><p id=""><strong id="">Stay on brand&nbsp;</strong></p><p id="">Variables work alongside styling in Webflow,&nbsp; such as your existing classes, tags and components. With variables, you now have a programmatic way of making large-scale changes to your most foundational values — and these can serve as a connecting thread across disparate classes and components.&nbsp;</p><p id=""><strong id="">Scale your impact&nbsp;</strong></p><p id="">Creators in the Webflow ecosystem can now take advantage of variables to codify frameworks and create more complex templates or cloneables. With variables, you can efficiently repurpose existing sites and modify them to meet the needs of a specific brand or use case.&nbsp;&nbsp;</p><p id="">To learn more, read our <a href="<https://university.webflow.com/lesson/variables>">Webflow University lesson</a></p>