Elevation
Five questions every design system answers about elevation. These are Multi-brand’s answers, and each one points back to the reasons that chose it.
View all 2 elevation tokens ↓The reasons this scheme answers from
- R1Content and dataForms and tasks, a moderate amount
- R2BrandNeutral and adaptable, present
Question 1
What rises above the page?
- Only what floats
- Cards too (chosen)
- Nothing
Why Multi-brand picks it: Cards lift slightly to group offers.
becauseQ3
Question 2
How many shadow levels exist?
- None
- One
- Two (chosen)
Why Multi-brand picks it: One shadow for cards, one for overlays.
becauseQ1
Question 3
What separates groups on the page?
- Space
- Lines
- Cards (chosen)
Why Multi-brand picks it: Cards group plans and offers.
becauseR1
- Cards
- 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 Multi-brand picks it: Soft shadows fit every brand.
becauseR2
- 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 Multi-brand picks it: Cards, menus and dialogs rise.
becauseQ1
- card · 1 keys
- overlay · 1 keys
When to use
- A card on the pageUse: elevation.card. Not: A border only. Cards lift slightly to group offers.
- A menu or dialogUse: elevation.overlay and a dimmed page. Not: No shadow. Same overlay in every brand.
All elevation tokens
2 tokens · each decision and the primitive it points to
- shadow · 2
shadow.card0px 2px 8px 0px #0F172A14shadow.overlay0px 12px 32px 0px #0F172A29 - 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 Multi-brand: soft. Soft shadows fit every brand. Cards, menus and dialogs rise.