Skip to main content

Search rules

Search all UI Guides rules by name, category, or source

designRAMS

Inconsistent Spacing

SHOULD

SHOULD: Use consistent spacing values from a defined scale (4px, 8px, 16px, etc.). Avoid mixing arbitrary pixel values. Inconsistent spacing creates visual imbalance.

Use consistent spacing between similar elements

Bad

Good

Why it matters

The upstream rule is that four-word bullet, under "Layout & Spacing" — the explanation below is ours. Arbitrary gaps (13px here, 17px there) read as noise because proximity is how a reader infers grouping: if the gap between a label and its input is the same as the gap between two unrelated fields, nothing tells them which label belongs to which control. Pick a scale and stay on it — Tailwind's (4, 8, 12, 16, 24, 32…) is fine — and make the same relationship take the same step everywhere: all card paddings equal, all stack gaps equal, tighter inside a group than between groups.

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.