Fix Spacing Issues

Fix Spacing Issues

Purpose

This skill diagnoses and fixes spacing issues that make interfaces feel disconnected or unclear. It applies three fundamental perceptual laws to create proper visual grouping and hierarchy through strategic use of whitespace, boundaries, and visual connections.

Applies these laws from lawsofux.com:

• Law of Proximity: Objects near each other appear grouped
• Law of Common Region: Elements sharing a boundary appear related
• Law of Uniform Connectedness: Visually connected elements seem more related

When to Use

• "Cards feel like islands"
• "Everything is the same distance apart"
• "Elements feel disconnected"
• "Groupings are unclear"
• "No visual rhythm"

The Laws

Law of Proximity

Objects that are near each other tend to be grouped together.

Application:

Space WITHIN groups < Space BETWEEN groups

Card padding < Gap between cards < Section gap

Violation test:

Proximity Ratio = internal spacing / external spacing
PASS: ratio < 1.0
FAIL: ratio ≥ 1.0

Law of Common Region

Elements tend to be perceived as groups if they share a clearly defined boundary.

Application:

• Add backgrounds, borders, or containers to create regions
• Don't rely on proximity alone for complex groupings
• Nested regions show hierarchy

Law of Uniform Connectedness

Elements that are visually connected are perceived as more related than elements with no connection.

Application:

• Lines, arrows, or shared colors connect related items
• Timelines, flowcharts, breadcrumbs use this
• Stronger than proximity for showing relationships

Diagnosis

For each group of elements, check:

1. PROXIMITY: Is internal < external spacing?
2. REGION: Do related items share a boundary?
3. CONNECTION: Are sequential items visually linked?

Output Format

SPACING DIAGNOSIS

Law of Proximity:
WHERE: [component]
Ratio: [internal]px / [external]px = [X]
Violation: [Yes/​No]
FIX: [change]

Law of Common Region:
WHERE: [component]
Issue: [missing boundary / competing regions]
FIX: [add container / adjust]

Law of Uniform Connectedness:
WHERE: [component]
Issue: [disconnected sequence]
FIX: [add connector]

Quick Reference

Rule: Each level should be ~1.5-2x the previous.