Primitives
Shadow
Elevation through blur, spread, and composed semantic shadow tokens.
Shadow tokens define elevation through blur, spread, and offset values. The granular primitives compose into ready-to-use semantic shadows.
Use composed semantic shadows in component CSS — --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl. Never compose raw blur and spread values yourself; the semantic tokens are tuned together for consistent perceived elevation.
Composed shadow tokens
Ready-to-use box-shadow values defined in tokens/gap-fills.css. These are what components reference.
| Token | CSS Variable | Value | Use case |
|---|---|---|---|
| Small | --shadow-sm | 0px 2px 4px 0px rgba(0,0,0,0.06) | Subtle cards, inputs |
| Medium | --shadow-md | 0px 4px 12px 0px rgba(0,0,0,0.12) | Cards, panels |
| Large | --shadow-lg | 0px 4px 16px 0px rgba(0,0,0,0.12) | Dropdowns, popovers |
| Extra large | --shadow-xl | 0px 8px 24px 4px rgba(0,0,0,0.20) | Modals, dialogs |
Overlay
| Token | CSS Variable | Value |
|---|---|---|
| Overlay | --background-overlay | rgba(0, 0, 0, 0.4) |
Used for modal backdrops and drawer overlays.
Shadow blur scale (primitives)
Controls the softness/diffusion of shadows.
--shadow-blur-0
0px--shadow-blur-100
2px--shadow-blur-200
4px--shadow-blur-300
6px--shadow-blur-400
8px--shadow-blur-500
10px--shadow-blur-600
12px--shadow-blur-700
14px--shadow-blur-800
16pxShadow spread scale (primitives)
Controls how far a shadow extends outward.
--shadow-spread-0
0px--shadow-spread-100
2px--shadow-spread-200
4px--shadow-spread-300
8px--shadow-spread-400
10px--shadow-spread-500
12px--shadow-spread-600
14px--shadow-spread-700
16px--shadow-spread-800
16pxRelated
- Border radius — radius and elevation read together at the component edge
- Color tokens — surface tokens shadows sit on