Elevation
When something rises above the page, and what separates groups.
elevation.card
elevation.overlay
The five answers
| Question | Answer | Why |
|---|---|---|
| What rises above the page? | Cards too | Cards lift slightly to group offers. |
| How many shadow levels exist? | Two | One shadow for cards, one for overlays. |
| What separates groups on the page? | Cards | Cards group plans and offers. |
| How soft are shadows? | Soft | Soft shadows fit every brand. |
| Where does elevation show? | Cards, menus and dialogs | Cards, menus and dialogs rise. |
Tokens
Each token points to another token. Values live only on primitives, below.
Aster
| Token | Points to, light | Points to, dark |
|---|---|---|
elevation.card | aster.theme.light.elevation.card → shadow.card | aster.theme.dark.elevation.card → shadow.card-dark |
elevation.overlay | aster.theme.light.elevation.overlay → shadow.overlay | aster.theme.dark.elevation.overlay → shadow.overlay-dark |
Birch
| Token | Points to, light | Points to, dark |
|---|---|---|
elevation.card | birch.theme.light.elevation.card → shadow.card | birch.theme.dark.elevation.card → shadow.card-dark |
elevation.overlay | birch.theme.light.elevation.overlay → shadow.overlay | birch.theme.dark.elevation.overlay → shadow.overlay-dark |
Coral
| Token | Points to, light | Points to, dark |
|---|---|---|
elevation.card | coral.theme.light.elevation.card → shadow.card | coral.theme.dark.elevation.card → shadow.card-dark |
elevation.overlay | coral.theme.light.elevation.overlay → shadow.overlay | coral.theme.dark.elevation.overlay → shadow.overlay-dark |
The raw values these tokens end at are on Primitives › Effects.
When to use what
| Situation | Use | Not | Why |
|---|---|---|---|
| A card on the page | elevation.card | A border only | Cards lift slightly to group offers. |
| A menu or dialog | elevation.overlay and a dimmed page | No shadow | The shadow shows a menu or dialog floats above the page. Without it, it blends into the cards. |