---
title: "Law of Proximity"
source: "/reference/law-of-proximity"
description: "Items placed near one another are commonly read as a group, even when no border connects them."
---
# Law of Proximity

Items placed near one another are commonly read as a group, even when no border connects them.



### Principle

Items placed near one another are commonly read as a group, even when no border connects them.

### Why it matters

Spacing is structural information. A small gap says that elements belong together; a larger gap suggests a new unit or topic. When spacing does not reflect semantic relationships, users must rely on labels and careful reading to recover the intended structure. This becomes especially costly in forms, data-dense dashboards, repeated rows, and mobile layouts where boundaries are sparse.

### Deeper design interpretation

Spacing carries meaning before users read labels. When two elements sit close together, the interface implies that they belong to the same local unit. When the gap grows, the interface implies a boundary. This makes spacing a form of syntax: it expresses relationships through rhythm.

Proximity failures are especially costly in repeated structures because users build expectations after only a few examples. If helper text sometimes sits closer to the next field than to its own input, or if section gaps are indistinguishable from row gaps, users must repeatedly stop and parse ownership. On mobile, this becomes more pronounced because horizontal relationships disappear and the vertical rhythm carries nearly all of the structure.

For Layr, the review should focus on **relative spacing** rather than arbitrary pixel values. A dense enterprise table can use compact distances and still communicate structure clearly as long as within-group spacing is consistently tighter than between-group spacing.

### What the agent should reason about

Measure bounding boxes and compare spacing patterns across equivalent relationships. Look for exceptions to the local rhythm rather than assuming a universal scale. The strongest finding exists when spatial proximity points to the wrong semantic owner.

When a design system exposes spacing tokens, use them as evidence of intended rhythm. One-off values are relevant only when they create a visible structural mismatch.

### Common failure patterns

- Helper or error copy is visually closer to the next field than the field it describes.
- Row actions sit closer to the neighboring row than to their own record.
- Section spacing equals internal component spacing, flattening hierarchy.
- Mobile stacking collapses previously separate groups into one continuous column.
- A CTA is placed closer to descriptive content than to the form or object it submits.

### Audit questions

- Which elements appear to belong together before reading their labels?
- Does the spacing hierarchy match the semantic hierarchy?
- Are repeated relationships represented with repeated intervals?
- Does responsive reflow preserve ownership and grouping?

### Example agent finding

> **Medium — Validation text appears to belong to the next field.** The password error sits 20px below the password input and only 8px above the confirmation label. Reduce the field-to-error gap and increase the gap before the next field so the spatial relationship matches the actual validation owner.

### Agent directive

> Compare spatial grouping with semantic grouping. Nearby elements should usually be related, and related elements should not be separated by gaps that imply a different hierarchy.

### Apply this when

- Forms, lists, cards, tables, navigation groups, settings, metadata blocks, and mobile stacks.
- Repeated patterns where label-to-value or control-to-description association depends on spacing.

### Observable signals

- The gap between unrelated sections is similar to the gap within a component.
- A helper message sits closer to the next field than to the field it explains.
- An action is visually closer to the wrong content block.
- Responsive layouts collapse previously distinct groups into one continuous stack.
- Spacing tokens are used inconsistently for equivalent relationships.

### Recommended actions

- Use a smaller spacing interval inside a group and a larger interval between groups.
- Keep labels, descriptions, validation, and controls spatially associated.
- Preserve grouping cues at every breakpoint.
- Prefer systematic spacing tokens over one-off pixel values when the design system supports them.

### Do not over-apply

Do not require dramatic spacing differences. Dense professional interfaces may use narrow intervals throughout. The relevant question is whether the relative spacing still communicates relationships reliably.

### Example

**Weak:** Three form fields use 24px between label and input, while different form sections are also separated by 24px, making the page read as one undifferentiated block.

**Stronger:** Field internals use a compact rhythm while section boundaries receive a clearly larger break and a heading.

### Evaluation notes

