Proximity is the design principle stating that elements placed close to each other are perceived as related, while elements separated by more space are read as belonging to different groups. In design fundamentals, it turns spacing into a structural tool: before a viewer reads a single word, distances already tell them which label, image and button belong together.
The principle comes from the Gestalt law of proximity, one of the grouping laws described by perceptual psychology in the early twentieth century. It works together with alignment, contrast, repetition and whitespace, and it is often the cheapest way to clarify a layout, because it requires no extra lines, boxes or colors.
How proximity shapes perception
Proximity works because the visual system groups nearby elements automatically to reduce complexity. The grouping happens in the first moments of viewing, before conscious reading, so it strongly shapes how people interpret a page, a form or a poster.
What matters is relative distance, not absolute distance. Two items 16 pixels apart look related if their neighbors are 48 pixels away, but unrelated if everything else is 8 pixels apart. Designers therefore think in terms of a spacing ratio between inner and outer gaps.
A useful rule is that the space inside a group should be clearly smaller than the space between groups, often by a factor of about two or more. When the two values are too similar, the eye cannot decide where one group ends, and the layout appears as an undifferentiated list.
Typical spacing relationships in layouts
Proximity is applied through a spacing system with a few consistent steps, frequently built on a 4- or 8-point grid. The next table shows common relationships in screen design; values vary with type size and density.
| Relationship | Typical gap | Purpose |
|---|---|---|
| Label to its input field | 4 to 8 px | Binds the label to the correct field |
| Between fields in one group | 16 to 24 px | Separates fields while keeping the group |
| Between field groups | 32 to 48 px | Marks a new section of the form |
| Heading to the content it introduces | Smaller than the gap above it | Attaches the heading to what follows |
| Caption to its image | 4 to 12 px | Prevents the caption from floating free |
| Between page sections | 48 to 96 px or more | Signals a major change of topic |
The heading rule deserves particular attention: a heading should sit closer to the text below it than to the text above it. Equal spacing above and below makes headings look detached and weakens the visual hierarchy.
Proximity compared with other grouping principles
Proximity is one of several ways to show that things belong together. It is usually the lightest and least intrusive option, but it can be overridden by stronger cues.
| Principle | Grouping cue | Strength | Visual cost |
|---|---|---|---|
| Proximity | Shorter distance between elements | Strong at first glance | None, uses space only |
| Similarity | Shared color, shape or size | Strong, can override proximity | Low |
| Common region | Shared background or border | Very strong | Adds boxes and visual weight |
| Connectedness | Lines or connectors between items | Very strong | Adds lines and clutter |
| Alignment | Shared edges or axes | Moderate | None, uses position only |
In practice, common region and connectedness overpower proximity: a card border groups its contents even if the spacing is poor. Experienced designers try proximity first and add borders or background panels only when space alone cannot carry the structure.
Applying proximity in practice
Applying proximity starts with deciding the content structure and only then assigning distances. Spacing that is chosen element by element, without a plan, tends to drift into accidental groupings.
| Situation | Proximity-based solution | Result |
|---|---|---|
| Long form with many fields | Cluster related fields, widen gaps between clusters | Form feels shorter and easier to scan |
| Product card with price and button | Keep price and action together, separate them from the description | The purchase path reads as one unit |
| Navigation with many links | Group links by category with larger gaps | Fewer separators are needed |
| Dense dashboard | Use consistent inner and outer spacing tokens | Panels read as distinct modules |
| Print brochure | Tie captions to images, separate columns clearly | Readers connect text and pictures correctly |
In design systems, proximity is encoded as named spacing tokens such as small, medium and large steps. Tokens keep relationships consistent across screens, so a gap of a given size always means the same level of relatedness.
Common mistakes with proximity
Proximity errors are easy to make because they rarely look obviously broken; they simply make content harder to interpret.
- Uniform spacing everywhere: equal gaps remove all grouping information from the layout.
- Labels halfway between fields: users cannot tell which input a label describes.
- Floating headings: headings with equal space above and below lose their connection to the content.
- Boxes instead of space: adding borders to fix poor spacing increases visual noise.
- Accidental groups: unrelated items placed close together imply a relationship that does not exist.
- Responsive collapse: gaps that shrink uniformly on small screens can erase the difference between inner and outer spacing.
A plain-language summary
Proximity means that things placed close together seem to belong together. If you see three people standing in a tight circle and one person standing far away, you assume the three are a group.
Designers use the same instinct on pages and screens. They move related items closer and leave more room between unrelated ones. Space itself becomes the organizer, so readers understand the structure without needing lines or boxes.
An example from practice
A team redesigns a checkout form with fourteen fields that all sit 24 pixels apart. Usability sessions show that people skip the apartment number field and confuse the billing address with the delivery address, because nothing separates the two blocks.
The designer reorganizes the form into four groups: contact details, delivery address, billing address and payment. Labels now sit 6 pixels above their fields, fields within a group are 16 pixels apart, and groups are separated by 48 pixels with a short heading placed close to the first field of each group.
No borders or background panels are added. In the next round of testing, participants complete the form with fewer corrections and less hesitation, and several describe it as shorter, even though it contains exactly the same fields.