Elevation
Five questions every design system answers about elevation. These are Dense data’s answers, and each one points back to the reasons that chose it.
View all 2 elevation tokens ↓The reasons this scheme answers from
- R1Human factorsPeople keep their place, they learn it and recognise it
- R2BrandPrecise, quiet
Question 1
What rises above the page?
- Only what floats (chosen)
- Cards too
- Nothing
Why Dense data picks it: Only menus and dialogs float; cards use lines.
becauseQ3
Question 2
How many shadow levels exist?
- None
- One (chosen)
- Two
Why Dense data picks it: One shadow for everything that floats.
becauseQ1
Question 3
What separates groups on the page?
- Space
- Lines (chosen)
- Cards
Why Dense data picks it: Thin lines guide the eye along rows.
becauseR1
- Lines
- from shadow
Decisions point at primitives, so the rule lives in one place.
Question 4
How soft are shadows?
- No shadows
- Subtle (chosen)
- Soft
- Pronounced
Why Dense data picks it: Subtle shadows keep the grid crisp.
becauseR2
- card
- card
- → shadow.none
- overlay
- overlay
- → shadow.overlay· dark → shadow.overlay-dark
Question 5
Where does elevation show?
- Menus and dialogs (chosen)
- Cards, menus and dialogs
- Dialogs only
Why Dense data picks it: Menus and dialogs are the only layers.
becauseQ1
- card · 1 keys
- overlay · 1 keys
When to use
- A card on the pageUse: A hairline border, no shadow. Not: A shadow. On a busy grid, lines separate. Shadows blur the edges.
- A menu or dialogUse: elevation.overlay and a dimmed page for dialogs. Not: A border only. Floating things need a shadow so they read as on top.
All elevation tokens
2 tokens · each decision and the primitive it points to
- shadow · 2
shadow.none0px 0px 0px 0px #00000000shadow.overlay0px 8px 24px 0px #0D111729 - Decisions · 2
elevation.card{shadow.none}elevation.overlay{shadow.overlay}
Decisions reference primitives, so changing one primitive updates every decision and component that uses it.
Elevation in Dense data: subtle. Subtle shadows keep the grid crisp. Menus and dialogs are the only layers.