Elevation
A system of layers that says what sits above what, expressed visually and enforced in code.
Definition
Elevation is the apparent distance of a surface from the background. It is communicated through shadow, surface lightness or both, and it should map to a documented set of levels rather than to arbitrary z-index values.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
A working elevation system
| Level | Used by | Light mode | Dark mode |
|---|---|---|---|
| 0 | Page background | Base surface | Base surface |
| 1 | Cards, raised panels | Very subtle shadow | Surface one step lighter |
| 2 | Sticky headers, dropdowns | Small shadow | Two steps lighter |
| 3 | Popovers, tooltips | Medium shadow | Three steps lighter |
| 4 | Modals and dialogs | Large shadow plus scrim | Four steps lighter plus scrim |
| 5 | Toasts and critical alerts | Large shadow | Highest surface |
In practice
Dark mode elevation by lightness
ThemingShadows are almost invisible against dark surfaces. Raising elevation by lightening the surface is the standard approach, and it needs to be defined per level rather than improvised.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applied through
Where this shows up as a concrete interface decision.
- CardComponent
- Drawer and SheetComponent
- Modal DialogComponent
- PopoverComponent
Principles behind this
The reasoning this solution is an application of.
- Affordances and SignifiersPrinciple
Related concept
Connected closely enough to change how you apply this.
- Focus ManagementAccessibility
- Design TokensDesign system
- Common RegionUI foundation
- Dark ModeUI foundation
- Figure and GroundUI foundation
- NeutralsUI foundation
- ShadowsUI foundation
- ShapeUI foundation