How to Name Spacing Variables a Client Can Actually Use

How should you name spacing variables so a client can actually use them?

Name them for where they go, not for their pixel value. Keep a small raw scale for yourself, then give clients a short set of purpose-based names like section padding, card padding, and stack gap. A client picking "card padding" makes the right choice without knowing the scale. A client picking "space 24" is guessing.

Most Webflow design systems are built by designers for designers. The spacing scale is clean, the names are logical, and the client team never uses it. Six months later every new section has its own margin values, and the site looks slightly off everywhere.

I have handed over sites to more than 25 clients across 100 plus projects, and spacing is the part of a design system that drifts first. Not because clients are careless, but because the names do not tell them what to pick. Here is the naming approach I use now.

What does Webflow give you for spacing variables?

Webflow's documentation lists five variable types: color, size, font, number, and percentage. Size variables are the ones described as defining sizes and spacing. Webflow also supports variable collections, which group related variables, and its docs give separate collections for colors, typography, or spacing as an example.

That is enough structure to build a two-layer system. One collection holds your raw spacing scale. Another holds the purpose-based names that point at values from that scale. The client works mostly with the second collection, while you maintain the first.

If you want the deeper theory behind this, I wrote about layered design tokens beyond Webflow variables. This article stays practical: what to name things so non-designers pick the right one.

Why do pixel-based names fail for clients?

Because they describe a value, not a decision. A name like "space 32" tells you how big something is, but not where it belongs. A client building a new section has to know your whole system to pick correctly. Without that knowledge, they pick whatever looks close, and the site slowly loses its rhythm.

Designers like value-based names because they are precise and easy to scale. That is a real benefit when you are building. It becomes a cost the day you hand over the site to a marketing team that just wants to add a testimonial block before a launch.

T-shirt sizes like small, medium, and large have the same problem. They are friendlier than numbers, but "medium" still does not say whether it is meant for a gap between cards or the padding of a whole section.

What should the raw spacing scale look like?

Short and predictable. Eight to ten steps is plenty for most marketing sites, often built on multiples of four or eight. Name these steps plainly, such as space 1 through space 10, and treat them as your private building blocks. Clients should rarely need to touch them directly.

Resist the urge to add a step every time a design needs an odd value. Every new step makes the scale harder to reason about. If a layout needs a value between two steps, it is usually a sign the layout should change, not the scale.

Keep this collection named clearly, something like "Spacing scale" or "Primitives," so anyone opening the Variables panel can tell it apart from the names they should use day to day.

What purpose-based names should clients see?

Names that match how people describe a page out loud. Section padding, section gap, container padding, card padding, stack gap for space between stacked text, and inline gap for space between buttons or icons. Six to eight names cover most marketing pages. Each one points at a value from your raw scale.

Test the names on a real person. Ask a client team member to add spacing to a new card using only the variable names. If they hesitate, the name is wrong. "Card padding" should feel obvious. "Component inset" probably will not, even if it is technically more accurate.

Where you need size variations, add them to the purpose, not the value. "Section padding large" for a hero, and "section padding" for everything else. That keeps the decision in the name.

The same idea carries into components. If your cards, pricing boxes, and testimonial blocks are built as components that already use these variables, the client rarely sets spacing by hand at all. I explained how I connect the two in building a Webflow design system with components and variables. Variables set the rules, and components apply them for the client.

How do you handle spacing on smaller screens?

Keep the purpose-based names the same across screen sizes and change the values underneath them, so a client never needs a separate "mobile" variable. Section padding should shrink on a phone, but the client should still just pick section padding. How you implement that depends on your setup, so test it on every breakpoint.

The common mistake is creating "section padding mobile" as a separate variable. Now the client has to remember to switch it at every breakpoint, and they will forget. One name per purpose is easier to use and easier to maintain.

Check Webflow's current documentation for the best way to vary values by screen size in your project, since the options have expanded over time. Whatever method you choose, write it down in your handover notes.

How do you document the system for the client team?

One short page, not a design manual. List each purpose-based name, a one-line description of where it goes, and a screenshot showing it in use. Put it somewhere the team already looks, such as a page in the Webflow project they can open, or the handover document they keep.

The description matters more than the screenshot. "Card padding: space inside any card, tile, or pricing box" answers the question a client actually has. Keep each description under fifteen words.

Add one rule at the top: if none of these fit, ask before inventing a new value. That single sentence prevents most drift. I covered more ways to keep things consistent in how to keep a design system from drifting.

How do you know if the naming is working?

Look at the pages the client built after handover. If new sections use your purpose-based variables and the spacing looks consistent, it is working. If you find hard-coded pixel values or new one-off classes, the names were not clear enough. Fix the names, not the client.

I recommend doing this check about a month after launch. It takes twenty minutes and tells me more about the design system than any review before launch. Real use by a busy team is the only test that counts.

When you find drift, ask the person who built the section what they were looking for. Their words are often the name you should have used in the first place.

What should you do next?

Split your spacing into two collections: a raw scale you maintain and a short set of purpose-based names the client uses. Write a one-line description for each name, test them on a real client team member, and check new pages a month after handover to see if the names held up.

If you are planning a Webflow build that a marketing team will maintain long after launch, reach out. I am happy to talk through how to set up a system they will actually use.