Effects

Surfaces float in fog. Avoid sharp drop shadows — elevation here is soft, distant, and detached, and light blooms instead of reflecting.

Elevation & glow

shadow-float

shadow-float-far

shadow-glow-primary

shadow-glow-action

Fog

Atmospheric layers are pre-blurred radial gradients — cheap to composite, endless to look at. The fog blur token is reserved for elements that must dissolve into the background.

blur-fog (40px)

Tokens

shadow-float

0 24px 48px -16px rgb(21 30 63 / 0.10)

Default elevation. Soft, distant, detached from the base.

shadow-float-far

0 40px 80px -24px rgb(21 30 63 / 0.12)

Higher elevation: modals, overlays.

shadow-glow-primary

0 0 48px 0 rgb(249 168 212 / 0.50)

The dream glow. Hover states, focus moments.

shadow-glow-action

0 0 32px 0 rgb(255 189 217 / 0.60)

Glow for action-colored elements.

blur-fog

40px

Fog blur radius for atmospheric layers.