#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