Proximity

Proximity is the Gestalt principle that uses distance to create instant groups. Elements placed close together get perceived as related before the user reads a single label. Elements pushed farther apart get read as belonging to different categories. This happens in the first fraction of a second of viewing any screen. The brain groups first and reads labels second. That is why proximity sits at the top of the design food chain. It explains why Linear's sidebar feels instantly organized while most competitor sidebars feel like lists of random links. It explains why Stripe can display twelve metrics on one dashboard without it feeling like noise. The rule is brutally simple. Tight spacing inside groups. Wide spacing between them. Break that rule and the entire interface starts to fight the user.

Proximity is not generous breathing room added so your design does not feel claustrophobic. It is not the default spacer component your engineers reach for when they cannot decide on layout. It is not a magic fix that works regardless of content quality. Uniform spacing across a screen kills proximity completely. Every item feels equally related to every other item and the user is left to do the grouping work manually. That is the definition of a busy interface. Proximity also fails when it is not paired with similarity. You cannot throw three completely different looking items into a tight cluster and expect the brain to treat them as one unit. The signals conflict and the user feels the tension even if they cannot name it. The principle demands both closeness and shared visual traits to fire on all cylinders.

The cleanest demonstration lives in Linear's sidebar shipped in early 2024. Inbox Today and My Issues sit with 8 pixel gaps between each item. A full 40 pixels of air then separates that group from the Projects section. Another tight cluster follows for Views and Roadmaps. Settings sits alone at the bottom with 64 pixels of isolation. There are zero dividers yet every category boundary reads crystal clear. The team did not add extra UI to communicate hierarchy. They adjusted two spacing values and let human perception do the rest. Stripe Dashboard runs the identical playbook in its overview row. Three key metrics cluster with tight gutters. A wider break. Then three more metrics form their own group. Users navigate the financial data without hesitation because the proximity creates the structure. Figma's inspector panel applies proximity to property groups. Position and size fields sit tight because they relate. The 24 pixel gap to the effects section creates a clear separation.

Notion's page sidebar uses it to divide core pages from private pages from shared pages. The gaps are the only signal the user needs. Apple Health clusters today's activity rings separate from the trends graph with a clear spatial break. The eye knows where one data story ends and the next begins. Vercel groups related deployment settings with tight proximity while isolating the danger zone settings with massive spacing. The user feels the weight difference before they read the warning text. Cursor does this with suggested edits. Related suggestions form a tight block. Alternative approaches sit further down with a clear gap. Amazon's product page glues the price buy button and delivery options into one decision cluster through tight proximity. These examples cross categories yet all obey the same law. Even Gmail threads from 2016 onward stack messages from the same sender with tighter spacing than separate conversations to signal unity at a glance.

Use proximity any time you want the interface to organize itself. Deploy it in navigation bars to separate primary links from secondary ones. Use it in forms to cluster address fields away from billing fields. Apply it in dashboards to create metric zones that scan in one pass. It becomes your best friend in mobile views where you have half the real estate and twice the need for clarity. The best designers set their spacing scales with proximity in mind. They know the tight value and the wide value and they never mix them accidentally. Audit every screen against this rule before you call it done. If related items are not closer than unrelated ones fix it first. Everything else builds on top of this foundation.

Skip proximity when every element on the screen carries equal weight. Avoid it when you are deliberately breaking hierarchy to create surprise or when you want something to pop through isolation. Never default to the same gap value between every component because that erases all grouping signals. If you need to add labels that say things like related items or section header your proximity has already lost the fight. Go back and increase the contrast between your tight and wide values. Do not let proximity fight other principles. A primary button grouped too closely with secondary buttons through proximity will lose its focal point power. The principles compose when respected and fight when ignored.

Nail proximity and your interface reads itself before the user reads a word.