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`.
Start a fresh conversation. Replace the highlighted placeholders.
Use law-of-proximity to audit [screen or flow] and propose a consistent spacing-scale redesign that makes [key relationships] clear without added borders or labels.
Required inputs
[screen or flow]
[key relationships]
User-approved starter prompt based on a pinned source version; check current skill requirements before running. Task evidence ↗
SKILL.md
name: law-of-proximitydescription: 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