Elevation

Shadows define hierarchy, but the real work is separation and focus.

Premium documentation needs depth that clarifies layers instead of adding mud. Our engines keep the same elevation semantics, while each one interprets them differently.

Default activemdPanels, dropdowns, and card focus states.

Maximum liftxlUsed sparingly for high-attention overlays.

Engine-awareTone shiftedCorporate, bold, or whisper-light depth.

Elevation ladder

Use contrast in small doses; clarity comes from progression.

tokens.shadows.sm

Cards at rest, low-emphasis modules, and contained utility chrome.0 1px 2px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.14)

tokens.shadows.md

Default elevation for active cards, menus, and common overlays.0 2px 4px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.18)

tokens.shadows.lg

Prominent lift for modals, drawers, and command surfaces.0 8px 20px rgba(0, 0, 0, 0.28), 0 16px 40px rgba(0, 0, 0, 0.22)

tokens.shadows.xl

Maximum emphasis for spotlight or high-focus overlay layers.0 16px 40px rgba(0, 0, 0, 0.34), 0 24px 56px rgba(0, 0, 0, 0.28)

Engine comparison

Same elevation semantics

Shadow heuristics

Prefer border + subtle shadow for dense admin tables.

Lift interactives from sm to md on hover instead of inventing custom values.

Use lg and xl for modal families, command palettes, and editorial spotlight modules.

Dark or colorful backgrounds may need stronger surface contrast before stronger shadows.

Shadow usagePaste-ready example that shows the base contract first.

tsx

9 lines

Consumption

Runtime-aware snippet

Shadow usageTSX

Quick copy

const tokens = useTokens();

<Card style={{ boxShadow: tokens.shadows.sm }} />

<Box
  style={{
    boxShadow: isActive ? tokens.shadows.lg : tokens.shadows.md,
  }}
/>