Skip to content
SproutAceve · v3.7.0
Get started
OverviewWhat is your role?Adopting SproutGetting startedInstallChangelogv3.7
Foundations
Brand & logosColorTypographySpacing & layoutElevationIconography
Components
OverviewButtonsInputs & formsData gridRibbon toolbarNavigation
Practice
Interaction & motionVoice & contentProduct patternsAI patterns
People & ethics
Design principlesPersonasUX ethicsTrust & direction
Playground
Build the systemplayTower of tokensplay
Behind the system
How it works
Foundations

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 & layoutNext →Iconography
Sprout · Aceve Design System · v3.7.0
Figma library GitLabReleases