Elevation explains which surfaces sit behind, beside, or above others. Use background roles and restrained shadows together to express hierarchy.
Our elevation principles
ClarityUse depth to make relationships between background, content, and floating surfaces understandable.ConsistencyApply the same surface and shadow recipe to components at the same elevation.Depth and hierarchyHigher surfaces signal greater prominence. Reserve the top layer for tasks that need focused attention.
Levels of elevation
Surface color and shadow work together to explain the z-axis. Most content sits on the baseline. Raised content floats just above it; overlays take precedence over the application.
Sunkenz-index: 0Application backdrop
Baselinez-index: 100Everyday content
Baseline + hoverz-index: 200Low shadow
Raisedz-index: 300Tooltip or toast
Overlayz-index: 999Dialog or drawer
Four levels, five illustrated statesThe source illustrates baseline at rest and on hover. Its z-index values are relative examples; use a coordinated application layer scale.
Landmark surfaces
A prominent area such as a sidebar can use a landmark baseline with a sunken region inside it. Visual landmark colors complement actual HTML landmarks; color alone does not provide navigation semantics.
Navigation · landmark baseline
OverviewProjectslandmark_sunken
Landmark baseline and sunkenThe inset navigation group uses the sunken role inside the main landmark surface.
Shadow direction
Choose the shadow direction that explains attachment. A panel attached to the right edge casts left; a bottom panel casts upward.
Attached panelUp shadow
UpFor a bottom-attached panel.
Floating cardDown shadow
DownThe default for floating content.
Attached panelLeft shadow
LeftFor a right-attached panel.
Attached panelRight shadow
RightFor a left-attached panel.
Communicate elevation
Use shadows, surface colors, scrims, or a combination. Light-mode surfaces can share a color; dark-mode surfaces typically become lighter as elevation increases.
Floating surface
ShadowA shadow separates floating content from its supporting surface.
Your draft is saved locally.
ColorA status surface can express placement through color and a boundary without a shadow.
Publish changes?
Review the update before continuing.
Review changes
ScrimA dimmed backdrop separates a modal task. Production dialogs also require focus containment, dismissal, and focus restoration.