Elevation & Depth
Depth comes from surface tone and hairlines first, shadow second. Docked regions carry no shadow at all: three tones — panel (bg-subtlest), white card, grey canvas — plus 1px lines already keep them apart. Shadows go only to things that genuinely leave the plane.
| Token | Value | Used for |
|---|---|---|
shadow-100 | 0 4px 12px rgba(11,11,13,.06), 0 0 4px rgba(11,11,13,.06) | Floating rail, property cards, collapsed pill, thumbnail cards, the active segment, switch knob, slider thumb |
shadow-200 | 0 16px 32px rgba(11,11,13,.06), 0 2px 8px rgba(11,11,13,.06) | Dropdown lists |
shadow-300 | 0 40px 80px rgba(11,11,13,.06), 0 2px 8px rgba(11,11,13,.06) | Dialogs |
Three steps and no fourth: needing one usually means something that belongs flat on the panel has been lifted off it. Every step is two layers — an offset shadow gives direction, a zero-offset one gives a white card an edge even on a white panel — and all three share a single shadow colour at 6%. shadow-100 is also the smallest step there is: knobs and thumbs take it, and nothing in the system takes anything smaller. No shadow is ever animated, and nothing lifts on hover.
Focus is its own layer
Keyboard focus is a 2px stroke-surround outline with a 2px offset. The offset is load-bearing: it separates the ring from the control's own fill, so the ring is as visible on a near-black button as on a white one. Setting it to 0 is exactly why focus rings disappear on primary buttons.
The input family is the exception: inputs and selects show focus by turning their fill white and drawing a 1px stroke-active border. They are already a filled box; a ring around one reads as two boundaries.