Gestalt: Spacing Is Syntax

Gestalt proximity principle: elements that are physically close to each other are perceived as belonging to the same group. In forms, the critical ratio is: distance from label to its field must be less than distance from field to the next label. When those two distances are equal, the label appears unanchored — equidistant from two possible "owners."

Three contexts where equal spacing creates the worst grouping problems:

1. Multi-field form groups: the email/password pairing. If password label is equidistant from email input and password input, 30% of users misread it.
2. Settings panels: a label, toggle, and description text. The description should be visually attached to its toggle, not floating between toggles.
3. Data tables with row headers: the header should be visually closer to the cells in its row than to the header above or below it.

The diagnostic: take a screenshot of your UI and blur it until the text is illegible. If you can still identify which labels belong to which fields — the spacing is correct. If it's ambiguous, fix the ratio.

The technical cause was a CSS reset pattern common in component libraries: applying a uniform spacing variable (--space-4: 16px) to all child elements of a form. This flattened the visual hierarchy completely. The label-to-field distance equaled the field-to-next-label distance. At the Gestalt level, the label had two equally probable "owners" — the field above it and the field below it — because proximity to both was identical. The parser in the human visual system resolved the ambiguity by falling through to serial reading, which is slower and more error-prone.

The implementation change also involved updating the design tokens. Instead of --space-4 (16px) applied uniformly, the team introduced two new semantic tokens: --space-in-group: 4px (for label-to-field within a group) and --space-between-groups: 24px (for field-to-next-label between groups). The ratio of 4/24 = 0.17 is well below the 0.5 threshold where ambiguity begins. The token rename was intentional — it encoded the grouping purpose directly in the name, preventing future developers from accidentally collapsing the distinction.

Try the blur test: squint at both forms until the text is blurry. In the ratio version, you can still identify the groupings by the spacing patterns. In the equal version, every element appears as an isolated row with no group membership.

For component-based systems (React, Vue, Svelte), enforce the ratio inside a <FormGroup> wrapper component rather than relying on consumers to use the right tokens. Three implementation notes:

1. Use gap, not margin, in flex/grid form layouts. gap on the container gives you consistent inter-item spacing without margin collapse surprises. Combine with a tight margin-bottom on labels.
2. Horizontal axis matters too. Description text below a toggle should be indented (padding-left: 24px) to appear visually attached to its parent control — proximity works on both axes.
3. The blur test is your QA check. Screenshot the form, apply a CSS blur filter in DevTools (filter: blur(4px) on the form), and verify groupings are still readable. If they're ambiguous blurred, they'll be slow to parse at full resolution.

/* FormGroup component styles */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-inter-group); /* space BETWEEN groups */
}

.form-group__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-intra-group); /* label tight to input */
}