Skip to main content

Search rules

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

designCustom

Crowded Elements

SHOULD

SHOULD: Provide adequate whitespace between interactive elements to prevent accidental activation. Touch targets should have at least 8px gap between them.

Elements too close together reduce readability and usability

Bad

Good

Why it matters

This is our own rule, not an upstream citation — the Rams review has no bullet for it, and we previously mislabelled it as one. Two things go wrong in a cramped layout. Reading: with no breathing room, everything sits at the same visual weight and the eye has nothing to group by, so scanning degrades into reading. Pointing: adjacent tap targets with no gap between them produce mis-taps, which is the failure the WCAG 2.2 target rules are about — see interactions-match-hit-targets for the actual size floors (24×24 CSS px minimum, 44×44 on touch). Padding is the cheap fix; spacing between siblings is the one people forget.

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.