Elevation
Two axes, not one ladder. A level says how far a surface is from the page; an interaction says what a pointer is doing to it, painted over whichever level it lands on.
Levels
Five, ordered from the page outwards. Switch themes in the bar above and watch the order hold while the values invert.
background.baseThe page, and the only one an application is expected to change.background.raisedA surface on the page: card, input, panel, menu.background.overlayFloating clear of it: dialog, popover, dropdown, tooltip.The neutral tone
Not levels. Neutral is a tone like the other five, so a gray badge and a gray button are built the way a red one is.
neutral.surfaceA quiet badge or banner, and a disabled control.neutral.subtleA tonal button, and the well behind an avatar. One step firmer.Stacked
A page, a card on it, and something floating over both.
raised, so overlay resolves to white again there and the shadow carries the level on its own. Dark has most of the ramp still above it and the same token lands a step higher.Interaction
Hover and hold each row. The ink is one value and it moves both levels by the same amount, which a step on the neutral ramp could not do.
Where the page sits
pageBackground picks between these two. On the tinted page a flat card is enough; on the white one there is no color left to separate them, so a card takes a border.
<Theme pageBackground="base"> // tinted, the default <Theme pageBackground="raised"> // whitepageBackground is a light-theme dial. Dark has nothing above its page to move it to, so both settings resolve to the same page.