Elevation
Five questions every design system answers about elevation. These are Accessible 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
- R1People and work contextEveryone, including people with disabilities, AAA
Question 1
What rises above the page?
- Only what floats
- Cards too
- Nothing (chosen)
Why Accessible first picks it: Flat is easier to read at high zoom.
becauseR1
Question 2
How many shadow levels exist?
- None (chosen)
- One
- Two
Why Accessible first picks it: No shadows.
becauseQ1
Question 3
What separates groups on the page?
- Space
- Lines (chosen)
- Cards
Why Accessible first picks it: Strong borders separate groups at any zoom.
becauseR1
- Lines
- from shadow
Decisions point at primitives, so the rule lives in one place.
Question 4
How soft are shadows?
- No shadows (chosen)
- Subtle
- Soft
- Pronounced
Why Accessible first picks it: No shadows; borders do the work.
becauseQ1
- card
- card
- → shadow.none
- overlay
- overlay
- → shadow.none
Question 5
Where does elevation show?
- Menus and dialogs
- Cards, menus and dialogs
- Dialogs only (chosen)
Why Accessible first picks it: Only dialogs separate, with a dimmed page and a border.
becauseQ1
- card · 1 keys
- overlay · 1 keys
When to use
- A card on the pageUse: A strong border, no shadow. Not: A shadow. Shadows are hard to see; borders are not.
- A menu or dialogUse: A strong border and a dimmed page. Not: A shadow only. The dimmed page makes the dialog obvious.
All elevation tokens
2 tokens · each decision and the primitive it points to
- shadow · 1
shadow.none0px 0px 0px 0px #00000000 - Decisions · 2
elevation.card{shadow.none}elevation.overlay{shadow.none}
Decisions reference primitives, so changing one primitive updates every decision and component that uses it.
Elevation in Accessible first: no shadows. No shadows; borders do the work. Only dialogs separate, with a dimmed page and a border.