E·All Concepts
13
E

Elevation

Height as hierarchy.

1 min read·Community

Elevation describes the position of a surface on the Z-axis in a layered UI system — the idea that components at different heights carry different visual weights, interaction priorities, and semantic meanings.

The Thought

Google's Material Design introduced elevation as a first-class design primitive, assigning specific shadow values to specific component types (a card at 2dp, a dialog at 24dp, a tooltip at 8dp). The logic was rigorous: elevation communicated the relative importance of components and the order in which they demanded interaction. A dialog at high elevation blocks access to everything below it — elevation as attention control.

Elevation without a consistent light model becomes arbitrary. Material Design specified that light came from directly above, casting shadows downward. This consistency meant that shadows were predictable: a surface 2dp high cast a small, tight shadow; a surface 24dp high cast a larger, softer one. The system had internal physics.

In dark-mode design, shadows become less effective (they disappear against dark backgrounds) and elevation is more effectively communicated through surface brightness. This is the principle used in Material You's dark-mode elevation system: surfaces higher in the stack get slightly brighter, using light as a metaphor for closeness rather than shadow as a metaphor for height.

Key Principles
  1. 01

    Elevation communicates interaction priority — what's on top should matter most.

  2. 02

    Consistent light source direction is the foundation of a credible elevation system.

  3. 03

    In dark mode, use brightness increase rather than shadows to convey elevation.

  4. 04

    Reserve high elevation for elements that demand exclusive attention: modals, alerts.

  5. 05

    Avoid elevation inflation — if everything is elevated, nothing is elevated.

Related