Elevation

Three shadow slots for physical depth, and a fixed layer order for stacking. Higher z never implies a bigger shadow — they are separate decisions. The monochrome base is flat: every tier resolves to none — a grey drop shadow under a tinted surface (a status toast) reads as dirt, so depth in the base comes from surface tones, hairline borders, and the overlay scrim. Every floating component still consumes its tier, so a brand opts into shadows by filling these three tokens alone — no component CSS changes.

Shadow slots

ExampleTokenUsage
shadow.lowResting lift: cards, rows
shadow.mediumFloating layers: menus, popovers, toasts
shadow.highThe modal layer: dialogs, drawers

Layer order

TokenValueUsage
z.baseIn-flow content
z.popoverAnchored surfaces: menus, select listboxes, popovers
z.stickySticky bars, pinned table headers
z.overlayScrims behind modals and drawers
z.modalDialogs, drawers
z.tooltipTooltips — above modals
z.toastToasts — above everything