Elevation · Use the system

Choose elevation by surface

Start with what the surface does. The answer pairs a shadow level with the tonal container that keeps the hierarchy readable.

What kind of surface?

Recommendation

Level 1 + surface-container-low

The level stores the cross-platform elevation decision; the container role carries tonal hierarchy.

Card or contained section

Copy pairing

Tailwind CSS var

bg-surface-container-low shadow-elevation-1

Need the model first? Learn how level and tone work together. If the pairing is right but the shadow voice is not, customize the recipe.