The Ten
Laws.

Law of Propinquity

Elements placed close to one another are perceived as a single, unified group sharing a common relationship.

[ Image ]               [ Image ]
[ Heading 1 ]           [ Heading 2 ]
[ Body Paragraph 1 ]    [ Body Paragraph 2 ]

In the interfaceMargins and padding create distinct content blocks — the gap between a heading and its body is kept smaller than the gap between two separate articles.

Shared visual traits

Objects sharing colour, shape, size, orientation or weight are automatically grouped by the brain.

( ● ) Primary    ( ● ) Primary    ( ○ ) Secondary

In the interfaceConsistent button languages: primary actions share one fill and font; secondary links are outline-only.

Completing the gap

The eye automatically fills in the missing parts of an incomplete structure to perceive a whole, recognisable shape.

──────┐     ┌──────
      │     │   --> the mind treats this
      │     │       segmented viewport
──────┘     └──────   as a solid square

In the interfaceLoading wheels, abstract brand icons, and dashboard progress arcs — also a carousel clipping a card at the edge to signal more off-screen.

Object vs background

The mind instinctively separates foreground focal elements (the figure) from their supporting background (the ground).

┌────────────────────────────────────┐
│ Background content (dimmed)         │
│     ┌──────────────────────┐        │
│     │      MODAL WINDOW     │  <-- figure
│     │   [ Confirm Action ]  │        │
│     └──────────────────────┘        │
└────────────────────────────────────┘

In the interfaceLightbox overlays and system dialogs: the app layer is desaturated, darkened or blurred via backdrop-filter, pushing the modal forward.

Good Continuation

The eye naturally follows the smoothest, unbroken path or alignment vector rather than sharp, jagged changes in direction.

Step 1 (○)─────── Step 2 (○)─────── Step 3 (●)

In the interfaceLinear multi-step registration timelines, drop-downs aligned to a clean vertical grid, and vertical timelines in activity feeds.

Enclosure

Items enclosed within a clearly defined boundary are perceived as a distinct unit — overriding conflicting proximity rules.

┌──────────────────┐  ┌──────────────────┐
│ User A Info      │  │ User B Info      │
│ [Edit]  [Delete] │  │ [Edit]  [Delete] │
└──────────────────┘  └──────────────────┘

In the interfaceFeed cards, profile boxes and dashboard widgets — even identical button labels gain ownership from the container that wraps them.

Emphasis

A single element that is visually prominent or radically different from its surroundings is the first thing you look at.

[ Standard ]   [ POPULAR ● ]   [ Enterprise ]

In the interfacePricing matrices where the middle tier is scaled up, given a high-contrast colour, and badged "Most Popular" so the eye lands there first.

Physical linkage

Elements connected by lines, arrows or shared shading are perceived as more strongly related than those grouped by proximity or similarity alone.

[Tab A]═══[Tab B]   [Tab C]
   ║
[Active Content]

In the interfaceTab architectures where a solid accent line links the active pill directly to its parent viewport, proving ownership.

Prägnanz · Simplicity

The brain prefers ambiguous or complex stimuli to be read in their simplest, most symmetric and balanced interpretation.

┌───────────────┬───────────────┐
│   Left Col    │   Right Col   │  <-- balanced
│   [Content]   │   [Content]   │      50 / 50
└───────────────┴───────────────┘

In the interfaceBalanced multi-column grids, centred landing layouts and proportional geometry blocks — minimising the work to read a layout.

Shared movement

Elements that move in the same direction, at the same velocity, or along the same vector are perceived as highly related.

[Item 1] ───> slide right
[Item 2] ───> slide right
[Item 3] ───> slide right

In the interfaceAccordion panels, nested drawers and swipe cards — animating in unison along a clear axis reveals a single structural branch.