Hierarchy is expressed through elevation and surfaces
Aliases: elevation · surface · resting elevation · scrim
What it is
Material treats the interface as surfaces stacked above a resting plane. Hierarchy is not a heavier stroke or a larger type size; it is elevation—how far a surface sits above that plane. Cards, app bars, menus, dialogs, and floating action buttons rest at different elevations; the difference shows up as shadow in light themes and as surface overlays in dark ones. “What sits on what” is a spatial fact, not a decorative weight.
Elevation is a property of the surface, not of a shadow asset. Decide which layer the surface occupies; the shadow is only what that layer looks like under a light. Deepening a shadow as a beautifying filter pretends there is height on a flat plane—z-order, hit testing, and modal scrims will then disagree with the apparent front-to-back order.
Why it happens
Material assumes a light from above. When a surface is raised, it casts onto the surface beneath it; higher elevation spreads and lightens the umbra, and the surface itself may lighten slightly. Resting elevation is where the component lives at idle; a dragged sheet or an opening menu temporarily takes a measured elevation and settles back. The same surface changes height across states; it does not become a different component.
In dark themes, drop shadows nearly vanish, so elevation is kept by surface overlays and a scrim: the lower layer is dimmed, the upper layer keeps its surface color. Without that substitution, a dark UI loses the only remaining channel for stacking. A modal dialog rises and takes a scrim because it must cut off interaction with what is underneath, not merely “look like it is floating.” Two surfaces drawn at the same elevation and allowed to overlap leave the system with no basis for who receives the tap; the model collapses there.
Where it stops holding
Charts, maps, and true 3D scenes already have a depth channel; stacking Material elevation on top of them fights that channel. Restrict elevation to toolbars and sheets, and do not drop-shadow every polyline. A print-like reading surface or a deliberately flat marketing page, if every block is raised, becomes a pile of tiles and elevation stops encoding “this is a card, that is the bar.” On television and other far-viewing distances, fine shadows smear into a dirty halo; switch to a clearer overlay or stroke. Treating Apple’s navigation hierarchy and Material elevation as the same idea also fails: one is parent–child on a stack, the other is surfaces on a z-axis. A detail screen need not sit higher than its list; a dialog must.
Applying it
- Assign a resting elevation to each class of surface and keep it global: content plane lowest, cards and bars in the middle, menus and dialogs highest. Do not add or subtract shadow to match the mood of a page.
- In dark themes, do not copy heavy light-theme shadows; keep the same front-to-back relations with surface overlays and scrims.
- Overlapping surfaces must differ in elevation. Never let two same-height surfaces cover each other’s hit targets.
- Verify by stripping shadows and asking someone new to the UI which layer is on top and who would receive a tap. Every mismatch with the elevation table is decoration posing as height. Repeat in a dark theme to confirm the order still holds when shadows are gone.