3pxOffset: 0, 0Opacity: 30%Elevation communicates depth and layering through box shadows. The system defines 5 levels (sm → xl) plus dedicated focus ring shadows bound to Figma shadow variables. Use elevation purposefully — only when a component needs to visually float above its surroundings.
Shadow levels
Four elevation levels — sm for subtle cards, xl for full-screen overlays. Each is defined as a Figma Shadow variable with all 5 properties (x, y, blur, spread, color) token-bound.
Shadows/sm
smCards, image thumbnails, subtle floating elements
X
0px
Y
2px
Blur
8px
Spread
0px
0 2px 8px 0 rgba(0,0,0,0.06)Shadows/md
mdDropdowns, select menus, date pickers, tooltips, popovers
X
0px
Y
8px
Blur
24px
Spread
-4px
0 8px 24px -4px rgba(0,0,0,0.12)Shadows/lg
lgModals, dialogs, drawers, side sheets
X
0px
Y
16px
Blur
40px
Spread
-8px
0 16px 40px -8px rgba(0,0,0,0.16)Shadows/xl
xlFull-page overlays, command palettes, mega menus
X
0px
Y
24px
Blur
64px
Spread
-16px
0 24px 64px -16px rgba(0,0,0,0.20)Focus rings
Focus rings are implemented as Figma DROP_SHADOW effects with spread=3, offset=(0,0), radius=0. The ring colour uses the Shadows/focus token.
Button focus
Input focus
Default focus ring
#33A992
All interactive elements (buttons, inputs, checkboxes, tabs)
Spread:
Button focus
Input focus
Error focus ring
#ef4444
Inputs and fields in error state
Spread:
3pxOffset: 0, 0Opacity: 30%Token reference
All shadow values are available as Figma variables in the Shadows collection.
| Token | Value | Description |
|---|---|---|
Shadows/sm | 0 2px 8px 0 | Cards, subtle floating elements |
Shadows/md | 0 8px 24px -4px | Dropdowns, popovers, tooltips |
Shadows/lg | 0 16px 40px -8px | Modals, dialogs, side sheets |
Shadows/xl | 0 24px 64px -16px | Full-screen overlays, command palettes |
Shadows/focus | 0 0 0 3px (teal/30) | Default focus ring — all interactive elements |
Shadows/focus/error | 0 0 0 3px (red/30) | Error focus ring — error-state inputs and fields |
focus/color | rgba(51,169,146,0.3) | Focus ring colour (teal at 30% opacity) |
focus/color/error | rgba(239,68,68,0.3) | Error focus ring colour (red at 30% opacity) |
Guidelines
Elevation hierarchy — layer order for common UI surfaces
z-0
Base contentz-1
Cards (sm)z-10
Dropdown (md)z-50
Modal (lg)z-100
Overlay (xl)Do
- ✓Use elevation only when a component needs to float above the surface
- ✓Match shadow level to z-index layer (sm → cards, xl → overlays)
- ✓Always show focus rings — never suppress them with outline:none without a replacement
- ✓Use border + sm shadow on cards for better dark-mode visibility
- ✓Keep shadow color rgba(0,0,0) — never use coloured shadows except focus rings
Don't
- ✕Don't stack multiple shadows on the same element — pick one level
- ✕Don't use xl shadow for cards or tooltips — it creates visual noise
- ✕Don't remove the focus ring — it's a critical accessibility requirement
- ✕Don't use shadows as a substitute for borders in dark mode
- ✕Don't mix elevation levels within the same component group