Objects that are close together are perceived as related. Objects that are far apart are perceived as separate. Spatial distance is a meaning signal — and it fires before any conscious reading begins.
The Law of Proximity is one of the original Gestalt principles, and the most immediate. It operates before colour, before labels, before any deliberate reading — in under 100 milliseconds. When two elements are close together, the brain automatically groups them. When they are far apart, the brain automatically separates them. This is not an inference users make; it is a perceptual reflex that happens whether they intend it or not.
The practical consequence for design is precise: every gap in your layout is communicating a relationship — or its absence. A label that sits equally far from the field above it and the field below it is communicating ambiguity. A button that is far from the content it acts on is perceived as less directly connected to it. An error message at the top of a form is perceived as belonging to the form as a whole, not to the specific field that caused it.
Proximity is also the cheapest design tool available. It costs nothing — no new colour, no new component, no visual treatment. Only the intentional use of space. The difference between a form that confuses users and one that communicates its structure instantly is often a matter of 15 pixels redistributed in the right direction.
“Elements near each other tend to be seen as part of a group, while those farther apart are seen as separate — regardless of any other visual property.”
— Max Wertheimer, Gestalt Psychology, 1923
Ask a designer to point to a proximity error in a live product and they will usually struggle. Ask them to look at a form where every gap — between label and input, between input and next label — is the same value, and they will eventually see that each label floats ambiguously between two fields. But they will have to look for it. Users don't look for it. They just experience the confusion it produces without knowing why.
The fix is asymmetric spacing, and it is one of the most impactful micro-decisions in form design. A label that sits 5px from its input and 28px from the previous input is unambiguously grouped with its field. Users perceive each label-input pair as a single unit before reading anything. The form's structure is visible from spacing alone.
Look at both forms and notice where your eye groups the label. In the bad form, “Email address” sits exactly midway between the Name input above and the Email input below — perceptual ambiguity. In the good form, the label is unambiguously attached to the field below it. The information is identical. Only the spacing changed.
Error summary boxes at the top of a form are a direct proximity failure. “Email address is invalid” placed above four form fields is spatially equidistant from all of them. Users read the error, then must scan every field to find the one it refers to. This is a two-step process where proximity could make it zero steps.
An inline error — placed 5px below the field it refers to, in the same red that the field border has turned — requires no scanning. Proximity identifies the cause before the user reads anything. The field and its error are one visual unit, exactly as the label and field are one visual unit in the good form above.
Both demos apply the same principle: small gap signals “this belongs to what's above it.” The hint on the password field in Demo 1 and the error messages in Demo 2 use identical proximity logic — 5px below their field, belonging unambiguously to it. Users who have learned that proximity means belonging read both correctly without instruction.
Proximity problems in real products almost always stem from uniform spacing — applying the same gap value to every element regardless of the relationships being communicated. The fix is not a design system change or a new component. It is a spacing audit: for every label, hint, error, action, or caption in your product, ask — is this element closer to the thing it belongs to than to anything else? If the answer is no, move it.
The rule is simple enough to apply anywhere: tight spacing (4–6px) within a group, generous spacing (20–32px) between groups. Labels hug their inputs. Error messages hug their fields. Hints hug their inputs. Captions hug their images. Section headers have more space above them than below. The entire spatial hierarchy of a form, a card, or a settings page can be communicated through spacing alone — before a word is read.
Wertheimer, M. (1923). Laws of organization in perceptual forms. Psychologische Forschung, 4, 301–350. · Köhler, W. (1929). Gestalt psychology. Liveright. · Ware, C. (2004). Information visualization: Perception for design. Morgan Kaufmann.