Depth & Light
One rule, everywhere: the z-axis is the state machine.
The grammar
A momentary press travels from emboss-1 to flush and springs back. A latched selection settles into deboss-1 — pressed into the chassis until released. Hover lifts one level. Dragging lifts to emboss-3. Overlays never share the page plane; they only float. Once you have seen the grammar, every Emboss component reads the same way.
The elevation scale
| Token | Role |
|---|---|
| shadow-deboss-2 | Deep well — OTP cells, knob recesses, meter housings. |
| shadow-deboss-1 | Standard well — inputs, latched selections. |
| shadow-flush | Level with the surface — a pressed button mid-press. |
| shadow-emboss-1 | Resting raised — buttons, cards. |
| shadow-emboss-2 | Hover lift — a control inviting touch. |
| shadow-emboss-3 | Grabbed — a thumb mid-drag. |
| shadow-float-1 | Floating — tooltips, popovers, menus. |
| shadow-float-2 | Floating high — dialogs, sheets, toasts. |
One light, every shadow
Shadows aren't hardcoded. Each recipe is a calc() of the light vector — offset along the light for shaded edges, against it for lit bevels and cast shadows. Drag the pad below and watch this page re-light; the same two variables drive every component you install.
Depth is never the only channel
Every state that depth communicates is also carried by color, a glyph, or text — and always by ARIA state. Flatten the entire system with --depth: 0 and nothing becomes ambiguous; it just stops being tactile.