A comprehensive set of design tokens —or Webflow variables— is key to designing at scale. Defining and sharing variables enables your entire team to design and build consistent typography, dimensions, effects, and other details. For broader design system coverage, you can now save unitless numbers and percentages to your variables!

Unlock more typographic details with Number variables

The new Number type enables you to store unitless numbers in your variables: on a site or within a Shared Library. These are especially useful for typographic values. For example, suppose the body copy for your sites should always be configured as follows:

• Font weight: 400
• Font size: 1rem
• Line height: 1.4
• Font family: Inter

You can now save your font weight and unitless line height as Number variables. Use the Size variable type for font size, and the Font type for the font family name. You can either:

• Create Number variables from the Variables panel, and link them to style properties from the Style panel, or
• Type a unitless number into a supported Style property and create a new variable directly from the property.

Where to use a Number variable

The new Number variable type can be linked to any of the following styles:

• Flex Child properties — grow and shrink
• Position — z-index. This style property takes only integer values.
• Typography — font weight, line height, variations (for variable fonts). Font weight takes only integer values between 1-1000. Unless you’re using variable fonts, this will typically be a multiple of 100, such as 400 or 600.
• Effects — opacity

More flexible design systems with the new Percentage variables

The new Percentage variable type can be used anywhere that the Style panel accepts percentages as a unit, which is quite a few properties! These include:

• Layout — gap sizes
• Flex Child properties — basis
• Spacing — margin and padding: top, bottom, left, right
• Size —  height and width dimensions (including min and max)
• Position — top, bottom, left, right
• Typography — font size, line height, text indent, column gap
• Borders — border radius
• Effects — opacity, various filters and backdrop filters: blur, brightness, contrast, saturation, grayscale, invert, sepia, translate

Particularly great applications include dimensions, such as width and height; effects; and border radii.

As with the new Number type, Percentage variables can be created from the Variables panel or directly in the Style panel, wherever you have entered a percentage value.

Try out the new types

Head on over to the Variables panel to try out the new Number and Percentage types today. You can learn more about using variables in the Help Center. We hope these new variable types help increase the efficiency, consistency, and governance of your design systems in Webflow.