# Elevation

Five levels of depth, each with a fixed shadow recipe and a clear job. Elevation communicates what floats above what — it is never decoration.

<Tabs>
<Tab title="Overview">

## Shadow scale

```dh-strip
kind: elevation
desc: Shown on a light background — shadows are visible against white.
Flat | --shadow-none | none
Low | --shadow-sm | 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.10)
Mid | --shadow-md | 0 4px 8px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06)
High | --shadow-lg | 0 8px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08)
Overlay | --shadow-xl | 0 20px 48px rgba(0,0,0,0.18), 0 8px 16px rgba(0,0,0,0.10)
```

```dh-principles
#006aff | Shadow signals hierarchy | Higher elevation = more visual weight = content that demands attention. Every level is intentional — don't use Overlay for a tooltip.
#189f60 | Flat uses border, not faint shadow | Flat surfaces are separated by a 1px border token, not a subtle shadow. Faint shadows are hard to control across light and dark modes.
#ff9900 | Dark mode lifts the surface | In dark mode, elevation is often communicated by lightening the surface color — not deepening the shadow. Tokens handle this automatically.
```

</Tab>
<Tab title="Scale">

```dh-elevation
Flat | Elevation.0 · --shadow-none | none | No shadow. Distinguish with a 1px border instead.
Low | Elevation.1 · --shadow-sm | 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.10) | Subtle lift. Interactive or slightly raised surfaces without strong hierarchy.
Mid | Elevation.2 · --shadow-md | 0 4px 8px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06) | Moderate depth. Standard elevation for floating elements and focused surfaces.
High | Elevation.3 · --shadow-lg | 0 8px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08) | Strong depth. Content sits significantly above the base surface.
Overlay | Elevation.4 · --shadow-xl | 0 20px 48px rgba(0,0,0,0.18), 0 8px 16px rgba(0,0,0,0.10) | Maximum elevation. Reserved for full-screen overlays and blocking surfaces.
```

</Tab>
<Tab title="Usage">

```dh-usage
Flat | Elevation.0 | No shadow. Distinguish with a 1px border instead. | Default cards, List items, Table rows, Input fields
Low | Elevation.1 | Subtle lift. Interactive or slightly raised surfaces without strong hierarchy. | Hover state cards, Sticky table headers, Inline action menus
Mid | Elevation.2 | Moderate depth. Standard elevation for floating elements and focused surfaces. | Dropdown menus, Popovers, Focused cards, Tooltips
High | Elevation.3 | Strong depth. Content sits significantly above the base surface. | Modals, Dialogs, Side drawers, Command palettes
Overlay | Elevation.4 | Maximum elevation. Reserved for full-screen overlays and blocking surfaces. | Full-screen modals, Bottom sheets, Context menus with backdrops
```

</Tab>
</Tabs>