Elevation

Elevation is the shadow system a design system uses to signal depth and hierarchy — surfaces resting on the canvas, cards floating above content, modals lifted further still. Each level is a token (shadow-1, shadow-2, shadow-modal), never an arbitrary blur radius and offset.

Material made elevation famous with its 24-step scale; most teams need three to five levels, paired with z-index tokens for stacking order. Elevation is also the foundation that breaks first in dark mode: shadows that work on white can disappear on near-black, so dark themes typically use surface-tint colours (slightly lighter backgrounds) instead of, or in addition to, drop shadows.

Related: Foundations · Design tokens · Semantic tokens · Dark mode