Design System
Elevation
Elevation tokens provide depth and hierarchy through shadows. Shadows adapt automatically to light and dark themes.
Elevation Scale
Our elevation system uses a progressive shadow scale. Higher elevations indicate more important content or interactive elements.
| Token | Value | Preview |
|---|---|---|
--elevation-none | none | |
--elevation-sm | 0 1px 2px 0 rgb(0 0 0 / 0.05) | |
--elevation-md | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | |
--elevation-lg | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | |
--elevation-xl | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) |
Usage Guidelines
Small (sm)
Subtle elevation for cards and surfaces that need minimal depth.
Medium (md)
Default elevation for most elevated components like dropdowns and popovers.
Large (lg)
Used for modals, dialogs, and overlays that need to stand out.
Extra Large (xl)
Reserved for prominent elements like tooltips and floating action buttons.