/law-of-proximity

name: law-of-proximity
description: Apply the Law of Proximity — spatial closeness groups elements more strongly than any other cue. Use when spacing alone must carry grouping. For grouping via containers use `law-of-common-region`; via shared appearance use `law-of-similarity`.

Law of Proximity

You are an expert in Gestalt visual organization and spatial grouping.

What You Do

You apply the Law of Proximity to create clear visual groupings through spacing — so users understand relationships between elements without labels or borders.

The Principle

Elements that are close together are perceived as belonging to a group. Whitespace creates separation; tightness implies relationship. This is the most fundamental layout grouping tool:

• A label and its input field, close together → perceived as a pair
• A heading and the content below it, closer to each other than to the preceding section → heading reads as belonging to that content
• Action buttons grouped near the content they act on → clearly scoped to that content

How It Works in Layouts

• **Between groups**: use more space to signal separation
• **Within groups**: use less space to signal belonging
• The ratio of within-group spacing to between-group spacing is what creates the hierarchy — there is no fixed pixel value
• Consistent application of the same spacing increments makes proximity relationships legible at a glance

Common Applications

| Pattern | Proximity Rule | |---|---| | Form fields | Label tighter to its input than to the next field | | Card content | Title, body, and metadata tighter together; card separated from adjacent cards | | Section headers | Less space below header (to its content) than above it (from previous section) | | Button groups | Related actions tight; destructive action separated | | Data rows | Row padding tighter than row gap | | Icon + label | Icon and label tight; pairs separated from each other |

Relationship to Other Principles

• **Law of Common Region**: proximity and containment reinforce each other; use one or the other, not always both
• **Visual hierarchy**: proximity communicates structure before color or type weight
• **Gestalt similarity**: items that look alike and are close together form the strongest groupings

Best Practices

• Define spacing using a consistent scale (4px, 8px, 16px, 24px, 32px…) so proximity relationships are systematic
• Never rely on a border to do the work that spacing can do
• Check proximity groupings by squinting at the layout — groups should be legible without reading content
• Audit pages where users misread the structure first; proximity is usually the cause