Elevation
Three surface levels, one hover lift that means “this opens”, and one pressed state every control shares. Depth is a property of what a surface is and what it does, not of the component that happens to render it.
Three levels
Page < card < floating. The page is the darkest surface in both themes; a card sits one step above it; anything that floats over the page sits one more. In light the shadow does the separating; in dark the tint steps do.
| Level | Surface | Classes | Used for |
|---|---|---|---|
| 0 | Page | bg-bg-muted | The ground every route sits on. |
| 1 | Card | bg-bg-default border-border-subtle shadow-sm | Content cards, tiles, settings panels, dialogs (with shadow-lg). |
| 2 | Floating | bg-bg-float border-border-subtle shadow-md | Menus, popovers, tooltips, select lists, the command palette, toasts. |
Summer launch
Meta · 12 ads · $4,120
Summer launch
Meta · 12 ads · $4,120
Lift: clickable cards only
A card with an onClick or an href carries the `lift` utility: it rises 3 px onto the floating shadow on hover and settles back onto the card shadow on press. A read-only tile never lifts, so the lift itself says “this opens”. Never hand-roll hover:-translate-y-[3px] hover:shadow-md.
Ads report
Opens the report
Spend
Read-only tile
Press: one state for every control
The `press` utility darkens whatever fill a control has by 8% while it is held (10% white in dark), so it needs no per-variant colour and reads the same on brand blue, ink and a white outline. Button, IconButton and Chip carry it in their base classes. Never a scale-down.