Screens are stacks, not sheets
An interface pretends to be flat, but users never read it that way. Menus open over content, modals float above pages, toasts slide in on top of everything. Every screen is a stack of layers, and depth is how the design admits it.
When a design communicates its layers well, users don’t think about them at all — the dropdown obviously belongs to the button that opened it, the dialog obviously blocks what’s behind it. When it doesn’t, things look ambiguous: is this panel part of the page, or covering it? Can the content behind it still be clicked?
The same open dropdown and toast, with and without elevation cues.
Depth is information
Elevation isn’t decoration — it answers real questions. What is temporary and what is permanent? What will disappear when clicked away? What belongs to what?
A card’s soft shadow says “this is a grouped, self-contained thing.” A dropdown’s deeper shadow says “this floats above and will close.” A modal’s heavy shadow plus a dimmed page says “deal with this first.” Users learned this grammar from years of interfaces; a design that speaks it clearly feels obvious without explanation.
The physical metaphor
All depth cues borrow from one physical scene: sheets of paper hovering over a desk, lit from above. Closer sheets cast bigger, softer shadows. Higher sheets cover lower ones. Nothing passes through anything.
The metaphor supplies rules for free. Two elements at the same height shouldn’t overlap. An element can’t cast a shadow upward. A thing that floats higher should also feel lighter and more temporary. Designs that break the physics — shadows in inconsistent directions, “floating” panels that scroll with the page — feel subtly wrong even to users who can’t say why.
Lift the card. The side view shows the height; the shadow writes it down.
Restraint is part of the system
Depth only communicates if it’s scarce. When every element casts a shadow, elevation stops meaning “above” and starts meaning nothing — the design just looks embossed.
The lessons in this module build the grammar piece by piece: how light direction works, how shadows encode height, how to create depth without shadows at all, and how to end up with a small elevation system instead of a pile of one-off box-shadows.
The takeaway
Depth is a language, not a style. Interfaces are stacks, and elevation cues — shadows, overlaps, scrims, surface color — tell users what floats, what blocks, and what belongs together. Keep the physics consistent and the layers scarce, and the stacking order explains itself.