Spacing That Doesn't Look AI-Generated

The single most common tell of a rushed or AI-generated interface is inconsistent spacing: every gap is a slightly different, unrelated number, and related elements aren't visually grouped.

When to use

• Any time you're laying out a new component or page from scratch.
• Reviewing an existing layout that "feels off" but you can't say why.

Principles

• Related elements sit closer together than unrelated ones. Spacing communicates grouping before color or borders do (this is the Gestalt law of proximity, applied literally).
• Use a spacing scale (e.g. 4, 8, 12, 16, 24, 32, 48, 64) and never step outside it. Arbitrary values like 13px or 22px are a signal something wasn't deliberate.
• The gap between groups should be visibly larger than the gap within a group — usually at least 2x.

Instructions

1. Pick a base unit (4px is standard) and only use multiples of it for margin/padding/gap.
2. When a section has a label + content, keep label-to-content spacing tight (4–8px) and section-to-section spacing loose (24–48px).
3. Audit a finished layout by turning on the browser's box-model outline — if you can't tell which elements belong together just from spacing, tighten the within-group gaps.
4. In card grids, the gap between cards should generally be smaller than each card's internal padding, or the grid reads as cluttered.

Examples

Card padding: 24px
Gap between cards: 16px
Gap between card sections: 40px+

Avoid

• Don't add padding "until it looks right" without checking it against the scale — it accumulates into inconsistent rhythm across the page.
• Don't use equal spacing between every element on a page; uniform spacing removes all grouping information and makes dense layouts harder to scan.

References

• Gestalt principle of proximity; 4/8pt grid systems used in most modern design systems (Material, Apple HIG, Tailwind's default scale).