Four surface levels, each paired with its shadow, so depth means the same thing on every screen.
Elevation shows what sits on top of what. Atrium has four levels. Each raised level pairs a surface token with a shadow token: always use them together.
| Level | Tokens | Use for |
|---|---|---|
| Sunken | --at-surface-sunken |
A backdrop that groups other content, such as a column of cards |
| Default | --at-surface |
The page itself, inputs and secondary buttons |
| Raised | --at-surface-raised + --at-shadow-raised |
Cards |
| Overlay | --at-surface-overlay + --at-shadow-overlay |
Dialogs and menus that sit over everything else |
Example
Raised card
On a sunken backdrop.
Example
Raised card
On a sunken backdrop.
Rules
- Always pair a raised or overlay surface with its own shadow.
- Do not raise things just for emphasis. Most content sits flat on the page; use a card only to group.
- Never put a card inside a card, or a shadow on a shadow.
- In dark mode, higher surfaces are lighter, because shadows are hard to see on dark backgrounds. The tokens handle this for you.