Elevation
Five questions every design system answers about elevation. These are Content first’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 factorsAttention on the content, they see it fresh each time
- R2OutcomesReading comfort, losing your place
- R3BrandWarm, present
Question 1
What rises above the page?
- Only what floats (chosen)
- Cards too
- Nothing
Why Content first picks it: Only menus and dialogs float.
becauseR1
Question 2
How many shadow levels exist?
- None
- One (chosen)
- Two
Why Content first picks it: One shadow for floating things.
becauseQ1
Question 3
What separates groups on the page?
- Space (chosen)
- Lines
- Cards
Why Content first picks it: Space separates groups; lines would interrupt reading.
becauseR2
- Space
- from shadow
Decisions point at primitives, so the rule lives in one place.
Question 4
How soft are shadows?
- No shadows
- Subtle
- Soft (chosen)
- Pronounced
Why Content first picks it: Soft shadows suit warm paper.
becauseR3
- 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 Content first 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 border, no shadow. Not: A strong shadow. Cards stay flat on the page; shadows are for floating things.
- A menu or dialogUse: elevation.overlay and a dimmed page. Not: No shadow. The dimmed page focuses the reader on the dialog.
All elevation tokens
2 tokens · each decision and the primitive it points to
- shadow · 2
shadow.none0px 0px 0px 0px #00000000shadow.overlay0px 12px 32px 0px #1F1B1629 - 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 Content first: soft. Soft shadows suit warm paper. Menus and dialogs are the only layers.