Elevation.

Four shadow tokens — the system avoids depth as decoration. Shadows mean: this thing was lifted off the page on purpose.

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-3. Toolbars stay at shadow-1. Cards never use shadow alone — a hairline border does the work.

shadow-0Card

shadow-1Drawer

shadow-3Dialog

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-0Card

surface-1Drawer

surface-3Dialog

The four 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.

← PreviousSpacing & layout Next →Iconography