Gestalt Principles
Psychological principles describing how the brain organises visual elements into groups and patterns.
Plain English
Gestalt principles explain how the brain automatically groups visual information. The most useful for UI design: proximity (things close together seem related), similarity (things that look alike seem related), continuity (the eye follows lines and curves), closure (the mind completes incomplete shapes), and figure-ground (we perceive things as either the subject or the background). These are not design rules someone invented — they are descriptions of how human perception works. Good UI design works with these principles, not against them.
Technical
Key Gestalt principles for UI: (1) Proximity — use consistent spacing to group related items; larger gaps between unrelated items. (2) Similarity — use consistent visual treatment (colour, shape, size) for functionally similar elements. (3) Continuity — align elements on a shared axis; the eye follows the line. (4) Closure — the mind completes borders; card outlines can be minimal because the eye infers the complete rectangle. (5) Figure-ground — adequate contrast ensures the UI elements are the figure, not lost in the background.
Live Demo
Gestalt Principles
Proximity
Close = grouped
Similarity
Same = related
Closure
Brain fills gaps
Gestalt = how the brain groups visual elements automatically.
Usage
✓ Good usage
Group form fields with 8px vertical gap within a group and 24px between groups — proximity communicates which fields belong together without labels.
✗ Bad usage
Equal spacing between all elements regardless of their relationship — the eye cannot tell which items are grouped and which are separate.
Recommended values
- Proximity: 8px between related items, 24-32px between groups
- Similarity: all primary buttons same size, shape, colour
- Continuity: left-align a list so the eye follows a vertical axis
- Closure: cards can have 1px borders instead of 4px — the eye completes them
- Figure-ground: 4.5:1 minimum contrast ensures content reads as "figure"
Common mistakes
- Inconsistent spacing that accidentally groups unrelated items.
- Inconsistent visual treatment for functionally equivalent elements.
- Ignoring figure-ground contrast until content disappears into the background.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Apply Gestalt proximity to form layout: related fields 8px apart, field groups 24px apart, sections 40px apart. Apply similarity: all primary actions use the same button style. Apply continuity: left-align all content in a list.