Elevation
Five questions every design system answers about elevation. These are Brand expressive’s answers, and each one points back to the reasons that chose it.
View all 2 elevation tokens ↓The reasons this scheme answers from
- R1BrandBold, loud
- R2Content and dataImages and campaigns, one idea at a time
Question 1
What rises above the page?
- Only what floats
- Cards too (chosen)
- Nothing
Why Brand expressive picks it: Cards lift to feel like objects.
becauseR1
Question 2
How many shadow levels exist?
- None
- One
- Two (chosen)
Why Brand expressive picks it: One shadow for cards, one for overlays.
becauseQ1
Question 3
What separates groups on the page?
- Space
- Lines
- Cards (chosen)
Why Brand expressive picks it: Cards hold each offer.
becauseR2
- Cards
- from shadow
Decisions point at primitives, so the rule lives in one place.
Question 4
How soft are shadows?
- No shadows
- Subtle
- Soft
- Pronounced (chosen)
Why Brand expressive picks it: Pronounced shadows add depth.
becauseR1
- card
- card
- → shadow.card· dark → shadow.card-dark
- overlay
- overlay
- → shadow.overlay· dark → shadow.overlay-dark
Question 5
Where does elevation show?
- Menus and dialogs
- Cards, menus and dialogs (chosen)
- Dialogs only
Why Brand expressive picks it: Cards, menus and dialogs rise.
becauseQ1
- card · 1 keys
- overlay · 1 keys
When to use
- A card on the pageUse: elevation.card (pronounced). Not: A flat card. Cards float to feel tactile.
- A menu or dialogUse: elevation.overlay and a dimmed page. Not: No shadow. Strong depth for floating things.
All elevation tokens
2 tokens · each decision and the primitive it points to
- shadow · 2
shadow.card0px 12px 32px 0px #1F141124shadow.overlay0px 24px 48px 0px #1F141133 - Decisions · 2
elevation.card{shadow.card}elevation.overlay{shadow.overlay}
Decisions reference primitives, so changing one primitive updates every decision and component that uses it.
Elevation in Brand expressive: pronounced. Pronounced shadows add depth. Cards, menus and dialogs rise.