The short answer
A spacing scale is a short, fixed menu of gap sizes (something like 8, 16, 24, 32, 48, 64 pixels) that you pick from every time two things need space between them, instead of inventing a new number each time. Sites feel "off" when spacing is random because space is how a layout communicates what belongs together. Pick an 8-based scale with six to eight steps, store it as variables in Bricks, and stop choosing numbers from memory.
You have seen it, even if you could not name it. Two websites use the same colors, the same fonts, even the same kind of imagery. One looks professional and one looks slightly wrong, and nobody looking at them can point at the reason. The difference, more often than any other single thing, is spacing: one site chose its gaps from a small, consistent menu, and the other typed whatever number felt right that afternoon.
This is the cheapest upgrade in web design. It costs nothing, it is not a plugin, and Bricks already has everything you need to do it properly.
Why does random spacing make a site feel amateur?
Space is not decoration. It is information. Readers use distance to decide what belongs to what: a caption sits close to its image, a heading sits close to the paragraph it introduces, and a new section announces itself with a big, confident gap. Designers call this the proximity principle, and it works whether or not anyone involved has heard the term.
When gaps are chosen ad hoc, those signals contradict each other. A heading floats 40 pixels from its own text but only 32 from the section above, so it reads as belonging to the wrong block. Two cards sit 20 pixels apart on one page and 28 on another, so the site stops feeling like one system and starts feeling like a collection of pages built on different days. Which, without a scale, is exactly what it is.
There is also plain drift. Was that gap 23 pixels or 24? Typed fresh from memory a hundred times, values wander, and every wandered value is one more tiny inconsistency the eye registers and the brain bills as "something is off here."
What is a spacing scale, exactly?
A menu. Nothing more mysterious than that: a short list of allowed sizes, agreed once, used everywhere. A common one looks like this:
--space-xs: 8px; /* inside components: icon to label */
--space-sm: 16px; /* between related elements */
--space-md: 24px; /* between distinct elements */
--space-lg: 48px; /* between groups */
--space-xl: 96px; /* between sections */
--space-2xl: 160px; /* the big top and bottom of a page */Notice the steps are not evenly spaced. They grow roughly by ratio, not by adding a fixed amount, and that is deliberate: the difference between 8 and 16 is obvious, but the difference between 88 and 96 is invisible. Perception works in proportions, so useful scales spread out as they go up. That is also why a scale needs so few steps. Six distinct sizes you can tell apart beat twelve you cannot.
How do you choose your scale?
The boring answer is the right one: base it on 8, keep six to eight steps, and name the steps by size the way t-shirts do. An 8-point base divides cleanly, plays well with common component sizes, and is the default in more design systems than any other number. A 4-point base buys finer control at the cost of more decisions per gap; dense product interfaces sometimes want it, marketing sites almost never do.
The naming matters more than it looks. Names like --space-md survive a redesign; a name like --space-24 becomes a lie the day you decide medium should be 28. This is the same role-over-appearance rule we recommend in our design tokens guide, applied to space instead of color.
Good to know
One classic rule worth stealing: put more space above a heading than below it. The heading belongs to the content that follows, so the gap underneath should be the small one. It is a one-line change that makes long pages noticeably easier to scan.
How do you set this up in Bricks?
Natively, and without buying anything. Bricks has supported design tokens and variables since the 2.2 Style Manager, so the scale above can live as a set of variables you define once and pick from in any padding, margin, or gap field. Section padding comes from the large end of the menu, gaps between cards from the middle, space inside a card from the small end. The site-wide rhythm then comes for free, because every page is drawing from the same six numbers.
If you would rather not design the menu yourself, this is one of the main things CSS frameworks sell: ACSS, Core Framework, and Advanced Themer all ship professionally worked-out spacing scales, usually fluid ones. Our plain-English framework comparison covers when that purchase makes sense and when native variables are enough.
Should spacing shrink on mobile?
The large values should. A 96-pixel section gap that feels generous on a desktop monitor eats a third of a phone screen, so the big end of the scale usually steps down on small viewports. The small values mostly should not: the gap between an icon and its label is about legibility, not luxury, and 8 pixels is 8 pixels on every screen.
You can handle this manually in Bricks by overriding the large variables at a breakpoint, or you can make the scale fluid with clamp(), where each step slides smoothly between a phone value and a desktop value:
--space-xl: clamp(48px, 8vw, 96px);
/* never smaller than 48, never larger than 96 */Fluid scales are exactly what most paid frameworks automate for you. Either way, the principle is the same: the menu adapts, the menu discipline does not.
Bottom line
Random spacing is the most common reason a site feels amateur, and the least diagnosed. The fix is a menu: six to eight sizes on an 8-point base, named by role, stored as Bricks variables, chosen from every single time. It takes an evening to set up, it costs nothing, and from that point on your pages agree with each other without you thinking about it. Few habits in web design pay this well for this little.
FAQ
Questions about this topic
Should I use a 4-point or an 8-point spacing scale?
Start with 8. It produces fewer, more distinct choices, and every value divides cleanly into common screen sizes. Move to a 4-point base only if you keep needing a size that falls between two of your steps, which mostly happens in dense interfaces like dashboards, not marketing sites.
How many steps does a spacing scale need?
Six to eight covers a full site: a couple of tight values for things inside components, a couple of mediums for gaps between elements, and two or three large ones for section padding. If you have twelve steps you will spend time choosing between values nobody can tell apart.
Should I set spacing with margins or with gap?
Prefer gap on the parent container when you are spacing siblings, like cards in a grid or items in a column. It keeps the spacing decision in one place instead of on every child, and it cannot double up the way stacked margins can. Margins still make sense for one-off relationships, like the space above a heading.
Does line height belong to the spacing scale?
No. Line height is part of typography and is set relative to the font size, usually between 1.1 for large headings and 1.6 for body text. Keep it out of the spacing menu; mixing the two systems makes both harder to reason about.