Elevation
Surface layers, shadows and highlights for depth
Layers
The UI is built from three surface layers that create depth through subtle lightness differences. In light mode, each layer gets progressively lighter as it rises toward the viewer. In dark mode, the same — each layer lightens away from pure black, matching how physical objects catch more light as they come closer.
Background
The most recessed layer. This is the page canvas behind everything else.
Surface
Cards, panels, sidebars, and other contained regions sit on top of the background. Applies a default shadow and inset highlight to reinforce the lift.
Elevated
Popovers, modals, dropdown menus, and other floating elements. Uses reduced opacity and backdrop-blur for a frosted glass effect.
Shadow & highlight scale
Each shadow level combines a 1px outer ring with progressively softer ambient layers. Every level is paired with an inset highlight of the same scale, simulating a top-lit edge. Both surface and elevated accept any shadow level as an override.
iOS and Android apps use system built-in shadows for better integration with the OS. This scale applies to web only.
Shadow specification
| Token | Layer | y | blur | spread | α |
|---|---|---|---|---|---|
| shadow-2xs | 1 | 0 | 0 | 1 | 20% |
| 2 | 1 | 0 | 0 | 12% | |
| shadow-xs | 1 | 0 | 0 | 1 | 21% |
| 2 | 1 | 2 | 0 | 15% | |
| 3 | 1 | 1 | 0 | 9% | |
| shadow-sm | 1 | 0 | 0 | 1 | 22% |
| 2 | 1 | 2 | 0 | 18% | |
| 3 | 2 | 4 | -1 | 12% | |
| shadow | 1 | 0 | 0 | 1 | 23% |
| 2 | 1 | 2 | 0 | 18% | |
| 3 | 2 | 4 | -1 | 12% | |
| 4 | 5 | 12 | -3 | 12% | |
| shadow-md | 1 | 0 | 0 | 1 | 24% |
| 2 | 1 | 2 | 0 | 18% | |
| 3 | 4 | 8 | -2 | 15% | |
| 4 | 10 | 20 | -4 | 12% | |
| shadow-lg | 1 | 0 | 0 | 1 | 26% |
| 2 | 1 | 2 | 0 | 12% | |
| 3 | 4 | 8 | -2 | 12% | |
| 4 | 12 | 24 | -4 | 15% | |
| 5 | 24 | 40 | -8 | 12% | |
| shadow-xl | 1 | 0 | 0 | 1 | 28% |
| 2 | 1 | 2 | 0 | 15% | |
| 3 | 6 | 12 | -2 | 18% | |
| 4 | 16 | 32 | -5 | 21% | |
| 5 | 32 | 56 | -10 | 18% | |
| shadow-2xl | 1 | 0 | 0 | 1 | 30% |
| 2 | 2 | 4 | 0 | 21% | |
| 3 | 8 | 16 | -3 | 27% | |
| 4 | 24 | 44 | -8 | 33% | |
| 5 | 48 | 80 | -14 | 33% |
Highlight specification
| Token | Layer | y | blur | spread | α |
|---|---|---|---|---|---|
| inset-shadow-2xs | 1 | 1 | 0 | 0 | 12% |
| inset-shadow-xs | 1 | 1 | 1 | 0 | 8% |
| 2 | 1 | 0 | 0 | 15% | |
| inset-shadow-sm | 1 | 1 | 3 | 0 | 6% |
| 2 | 1 | 0 | 0 | 18% | |
| inset-shadow | 1 | 2 | 4 | 0 | 5% |
| 2 | 1 | 0 | 0 | 20% | |
| inset-shadow-md | 1 | 3 | 8 | -1 | 5% |
| 2 | 1 | 2 | 0 | 10% | |
| 3 | 1 | 0 | 0 | 20% | |
| inset-shadow-lg | 1 | 4 | 12 | -2 | 5% |
| 2 | 2 | 4 | 0 | 8% | |
| 3 | 1 | 0 | 0 | 20% | |
| inset-shadow-xl | 1 | 6 | 16 | -3 | 5% |
| 2 | 3 | 6 | -1 | 8% | |
| 3 | 1 | 0 | 0 | 22% | |
| inset-shadow-2xl | 1 | 8 | 24 | -4 | 5% |
| 2 | 4 | 8 | -1 | 8% | |
| 3 | 1 | 2 | 0 | 12% | |
| 4 | 1 | 0 | 0 | 22% |
Dark mode
Shadows are less visible against dark backgrounds. The system compensates with a higher shadow intensity multiplier in dark mode, scaling each layer's opacity. Combined with surface lightening and inset highlights, this maintains a clear sense of depth across both modes.
Semantic colors
| Light | Dark | |||||
|---|---|---|---|---|---|---|
| Shade | Alpha | Shade | Alpha | |||
| Core | ||||||
| background | 3 | 1 | 15 | 1 | ||
| surface | 2 | 1 | 14 | 1 | ||
| elevated | 1 | 1 | 13 | 1 | ||
| highlight | white | 1 | 10 | 1 | ||
| shade | 6 | 1 | black | 1 | ||