Shadows
Six elevation levels mapped to CSS variables. Use the token — never hardcode box-shadow values.
Elevation scale
--shadow-xs
Subtle lift. Inputs, selects, cards at rest.
0px 1px 2px rgba(0,0,0,0.05)
--shadow-sm
Light elevation. Buttons, small cards.
0px 1px 3px rgba(0,0,0,0.10), 0px 1px 2px rgba(0,0,0,0.06)
--shadow-md
Medium elevation. Modals, slide-outs, popovers.
0px 4px 8px -2px rgba(0,0,0,0.10), 0px 2px 4px -2px rgba(0,0,0,0.06)
--shadow-lg
High elevation. Dropdowns, command menus.
0px 12px 16px -4px rgba(0,0,0,0.08), 0px 4px 6px -2px rgba(0,0,0,0.03)
--shadow-xl
Extra high. Full-screen overlays, toast stacks.
0px 20px 24px -4px rgba(0,0,0,0.08), 0px 8px 8px -4px rgba(0,0,0,0.03)
--shadow-2xl
Maximum depth. Confirmation dialogs, critical alerts.
0px 24px 48px -12px rgba(0,0,0,0.18)
| Token | Usage | Preview |
|---|---|---|
| --shadow-xs | Subtle lift. Inputs, selects, cards at rest. | |
| --shadow-sm | Light elevation. Buttons, small cards. | |
| --shadow-md | Medium elevation. Modals, slide-outs, popovers. | |
| --shadow-lg | High elevation. Dropdowns, command menus. | |
| --shadow-xl | Extra high. Full-screen overlays, toast stacks. | |
| --shadow-2xl | Maximum depth. Confirmation dialogs, critical alerts. |
Focus rings
Applied as box-shadow on :focus-visible. Always 4px spread, 24% opacity of the semantic color.
Brand (default)
All interactive elements — buttons, inputs, links.
Error
Error-state inputs and destructive actions.
Warning
Warning-state inputs.
Component mapping
- shadow-xsInput, Select, Select options, Card at rest
- shadow-smButton, Badge, small interactive elements
- shadow-mdModal, Slideout, Popover
- shadow-lgDropdown menu, Autocomplete list, Command menu
- shadow-xlToast/Snackbar, Floating action button
- shadow-2xlCritical dialog, Confirmation modal