Spatial Rhythm
Spacing Scale
Every spacing value on a well-built page is a multiple of one number. This tool shows the full 4px-based scale, three density modes, and five rules for vertical rhythm. Hover any token to see it. Feel how consistent spacing produces quiet confidence — and how arbitrary values produce anxiety.
Pixel / Spacing
Spacing Scale
Base unit: 4px. All else follows.
Tailwind tokens · rem values · pixel equivalents at 16px root
Border territory. Nothing else lives here.
Use it. Don't announce it.
The atom. Every system starts here.
The base unit. Most things should start here.
Fine.
One rem. Body rhythm. Memorize this.
Comfortable gap. Underused.
Section breathing room. Use it often.
A statement. You are separating things.
Intentional. Make sure it was.
Major break. Belongs between sections.
Hero territory. Use sparingly.
Are you certain?
Landing page syndrome, stage one.
Stage two. Reconsider.
Stage three. Close the laptop.
The grid in practice
Every bar is a multiple of 4. This is what a grid looks like.
The Case for Systems
A design system without a spacing scale is a color palette without contrast ratios: technically present, functionally incomplete. You can have beautiful type, precise colors, and a consistent component library — and still ship a page that feels wrong because the gaps between elements are arbitrary.
The 4px base unit is not sacred. 8px works. So does 6px. The number matters less
than the discipline: every value is a multiple. No exceptions. No "just this
once." When you allow padding: 13px,
you have introduced a value that belongs to no system. It will spread.
This tool is a reference and a gut-check. Each token comes with a verdict: what it is for, when to use it, when to stop. The density examples show the same four elements at compact, comfortable, and generous spacing — so you can see the emotional difference that gap values produce.
Three Modes
Scale
The full token set: 1px through 160px. Each token shows its name, rem value, pixel value, and a proportional bar. Hover to see it rendered. The verdicts are opinionated — they tell you when a value is too much.
Density
The same four items rendered at three densities: compact (4–8px gaps, dashboard territory), comfortable (16–24px, most UI), and generous (32–48px, editorial). The difference is only gap and padding. The content is identical.
Rhythm
Five rules for vertical rhythm that most layouts violate. Line-height is spacing. Proximity signals relationship. Section gaps should feel like a breath — not a gasp. Padding should match visual weight. Every rule includes what goes wrong when you break it.
The Underlying Principle
Typography gets attention. Color gets attention. Spacing does not get attention — which is exactly why it matters. Bad spacing is invisible to the designer and palpable to the user. They cannot tell you "the gap between the heading and the body text is 18px when it should be 16px." They can tell you "this page feels off."
Spacing is the only design axis where consistency produces calm and inconsistency produces anxiety. A wrong color is noticeable. A wrong font is noticeable. A wrong gap is felt. This is why spacing systems exist: not to constrain creativity, but to remove the class of errors that users can feel but cannot name.
Who Uses This
Design system authors choosing token scales — deciding between 4px-based, 8px-based, or a Fibonacci approach, and needing to see the practical difference.
Developers who inherit a design with inconsistent spacing and need a reference
to normalize it. "Is this 12px or 16px?" becomes "this is space-3
and it should be space-4."
Anyone who has ever shipped a page where "something feels off" and spent an hour nudging margins. The answer was almost always: the spacing values didn't belong to a system.