Elevation

Four levels of layered shadow that lift a surface off the page. Higher levels read as more detached — reserve them for transient surfaces.

Four levels (L1–L4) of layered shadow, composed from offset / blur / spread / color tokens. Shown on a light surface — that’s what they’re designed for.

Elevation

Layered shadows that lift a surface off the page. Four levels — shown on a light surface, which is what they’re designed for. Offset x / y, blur, and spread are listed per layer.

L1
1 layer
x 0y 2blur 4spread 0
L2
2 layers
x 0y 0blur 2spread 0
x 0y 4blur 24spread 0
L3
2 layers
x 0y 0blur 2spread 0
x 0y 0blur 96spread 0
L4
1 layer
x 0y 8blur 24spread 0

Elevation lifts a surface off the page — the higher the level, the more it lifts and the more it should signify. Use the lowest level that reads, and assign only one elevation per layer; never stack multiple shadows on a single surface.

Used for

TokenValueUsed for
elevationL11 layerResting cards and list rows — the default surface lift.
elevationL22 layersRaised cards, hover states, and pickers.
elevationL32 layersPopovers, menus, and dropdowns.
elevationL41 layerModals, bottom sheets, and dialogs.

Applied

Four white tiles on a muted surface — the lift difference is visible side by side. Shadows are intentionally subtle at lower levels and grow with each step.

L1 · elevationL1
L2 · elevationL2
L3 · elevationL3
L4 · elevationL4

Menu / popover in context

An L3 surface floating over muted page content — the shadow reads as a distinct layer above the rest of the UI, communicating that the element is transient and dismissable.

Edit
Duplicate
Delete
L3 · popover floating over page content

Do & Don’t

✓ DoOne elevation level per surface — a resting card uses L1 and nothing else.

L1 + L3 stacked

Inline tag with shadow
✗ Don’tStack multiple elevation levels on one surface, or apply elevation to flush inline elements that should sit flat on the page.