Shadows
Shadows & Elevation
Section titled “Shadows & Elevation”Shadows create depth and establish visual hierarchy by indicating which elements sit above others in the z-axis.
Shadow Scale
Section titled “Shadow Scale”Shadow tokens
| Token | Value | Usage |
|---|---|---|
--shadow-xs | 0 1px 2px rgba(0,0,0,0.05) | Subtle borders, table headers |
--shadow-sm | 0 1px 3px rgba(0,0,0,0.1) | Cards (default state) |
--shadow-md | 0 4px 6px rgba(0,0,0,0.1) | Dropdowns, tooltips |
--shadow-lg | 0 10px 15px rgba(0,0,0,0.1) | Modals, dialogs |
--shadow-xl | 0 20px 25px rgba(0,0,0,0.15) | Drawers, slide-overs |
Elevation Levels
Section titled “Elevation Levels”| Level | Shadow token | UI elements |
|---|---|---|
| 0 | none | Flat content, text, inline elements |
| 1 | xs | Table headers, subtle separators |
| 2 | sm | Cards, list items |
| 3 | md | Dropdowns, popovers, tooltips |
| 4 | lg | Modals, dialogs, sheets |
| 5 | xl | Drawers, navigation overlays |
Guidelines
Section titled “Guidelines”- One shadow per element — no stacking on nested elements
- Use elevation to signal interactivity (hover states bump up one level)
- Dark mode: shadows become less visible; use border instead
- Shadows should feel like they come from a single light source (top-center)