- **Default severity:** Medium in forms and actions; low to medium for scanability issues.
- **Typical confidence:** High when distances can be measured.
- **Primary evidence:** Bounding boxes, computed spacing, responsive screenshots, DOM hierarchy.
- **Related rules:** Law of Common Region, Law of Similarity, Chunking, Cognitive Load

### References

- [Laws of UX — Law of Proximity](https://lawsofux.com/law-of-proximity/)

## Related rules

- [Law of Common Region](/__layr/pages/reference/law-of-common-region.md)
- [Law of Similarity](/__layr/pages/reference/law-of-similarity.md)
- [Chunking](/__layr/pages/reference/chunking.md)
- [Cognitive Load](/__layr/pages/reference/cognitive-load.md)

## Agent guidance

Review criteria, the finding contract a report must use, and worked examples.

Established principle; Layr interpretation and agent guidance. Category: Perception & Visual Hierarchy.

## Retrieve
- Canonical page: https://layr.design/reference/law-of-proximity
- Markdown for agents: https://layr.design/__layr/pages/reference/law-of-proximity.md
- Reference map: https://layr.design/llms.txt
- Route index: https://layr.design/__layr/routes.toon

## Rule object
```yaml
rule:
  id: "law-of-proximity"
  title: "Law of Proximity"
  category: "Perception & Visual Hierarchy"
  origin: established
  canonical_url: "https://layr.design/reference/law-of-proximity"
  principle: "Items placed near one another are commonly read as a group, even when no border connects them."
  directive: "Compare spatial grouping with semantic grouping. Nearby elements should usually be related, and related elements should not be separated by gaps that imply a different hierarchy."
  applies_when:
    - "Forms, lists, cards, tables, navigation groups, settings, metadata blocks, and mobile stacks."
    - "Repeated patterns where label-to-value or control-to-description association depends on spacing."
  observable_signals:
    - "The gap between unrelated sections is similar to the gap within a component."
    - "A helper message sits closer to the next field than to the field it explains."
    - "An action is visually closer to the wrong content block."
    - "Responsive layouts collapse previously distinct groups into one continuous stack."
    - "Spacing tokens are used inconsistently for equivalent relationships."
  audit_questions:
    - "Which elements appear to belong together before reading their labels?"
    - "Does the spacing hierarchy match the semantic hierarchy?"
    - "Are repeated relationships represented with repeated intervals?"
    - "Does responsive reflow preserve ownership and grouping?"
  recommended_actions:
    - "Use a smaller spacing interval inside a group and a larger interval between groups."
    - "Keep labels, descriptions, validation, and controls spatially associated."
    - "Preserve grouping cues at every breakpoint."
    - "Prefer systematic spacing tokens over one-off pixel values when the design system supports them."
  avoid_when:
    - "Do not require dramatic spacing differences. Dense professional interfaces may use narrow intervals throughout. The relevant question is whether the relative spacing still communicates relationships reliably."
  common_failure_patterns:
    - "Helper or error copy is visually closer to the next field than the field it describes."
    - "Row actions sit closer to the neighboring row than to their own record."
    - "Section spacing equals internal component spacing, flattening hierarchy."
    - "Mobile stacking collapses previously separate groups into one continuous column."
    - "A CTA is placed closer to descriptive content than to the form or object it submits."
  evidence_types:
    - "Bounding boxes"
    - "computed spacing"
    - "responsive screenshots"
    - "DOM hierarchy"
  default_severity: "Medium in forms and actions; low to medium for scanability issues."
  typical_confidence: "High when distances can be measured."
  related_rules:
    - { id: "law-of-common-region", title: "Law of Common Region", url: "https://layr.design/reference/law-of-common-region" }
    - { id: "law-of-similarity", title: "Law of Similarity", url: "https://layr.design/reference/law-of-similarity" }
    - { id: "chunking", title: "Chunking", url: "https://layr.design/reference/chunking" }
    - { id: "cognitive-load", title: "Cognitive Load", url: "https://layr.design/reference/cognitive-load" }
```

## What to reason about
Measure bounding boxes and compare spacing patterns across equivalent relationships. Look for exceptions to the local rhythm rather than assuming a universal scale. The strongest finding exists when spatial proximity points to the wrong semantic owner. When a design system exposes spacing tokens, use them as evidence of intended rhythm. One-off values are relevant only when they create a visible structural mismatch.

## Routing
Route a review here when the evidence is primarily visual: grouping, emphasis, state differentiation, alignment, salience, relationship, or scan hierarchy. Pair these rules with accessibility checks when color, contrast, focus, or motion affects perception.

## Review procedure
For every finding:
1. Identify the exact component, state, route, or interaction.
2. State the observable evidence.
3. Name the principle that applies.
4. Explain the user consequence in the current context.
5. Estimate severity from the consequence, frequency, and reversibility.
6. Recommend the smallest change that addresses the issue while preserving the product's existing design system.
7. Lower confidence when intent, frequency, audience, device, or product constraints must be inferred.
8. Do not produce generic advice such as "improve hierarchy" or "make this clearer" without specifying what is wrong and why.

## Finding contract — emit exactly this shape
```yaml
finding:
  rule_id: string
  location: string
  evidence:
    - observable fact
  impact: string
  severity: low | medium | high | critical
  confidence: low | medium | high
  recommendation:
    change: string
    rationale: string
    preserve:
      - existing design-system behavior
      - valid product constraints
```

## Example finding for this rule
Medium — Validation text appears to belong to the next field. The password error sits 20px below the password input and only 8px above the confirmation label. Reduce the field-to-error gap and increase the gap before the next field so the spatial relationship matches the actual validation owner.

## Code reference

The same principle as markup. Compare the structure, not the class names.

```html
<!-- weak -->
<div class="example-ui example-ui-weak">
  <div class="scene-chrome">
    <span class="scene-chrome-app">Checkout</span>
    <span class="scene-chrome-view">Delivery details</span>
  </div>
  <div class="scene-body">
    <div class="scene-panel scene-panel-flush">
      <span class="scene-panel-title">Contact details</span>
      <span class="scene-label">Full name</span>
      <span class="scene-gap" style="height:24px">
        <span class="scene-gap-rule"></span>
        <span class="scene-gap-label">24px</span>
      </span>
      <span class="scene-input">Maya Chen</span>
      <span class="scene-gap" style="height:24px">
        <span class="scene-gap-rule"></span>
        <span class="scene-gap-label">24px</span>
      </span>
      <span class="scene-label">Email</span>
      <span class="scene-gap" style="height:24px">
        <span class="scene-gap-rule"></span>
        <span class="scene-gap-label">24px</span>
      </span>
      <span class="scene-input">maya@example.com</span>
      <span class="scene-gap" style="height:24px">
        <span class="scene-gap-rule"></span>
        <span class="scene-gap-label">24px</span>
      </span>
      <span class="scene-label">Postal code</span>
      <span class="scene-gap" style="height:24px">
        <span class="scene-gap-rule"></span>
        <span class="scene-gap-label">24px</span>
      </span>
      <span class="scene-input">94110</span>
      <span class="scene-note">One 24px rhythm inside a field and between sections</span>
    </div>
  </div>
</div>
```

```html
<!-- stronger -->
<div class="example-ui example-ui-strong">
  <div class="scene-chrome">
    <span class="scene-chrome-app">Checkout</span>
    <span class="scene-chrome-view">Delivery details</span>
  </div>
  <div class="scene-body">
    <div class="scene-panel scene-panel-flush">
      <span class="scene-panel-title">Contact details</span>
      <span class="scene-label">Full name</span>
      <span class="scene-gap" style="height:8px">
        <span class="scene-gap-rule"></span>
        <span class="scene-gap-label">8px</span>
      </span>
      <span class="scene-input">Maya Chen</span>
      <span class="scene-gap" style="height:16px">
        <span class="scene-gap-rule"></span>
        <span class="scene-gap-label">16px</span>
      </span>
      <span class="scene-label">Email</span>
      <span class="scene-gap" style="height:8px">
        <span class="scene-gap-rule"></span>
        <span class="scene-gap-label">8px</span>
      </span>
      <span class="scene-input">maya@example.com</span>
      <span class="scene-gap" style="height:40px">
        <span class="scene-gap-rule"></span>
        <span class="scene-gap-label">40px</span>
      </span>
      <span class="scene-section-head">Delivery</span>
      <span class="scene-gap" style="height:16px">
        <span class="scene-gap-rule"></span>
        <span class="scene-gap-label">16px</span>
      </span>
      <span class="scene-label">Postal code</span>
      <span class="scene-gap" style="height:8px">
        <span class="scene-gap-rule"></span>
        <span class="scene-gap-label">8px</span>
      </span>
      <span class="scene-input">94110</span>
      <span class="scene-note">8px inside a field · 40px and a heading between sections</span>
    </div>
  </div>
</div>
```

```css
/* declarations these studies depend on */
.example-ui { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 17rem; overflow: hidden; border: var(--border-thin) solid var(--color-border-strong); background: var(--color-background); color: var(--color-text); font-size: var(--text-xs); line-height: var(--leading-snug); }
.example-ui .scene-chrome { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: var(--border-thin) solid var(--color-border-strong); background: var(--color-surface); }
.example-ui .scene-chrome-app { font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.example-ui .scene-chrome-view { color: var(--color-text-tertiary); font-size: var(--text-2xs); }
.example-ui .scene-body { display: grid; align-content: start; gap: var(--space-3); min-width: 0; padding: var(--space-3); }
.example-ui .scene-body:has(> .scene-panel:only-child) { align-content: stretch; }
.example-ui .scene-panel { display: grid; align-content: start; justify-items: start; gap: var(--space-2); min-width: 0; padding: var(--space-3); border: var(--border-thin) solid var(--color-border-strong); background: var(--color-surface-raised); }
.example-ui .scene-panel-flush { gap: 0; }
.example-ui .scene-panel-flush .scene-input, .example-ui .scene-panel-flush .scene-section-head { width: 100%; }
.example-ui .scene-panel-title { font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-heading); }
.example-ui .scene-note { width: 100%; padding-top: var(--space-2); border-top: var(--border-thin) solid var(--color-border-subtle); color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: var(--text-2xs); line-height: var(--leading-snug); }
.example-ui .scene-label { color: var(--color-text-secondary); font-size: var(--text-2xs); }
.example-ui .scene-input { display: flex; align-items: center; min-height: var(--space-8); min-width: 0; padding: 0 var(--space-2); border: var(--border-thin) solid var(--color-border-strong); background: var(--color-surface-raised); color: var(--color-text); overflow-wrap: anywhere; }
.example-ui .scene-gap { display: flex; align-items: center; gap: var(--space-2); width: 100%; }
.example-ui .scene-gap-rule { flex: 1; align-self: stretch; border-top: var(--border-thin) dashed var(--color-border-strong); border-bottom: var(--border-thin) dashed var(--color-border-strong); }
.example-ui .scene-gap-label { color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: var(--text-2xs); }
.example-ui .scene-section-head { padding-top: var(--space-2); border-top: var(--border-thin) solid var(--color-border-strong); font-size: var(--text-sm); font-weight: 600; }
.example-ui { min-height: 15rem; }

/* resolved values */
:root {
  --border-thin: 1px;
  --font-mono: "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --leading-snug: 1.35;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-8: 2rem;
  --text-2xs: 0.6875rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --tracking-heading: -0.025em;
  --tracking-label: 0.06em;
}
```

## Weak vs stronger
- Weak: Three form fields use 24px between label and input, while different form sections are also separated by 24px, making the page read as one undifferentiated block.
- Stronger: Field internals use a compact rhythm while section boundaries receive a clearly larger break and a heading.

## Reporting rules
- Report only what the interface shows as observable evidence; phrase psychological or motivational effects as possible consequences.
- Returning no finding is a valid result when evidence is insufficient.