Elevation System: Height as a Token

WHY IT EXISTS: Interfaces are flat screens pretending to be physical space. Without a governing rule for height, every designer picks their own shadow values and every developer picks their own z-index. The result is visual chaos: five different card shadows, modals that look lower than the backdrop, and dropdowns that render behind headers. An elevation system exists to unify light source, shadow, and stacking order into a single language so the fake physics feel consistent.

THE MENTAL MODEL: Think of the screen as a table under a single overhead light. Every component is a sheet of paper resting at some height above the wood. The higher the sheet, the longer and softer its shadow. Elevation is not a box-shadow property; it is a height value that automatically determines both how dark the shadow looks and whether the element wins in a stacking contest.

HOW IT WORKS: A design system defines elevation as a set of numbered tokens, often from zero to twenty-four. Each token carries a specific combination of horizontal offset, vertical offset, blur radius, spread, and color opacity. The same token also maps to a z-index value. In code, applying elevation three means the component receives a precise shadow string and a guaranteed layer position. Because the numbers are discrete and limited, teams avoid one-off values.

WHEN TO USE IT: Use elevation when you need to communicate that one surface is floating above another. Common cases include modal dialogs, bottom sheets, hover cards, dropdown menus, and items being dragged. It is also useful for interactive feedback: pressing a button can lower its elevation while raising it on hover to suggest physical response.

WHEN NOT TO USE IT: Skip elevation in strictly flat design languages where shadows violate the aesthetic. Do not add elevation to static containers like simple content sections merely for visual interest; unnecessary shadows increase noise and can trigger performance penalties on low-end devices that struggle with render layers. Also avoid mixing elevation with strong borders or heavy background color shifts that already create enough separation.

ONE CANONICAL EXAMPLE: Material Design popularized this approach with density-independent pixel levels from zero to twenty-four. A resting card sits at one dp, an app bar at four dp, a floating action button at six dp or twelve dp depending on state, and a dialog at twenty-four dp. At each step the shadow grows larger and more diffuse, and the corresponding z-index ensures the dialog always covers the app bar. The token is the source of truth for both optics and stacking.