Elevation and depth
Depth comes from surface steps and strokes first, and from shadows second. There are three shadows; adding a fourth is the moment a design system starts to leak.
0 8px 28px / 10%Dialogs, select popovers
0 1px 3px / 8%Canvas overlays, the sheet, the active segment
0 1px 2px / 20%Slider knob, switch knob
knob exists for one specific reason: a white circle on a light track dissolves under micro alone. The knob is the thing that carries the value's position through its shape, so dissolving means the value becomes unreadable. Don't substitute micro, and don't heavy micro globally to rescue the knob — that dirties every overlay. Shadows never animate on hover.
Focus is its own layer and stays out of the elevation system
The focus ring is 2px wide with a 2px offset. The offset is load-bearing, not decorative: it separates the ring from the control's own fill. Run the numbers — with the offset, the ring's adjacent colour is the panel's white, 6.08:1; sitting directly against a near-black fill it is 2.92:1, short of 3:1. The input family is the one exception to the ring: inputs, value pills and select triggers show focus by switching their stroke from stroke-input to brand-default. They already have a stroke, so a ring would be a second boundary.
The input family is the exception to the focus ring — inputs, value pills and select triggers show focus by switching their stroke from stroke-input to brand-default. They already have a stroke, so a ring would be a second boundary.