Elevation.

Elevation isn't a visual effect — it's a hierarchy signal. Light mode borrows from print, dark mode borrows from physics, and both speak the same token language.

Shadows

--sprout-shadow-surface

Resting card (light)

0 1px 2px 0 rgba(0,0,0,0.06)

--sprout-shadow-overlay

Dropdown, tooltip, popover (light)

0 4px 12px 0 rgba(0,0,0,0.10), 0 1px 2px 0 rgba(0,0,0,0.06)

--sprout-shadow-floater

Modal, FAB, drawer (light)

0 16px 32px 0 rgba(0,0,0,0.16), 0 4px 8px 0 rgba(0,0,0,0.08)

Depth, two ways

Light mode borrows from print. Dark mode borrows from physics.

LIGHT MODE

Shadows lift things up.

On a paper-white canvas, depth is cast — the higher a surface sits, the softer and longer its shadow. Dialogs and popovers use shadow-floater. Toolbars stay at shadow-surface. Cards never use shadow alone — a hairline border does the work.

shadow-surfaceCard

shadow-overlayDrawer

shadow-floaterDialog

DARK MODE

Surfaces brighten as they rise.

In the dark, cast shadows disappear — there's no light to cast them. So we invert the model: each elevation step lightens the surface. The dialog floats by being brighter than the drawer behind it, not by sitting on a shadow that doesn't exist.

surface-1Card

surface-2Drawer

surface-3Dialog

The three shadow tokens above only render in light mode. In dark mode, components reach for the matching --surface-N token instead — the elevation API is the same, the visual mechanism flips.

Do's and Don'ts

A few patterns worth knowing before you reach for a shadow.

Pick token by role, not how much shadow you want.

Let the hairline border carry cards in light mode.

Swap the whole ladder in dark mode — never roll-off.

Pair elevations with motion.

Match shadow order to z-index order.

DON'T

Don't invent a one-off value for a single screen.

Don't apply floater to anything permanent.

Don't mix the two elevation systems.

Don't use elevation to compensate for weak information hierarchy.

Don't let a new elevation level get named by a number.

Examples

Worth trying hands-on — the mechanism is easier to feel than to explain.

Depth is cast

surfaceCard

overlayDrawer

floaterDialog

← PreviousSpacing & layout Next →Iconography