---
name: dec-gestalt-principles
description: Gestalt principles of grouping — proximity, similarity, common region, continuity, closure, figure/ground, common fate, prägnanz, uniform connectedness. The visual logic behind how the eye assembles elements into wholes. Use when laying out a screen, deciding what reads as related, designing cards/sections, or diagnosing why a layout feels disorganized.
tags: [gestalt, visual-design, layout, perception, ux, always-on]
---

# Gestalt Principles of Grouping

How the eye assembles individual elements into wholes — the perceptual logic behind layout. Spacing and grouping communicate relationship before any label does.

- **Proximity** — near things are perceived as related. The strongest, cheapest grouping tool: spacing *is* meaning.
- **Similarity** — alike things (color, shape, size) group together.
- **Common Region** — a shared container = shared meaning (cards, panels).
- **Continuity** — the eye follows lines and curves; aligned elements read as a sequence.
- **Closure** — the mind completes incomplete shapes; you can imply form with less.
- **Figure/Ground** — separating subject from background; ambiguity here causes visual strain.
- **Common Fate** — things moving together are seen as a unit (animation as grouping).
- **Prägnanz (Simplicity)** — ambiguity is interpreted in the simplest possible form.
- **Uniform Connectedness** — visually linked elements (a line, a border) read as connected, overriding proximity.

## How to apply

- Group related controls by **proximity** before reaching for borders or boxes — whitespace is the first tool.
- Use **common region** (a card) only when proximity alone isn't enough; borders add visual weight.
- Check **figure/ground**: the primary content must clearly sit above the background, especially on glass/translucent surfaces.
- A layout that "feels off" usually violates proximity or alignment (continuity) — measure the gaps.