law-of-proximity
owl-listener/designer-skills
Apply spatial closeness to group elements—the most fundamental Gestalt layout principle.
What is law-of-proximity?
The Law of Proximity uses whitespace and spacing to signal which elements belong together, making visual relationships clear without labels or borders. Use this when spacing alone must carry grouping; for container-based grouping use law-of-common-region, and for appearance-based grouping use law-of-similarity.
- Group related elements through tight spacing and separate groups through increased whitespace
- Create visual hierarchy by controlling the ratio of within-group to between-group spacing
- Apply consistent spacing scales (4px, 8px, 16px, 24px, 32px) to make grouping relationships systematic and legible
- Organize form fields, cards, sections, button groups, and data rows using proximity rules
- Communicate structure before relying on color, borders, or typography weight
How to install law-of-proximity
npx skills add https://github.com/owl-listener/designer-skills --skill law-of-proximityHow to use law-of-proximity
- 1.Define a consistent spacing scale for your project (e.g., 4px, 8px, 16px, 24px, 32px increments)
- 2.Identify logical groups of elements in your layout (form fields, card sections, button groups, etc.)
- 3.Apply tighter spacing within groups and larger spacing between groups
- 4.Test proximity relationships by squinting at the layout to verify groups are legible without reading content
- 5.Audit pages where users misread structure and adjust spacing to clarify relationships
Use cases
- Grouping form labels with their input fields by placing them closer together than adjacent fields
- Organizing card content so title, body, and metadata feel cohesive while cards remain separated
- Structuring section headers closer to their content than to the preceding section
- Grouping related action buttons tightly while isolating destructive actions
- Arranging data table rows with tight row padding but larger gaps between rows
- UI/UX designers
- Product designers
- Frontend developers implementing design systems
- Anyone building layouts or interfaces
law-of-proximity FAQ
Use proximity when spacing alone must carry grouping. Use Law of Common Region when you need a visible container (border, background, or panel) to define groups. They reinforce each other but avoid using both for the same grouping task.
No. The key is the ratio of within-group spacing to between-group spacing. Use a consistent scale (4px, 8px, 16px, etc.) so relationships are systematic, but the absolute values depend on your design context.
Squint at the layout. If groups are still legible without reading content, proximity is working. If users misread the structure, proximity is usually the cause—audit and adjust spacing ratios.
No. Borders should not do the work that spacing can do. Proximity through whitespace is more fundamental and creates clearer visual relationships.
Proximity communicates structure before color or type weight. It is the most fundamental layout grouping tool and should be established first, then reinforced with other design properties if needed.
Full instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
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
Related skills
More from owl-listener/designer-skills and the wider catalog.
layout-grid
Define responsive grids with columns, gutters, margins, and breakpoint behavior for consistent page layouts.
loading-states
Design waiting experiences with spinners, skeletons, optimistic updates, and progressive reveal.
localization-design
Design UI that adapts to any language, script, and cultural context without breaking.
metrics-definition
Define UX metrics and KPIs that connect design decisions to measurable outcomes.
micro-interaction-spec
Specify single micro-interactions with trigger, rules, feedback, and loops for engineering handoff.
millers-law
Chunk information into groups of ~4 to reduce cognitive load and improve interface scannability.