Anatomy

Elevation consists of a surface (A) and a directional shadow (B) that visually separates it from the background or underlying content.

Purpose

Elevation is used to create depth and distinguish layered elements from the content behind them.

Single elevation

The system uses one consistent elevation depth across all surfaces.

Direction

The shadow direction adapts based on where the element sits in the layout.

Use with scroll

Apply elevation dynamically when elements are fixed and content scrolls underneath.

Avoid overuse

Use elevation selectively to emphasize hierarchy and separate functional layers.