Elevation
Shadow and layering system for creating depth hierarchy across surfaces.
Elevation Levels
Four shadow levels create a consistent depth hierarchy. Higher elevations draw more visual attention — use them sparingly for elements that need to float above the page.
Subtle lift for cards and list items at rest. The lightest touch of depth.
Default card shadow. Used for surfaces that sit one level above the background.
Dropdowns, popovers, and floating panels that overlay page content.
Modals, dialogs, and top-level surfaces demanding focus.
Dark Mode Shadows
In dark mode, shadows use higher opacity values to remain perceptible against dark backgrounds. The token system handles this automatically — components reference shadow tokens, not raw CSS values. Borders also play a larger role in dark mode to reinforce surface boundaries where shadows are less visible.