Shadows & Elevation
Shadows communicate depth and hierarchy. Use lighter shadows for subtle separation and heavier shadows for elevated, interactive elements.
None--ds-shadow-noneNo shadow
Small--ds-shadow-smSubtle lift for inputs and badges
Medium--ds-shadow-mdCards, dropdowns, popovers
Large--ds-shadow-lgModals, floating panels
Extra Large--ds-shadow-xlDialogs, toasts, elevated UI
Inner--ds-shadow-innerInset shadow for pressed states
| Level | Token | Use For |
|---|---|---|
| Ground | --ds-shadow-none | Flat elements, inline content |
| Raised | --ds-shadow-sm | Buttons, inputs, small cards |
| Floating | --ds-shadow-md | Cards, dropdowns, tooltips |
| Overlay | --ds-shadow-lg | Modals, slide-overs, panels |
| Top | --ds-shadow-xl | Toasts, dialogs, command palette |
| Inset | --ds-shadow-inner | Active/pressed button states |