Elevation
Elevation is layering - making it clear a surface sits above the page.
Tokens live on theme.gds.core.shadow, grouped by direction and intensity.
Tokens
Shadow scale
Live values from theme.gds.core.shadow. Grouped by direction and intensity.
Bottom
Light from above — cards, menus, and raised controls.
Hover / focus accents
0px 1px 1px rgba(0,0,0,0.40)
Resting cards
0px 2px 2px rgba(0,0,0,0.04)
Card hover, raised buttons
0px 4px 4px rgba(0,0,0,0.16)
Menus, popovers, dropdowns
0px 8px 12px rgba(0,0,0,0.30)
Center
Even halo — tables, focus rings, and modals.
Tables, compact raised surfaces
0px 1px 4px rgba(0, 0, 0, 0.36)
Subtle dimming halo
0px 0px 8px rgba(0,0,0,0.24)
Focused interactive elements
0px 0px 16px rgba(0,0,0,0.16)
Modals, top panels
0px 0px 24px 8px rgba(0,0,0,0.24)
Top
Light from below — sheets and floating footers.
Bottom sheets, floating footers
0px -4px 8px rgba(0,0,0,0.08)
Heavy drawers, mobile sheets
0px -24px 80px rgba(0,0,0,0.30)
MUI bridge
Paper elevation
MUI elevation on GdsPaper maps to GDS bottom shadows via theme.shadows. Prefer named tokens when you need center or top shadows.
Elev 1
bottomXS
Elev 2
bottomXS
Elev 3
bottomS
Elev 4
bottomS
Elev 6
bottomM
Elev 8
bottomM
Elev 12
bottomL
Elev 16
bottomL
Elev 24
bottomL
Guidance
How to pick
Start from the surface role. Prefer color and spacing before stacking many shadows in one view.
Cards
bottomS → bottomMMenus
bottomLTables
centerSHalo
centerMModals
centerXLSheets
topM / topXLFocus
centerLIn code
Use named GDS tokens when you need a specific direction, or MUI elevation on
GdsPaper when you want the mapped bottom shadows:
import { GdsBox } from "@granicus/gds-core/GdsBox";
import { GdsPaper } from "@granicus/gds-core/GdsPaper";
<GdsBox
sx={(theme) => ({
p: 3,
bgcolor: "background.paper",
borderRadius: 1,
boxShadow: theme.gds.core.shadow.bottomS,
transition: "box-shadow 200ms ease",
"&:hover": { boxShadow: theme.gds.core.shadow.bottomM },
})}
>
Hover me
</GdsBox>
<GdsPaper elevation={8} sx={{ p: 3 }}>
Maps to bottomM
</GdsPaper>