Shadow & elevation.
Four layers, three steps of height. Light mode borrows from print and casts a shadow. Dark mode borrows from physics and brightens the surface instead. The token names are the same in both. Only the mechanism flips.
border + shadow/elevation
Light mode borrows from print. Dark mode borrows from physics.
The three shadow tokens
Three steps, and no more. Overlay and Floater are each two drop shadows: a key shadow that grows with height, and an ambient shadow that keeps the edge anchored. Surface is a single shadow, which is why a card reads as resting rather than floating.
Offset and blur roughly double at each step (1/2 → 4/12 → 16/32) and opacity rises with them (6% → 10% → 16%). Both moving together is what reads as height rather than as a darker edge. Note that surface/color and overlay/color-ambient both hold #0000000F, so Surface and the quiet half of Overlay are the same shadow under two names.
The four layers
Those three tokens map onto three layers above the page. Same geometry in both modes. On the left the boxes are all white and separated by shadow. On the right they are all shadowless and separated by fill.
The plates above keep every layer neutral so the fill ladder stays readable. Most real floaters are not neutral. A FAB is filled, and a filled element carries its own boundary.
4.86:1 against the page. No border.
17.69:1 against the page. No border.
Exactly one thing varies per mode: light varies the shadow and holds the fill at white, dark varies the fill and holds the shadow at none. The border is constant in both.
What belongs on each layer
Pick the layer by how the thing relates to the page, not by how important it is. Importance is the most common reason to reach one step too high.
The page canvas, and any full bleed region that reads as the page: a scroll container, an empty state, a section band.
Anything that sits in the layout flow: cards, list rows, table containers, accordions, inline panels, toolbars, app bars and tab bars.
Anchored to a trigger and dismissed by clicking away: drawers, bottom sheets, dropdown and select menus, popovers, date pickers, autocomplete.
Detached from the layout with no anchor, or persistent above it: dialogs and modals, toasts, tooltips, the FAB, floating tabs.
Nesting stops the ladder
The ladder applies to layers that sit on the page. Inside a raised container it stops: a card in a drawer keeps the drawer's fill and separates with the hairline alone.
In dark mode a card that held its own layers/surface fill inside an overlay drawer would be darker than the drawer, reading as a hole rather than as something raised. In light mode the equivalent mistake is a second shadow, which reads as two heights at once. Either way the container has already established the height; the things inside it only need separating from each other.
Do & Don't
Four decisions that come up every time someone builds at one of these layers.