Elevation

Elevation in the BSS Design System is expressed through three shadow token tiers. The single source of truth is app/_v2/tokens.css; arbitrary box-shadow values are not allowed. In dark mode, depth is conveyed through solid backgrounds and borders instead of shadows.

Scale

Elevation increases from soft → hero → full. Compare the visual intensity of each token against the gray background. The shadow tint is always rgba(10,30,51,…) (ink-deep family) to preserve the brand color temperature.

--sh-soft

0 1px 3px rgba(10,30,51,.04)

Card hover

--sh-hero

0 2px 8px rgba(10,30,51,.04), 0 8px 24px rgba(10,30,51,.06)

Hero · large surface

--sh-full

0 4px 16px rgba(10,30,51,.08)

Dropdown · Tooltip · Toast

Usage

Recommended elevation level per component. Never stack two tiers on the same surface.

Token	Context	Trigger
--sh-soft	Default card, section card, hub card	hover · focus-within
--sh-hero	Hero surface, modal backdrop, large image panel	Always on
--sh-full	Dropdown, Tooltip, Toast, Floating CTA	Always on (fixed · absolute layer)

Shadows are nearly invisible in dark mode. Express depth with solid background + border instead. Example: border: 1px solid var(--c-line-soft). Apply borders to elevated cards using the :global(html[data-theme="dark"]) pattern.