Skill Store 33

Law Of Proximity

Apply the Law of Proximity — spatial closeness groups elements more strongly than any other cue.

by owl-listener · MIT

The skill

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

Use this skill

Connect your agent to the Skill Store MCP server and ask for it by ref: owl-listener/law-of-proximity-2157112381.

Download SKILL.md · Markdown version

Details

Publisher
owl-listener
Category
Software Development › Frontend & UI
License
MIT
Updated
2026-09-05

References

More from owl-listener

  • Design Critique Facilitate a structured team critique — framing, feedback rules, and actionable outcomes.
  • Design Debt Audit Inventory and prioritise accumulated design inconsistencies across a product.
  • Design Impact Reporting Communicate design's contribution to business and user outcomes in stakeholder language.
  • Design Qa Checklist Build a QA checklist for verifying that a build matches the design.

Related skills

  • Law Of Similarity Apply the Law of Similarity — shared colour, shape, or size signals that elements belong to one c…
  • Law Of Common Region Apply the Law of Common Region — a shared container, background, or border groups elements regard…
  • Law Of Closure Apply the Law of Closure — the eye completes implied shapes from partial forms.
  • Law Of Continuity Apply the Law of Continuity — the eye follows alignment and unbroken paths.
  • Law Of Figure Ground Apply the Law of Figure-Ground — establish which layer is foreground and actionable versus backgr…