Elevation

Shadow scale and when to lift surfaces.

Elevation is expressed with a two-step hard-offset shadow system — no blur. The shadow colour always matches --color, so it flips correctly in dark mode.

Shadow scale

box-shadow: var(--shadow-shallow); /* 0px 3px 0px var(--shadow-color) */
box-shadow: var(--shadow-deep);    /* 0px 5px 0px var(--shadow-color) */

When to use which

None

Flat surfaces: body content, inline text, simple cards in the document flow.

Shallow

Resting state for interactive surfaces: buttons, chiplets, alerts.

Deep

Floating or lifted surfaces: toasts, dialogs, active/hovered cards.

Press-down pattern

On hover or press, move the element down by the shadow offset and remove the shadow — this simulates the surface being pushed into the page.

.button {
  box-shadow: var(--shadow-shallow);
  transition: top 0.15s, box-shadow 0.15s;
}
.button:hover {
  top: 3px;
  box-shadow: none;
}

Text shadow

A subtle text shadow is available for layered type over photos — --text-shadow--color inverts automatically between light and dark mode.