Shadows

Elevation shadows using CSS variables. Adapts to theme changes.

Shadow Tokens

2 shadow tokens covering the elevation levels used across the site.

Small
shadow-sm

Subtle elevation for small elements (toggles, pills)

Large
shadow-lg

Strong elevation for modals and lightboxes

Popover
shadow-popover

Soft lift for floating panels — applied by the .popover-surface class, so popovers should not add a shadow of their own

Button Primary
shadow-btn-primary

Four stacked layers under the primary button — a tight contact shadow beneath a wider soft one, so it reads as seated rather than floating.

Button Secondary
shadow-btn-secondary

The secondary button has no border at all — its entire edge is this: an inner ring, a brighter inner top edge (lit from above), an outer ring and a soft drop.

Elevation Shadows

Standard elevation shadows for depth hierarchy:

shadow-sm
shadow-lg

Usage

Common Patterns

shadow-sm — Buttons, small elementsshadow-lg — Modals, dropdowns