Closure — the eye completes incomplete shapes, so icons and outlines still read even with gaps; you don't need every line drawn for a shape to register.
Similarity — elements sharing a property (color, shape, size) read as one group; recoloring rows instantly splits a flat grid into Navigation, Content, and Actions.
Continuity — the eye follows the smoothest path, so aligning items on a shared axis lets it flow, while scattered placement forces it to jump around erratically.
Figure-Ground — blurring and dimming the background pushes a modal forward as the focal 'figure', which is what makes a dialog feel deliberate instead of floating.
Common Region — a shared border or container groups elements even when they sit far apart; wrapping settings in cards signals belonging without moving them closer.
These laws are pre-attentive: the brain groups and completes automatically, so working with them makes a layout feel instantly organized rather than busy.
Do / Don't
Do: Give related items a shared property — color, shape, or size — so they read as one group at a glance.
Do: Align related controls on a common axis so the eye flows down a single clean path.
Do: Wrap loosely-placed elements in a bordered card when proximity alone can't group them.
Don't: Scatter navigation or list items at varied angles and positions — the eye jumps and nothing reads as connected.
Don't: Lean on a modal alone without dimming what's behind it; it competes with the background instead of standing out.
The Design System Blueprint
An 11-page visual guide to consistent, scalable UI: colors, typography, spacing, components, motion.
