Orbit

Shadows

Source

Elevation tokens for layering surfaces above the page. Pass token names to the boxShadow prop.

Shadows are soft and low-contrast so elevation reads clearly without heavy edges. Raise the level as an element floats further from the page: resting cards take s, interactive states take m, and floating layers like menus and dialogs take l or xl.

Scale

Each token rendered on a card surface so the elevation is visible.

none

Flat, no elevation

s

Subtle lift for resting cards

m

Hover and raised surfaces

l

Popovers and dropdowns

xl

Dialogs and overlays

Usage

Pair boxShadow with a hover state to animate elevation on interactive surfaces.

Elevated surface

<Box
  boxShadow="m"
  borderRadius="l"
  padding="xl"
  backgroundColor="background-card"
>
  Elevated surface
</Box>