Depth without drama: hairlines first, shadows only where meaning needs them.
On a dark field, most separation is a hairline — one pixel of #1E1E1E — not a shadow. Shadows are reserved for things that genuinely float above the page and need to say so. Four levels, and you rarely need more than the first two.
| Token | Value | Role |
|---|---|---|
| --elevation-0 | 1px solid #1E1E1E | Flat — the default hairline |
| --shadow-1 | 0 1px 2px rgba(0,0,0,.35) | Raised — a card that lifts |
| --shadow-2 | 0 8px 24px rgba(0,0,0,.42) | Overlay — menus, popovers |
| --shadow-3 | 0 16px 40px rgba(0,0,0,.5) | Modal — dialogs, toasts |
| --shadow-focus | 0 0 0 3px rgba(255,122,0,.14) | The one warm ring, for focus |
Try a #1E1E1E border before a shadow. Structure should read from lines and spacing, not from drop shadows.
An overlay sits at shadow-2; a modal at shadow-3. Don't nest shadowed things inside shadowed things.
The single warm ring belongs to keyboard focus. Never tint an elevation shadow for decoration.