Elevation

A screen is flat. When two elements overlap, nothing in the pixels themselves says which one is on top. A menu opens under a button, and there is no way to tell whether it is covering the content below for a moment or whether it pushed that content aside and took the space.

This matters at the point where someone decides what to do next. If a panel has taken over the screen, they have to close it before anything else will respond. If it is only there to show information, they can ignore it and keep working behind it. Their hand doesn't move until they know which situation they are in.

Pagedeck ran into exactly this. In one of Noa's mockups, the document sharing panel and the document list underneath it were both a white box with a thin border. In user testing, people kept clicking the list behind the panel. They never registered that a panel had opened over it. Theo, reviewing the same screen, had to ask out loud whether the panel was floating above the list or simply attached to the bottom of it.

Elevation answers that question visually. In the physical world an object that sits above a surface casts a shadow onto it, and interfaces borrow that behavior directly: every element gets a height, and every height gets a matching shadow. Nobody has to be told what is in front.

Decide on the heights first, then fix one shadow per height. Shadows aren't chosen element by element as they come up — a team writes a scale and pulls values from it.

Most scales have four to six steps.

1. Level 0 — no shadow, flush with the background. Page content, tables, and dividers live here.
2. Level 1 — barely lifted. Cards and list rows use this: separate from the background, but not obviously floating.
3. Level 3 — things that open when you click. Dropdown menus, autocomplete lists, and tooltips sit at this level.
4. Level 5 and above — things that take over the screen. Modal dialogs and sheets that slide up from the bottom.

Each step's shadow is built from three numbers: how far down it falls, how far it blurs, and how dark it is. If level 1 is 1 pixel down, 2 pixels of blur, black at 8 percent, then level 5 is around 12 pixels down, 24 pixels of blur, black at 16 percent. The higher the step, the further the shadow drops and the wider and fainter it spreads — the same change you see when you lift an object under a lamp.

What matters more than the exact numbers is whether neighboring steps are visibly apart. If the shadow at level 1 and the shadow at level 3 look nearly identical, having two steps buys nothing. It's the same failure as a half-hearted contrast value, which reads as smudge rather than distinction.

Stacking order belongs to the same decision. Shadows alone don't determine which element actually gets drawn on top when two of them overlap, so each step also carries a stacking number. A dropdown that disappears behind a modal is almost always a case of nobody having written that order down.

Elevation is for places where being lifted is itself information. Four cases cover most of it.

1. Cards — making each row of a list read as a separate object you can grab. When splitting the layout into columns isn't enough on its own, a shallow shadow finishes the job.
2. Menus that open — dropdowns and autocomplete lists. The shadow carries the message that this covers the content below temporarily rather than displacing it.
3. Modal dialogs — here the shadow comes with a dimmed overlay across the rest of the screen, because the element also has to communicate that nothing behind it is usable.
4. Pinned elements — a top bar that stays put while the page scrolls, or a button anchored in the corner. These often carry no shadow at rest and grow one the moment content starts passing underneath.

Dark backgrounds are the trap. A black shadow on a near-black surface is invisible, and the whole scale collapses. Dark interfaces express height by lightening the element's own background one step at a time instead. Higher means lighter, so the direction of the rule is unchanged.

As with color, the values live in one place and aren't re-chosen per screen. Without a scale, people eyeball shadows, and the same card ends up with different shadows in different parts of the product.

"Can you bump this card up one elevation step? Right now it looks glued to the background."

A request for more shadow so the card reads as lifted.

"The toast is going behind the modal. I think we need to look at the elevation order again."

The stacking order is wrong, so a notification that should be on top is hidden.

"In dark mode let's do elevation with lightness instead of shadow."

Shadows don't register on a dark background, so the technique has to change.

At Pagedeck the word comes up most often during design system reviews. Noa goes through the product screens and collects elements that serve the same purpose but carry different shadows. Document cards and template cards are both list rows, and if one of them has a shadow twice as heavy, users read templates as the more important thing.

With Theo, the conversation uses step names rather than values. When Noa says "this one is level 3," Theo applies the shadow already defined for that step, and when the values need adjusting later there's only one place to change them.

The most common mistake is treating shadow as decoration. A flat-looking screen does improve when shadows go in, so the assumption is understandable. But a shadow is a claim about height, and putting one on something that isn't lifted tells users something untrue. When the page body, the cards, and the modal all carry shadows, the three read as the same layer — and the signal that a modal has seized the screen is gone.

The other one is assuming that a darker shadow stands out more. This is an attempt to build visual hierarchy out of shadow, and heavy shadows don't lift an element so much as dirty its edges. When something needs to stand out, size and color open a wider gap first, and they do it without making a claim about depth that the layout does not support. Escalating shadows one step at a time ends with every element at the top of the scale, which is the same as having one step.