D·All Concepts
11
D

Depth

The illusion of the third dimension.

1 min read·Community

Depth in two-dimensional design is the simulation of the Z-axis — using shadow, overlap, scale, blur, and surface treatment to suggest that elements occupy different layers in space.

The Thought

Depth is a trust signal. Interfaces that use depth well feel considered and physically grounded — as if the UI exists in a coherent space with physical properties. Material Design built its entire visual language around the metaphor of physical surfaces: paper sheets that cast shadows, stack on top of each other, and respond to light from above. This metaphor gives the system an internal logic that users can intuitively understand.

There are two fundamentally different approaches to depth in screen design. The first is additive: use shadows and elevation to lift elements above the background. The second is subtractive: use surface shifts (darker or lighter backgrounds) to create the perception of depth through tonality alone, without shadows. The Kinetic Gallery design system you're reading this on uses the subtractive approach — the obsidian stack of surfaces creates depth without a single drop shadow.

Depth also communicates z-index priority — what is on top of what. A modal that appears above the page content uses depth to communicate its temporal precedence: it demands attention before the content behind it can be accessed. This is depth as wayfinding, not just aesthetics.

Key Principles
  1. 01

    Consistent light source direction creates a believable spatial metaphor.

  2. 02

    Shadows should be tinted with the ambient colour, not default grey.

  3. 03

    Depth through tonal surface shifts is more versatile than depth through shadows alone.

  4. 04

    Elevation hierarchy should match interaction hierarchy — what floats should matter most.

  5. 05

    Too many layers creates visual noise; most interfaces need no more than three distinct depths.

Related