Foundations

Elevation & shadows

Structure is separated by a 1px border, never a shadow. Shadows are reserved for things that genuinely float — overlays like dialogs, drawers, popovers, menus, tooltips and toasts. They are theme-specific, and in the Accessibility theme every shadow is none. This is guardrail 5.

The three levels

Only for elevated/overlay surfaces. Cards, tables and forms use a border instead.

--shadow-sm sm

--shadow-md md

--shadow-lg lg

Theme-specific — and gone in Accessibility

The same shadow-md surface across the themes. In Accessibility it flattens to none and leans on the border instead.

shadow-md

Light

shadow-md

Dark

shadow-md

Accessibility

The rule

5Containers separate via 1px solid var(--color-border-strong); hairline for subtle dividers. Shadows (var(--shadow-sm|md|lg)) are overlay-only.
Never put a box-shadow on a card, table or form, and never hardcode an rgba() shadow — always the token. The modal scrim is var(--color-overlay).

Per-theme shadow values are on the Shadow tokens page.