Elevation
Four levels, as in Material 3, for things that sit above the page, plus the edges of panels and sheets. Shadows carry the depth; in dark they are stronger, and side panels gain a hairline edge.
Levels
Each level is two shadows: a tight one that defines the edge and a soft one that sets the distance. Light shadows are tinted with the darkest neutral, so they stay green-gray rather than dirty; dark shadows are pure black.
Edges
Panels, sheets and bars cast their shadow toward the page they cover. In light the shadow alone separates them; in dark a shadow barely shows, so the side panel, the top bar, the sidebar and the Edit layout bar draw a 1 px edge in a darker neutral instead of, or as well as, the shadow.
Where each is used
| Token | Used by | In the system |
|---|---|---|
elevation.1 |
Cards of the overview, tables and demo frames of this site | Card |
elevation.2 |
Menus, the search results, the controls of the route map, the Edit layout bar | Menu, SearchField |
elevation.3 |
Dialogs and toasts | Dialog, Toast |
elevation.4 |
A card while it is dragged; it settles back to 1 when dropped, over its drop placeholder | Editing the overview |
elevation.panel |
Side panels: delivery and invoice details, New order, Reorder | Dialog (end) |
elevation.sheet |
Sheets that hang from the top bar | All modules |
elevation.sheet-up |
Bottom sheets and the navigation drawer on phones | Dialog (bottom) |
elevation.top-bar |
The top bar over the scrolling page | App shell |
elevation.sidebar |
The sidebar’s edge: nothing in light, a hairline in dark | App shell |
elevation.edit-bar |
The bar at the foot of Edit layout: level 2 in light, a hairline in dark | Editing the overview |
Tokens
| Token | Preview | Light | Dark |
|---|---|---|---|
--sonar-elevation-1
Cards. |
0 1px 2px 0 #171D16 6.4%
0 1px 8px 2px #171D16 4%
|
0 1px 2px 0 #000000 28.2%
0 1px 8px 2px #000000 17.6%
|
|
--sonar-elevation-2
Menus and map controls. |
0 1px 2px 0 #171D16 12.8%
0 2px 6px 2px #171D16 8%
|
0 1px 2px 0 #000000 56.3%
0 2px 6px 2px #000000 35.2%
|
|
--sonar-elevation-3
Dialogs and toasts. |
0 1px 2px 0 #171D16 16%
0 4px 8px 2px #171D16 10%
|
0 1px 2px 0 #000000 70.4%
0 4px 8px 2px #000000 44%
|
|
--sonar-elevation-4
A card lifted while it is dragged. |
0 1px 2px 0 #171D16 19.2%
0 6px 10px 4px #171D16 12%
|
0 1px 2px 0 #000000 84.5%
0 6px 10px 4px #000000 52.8%
|
|
--sonar-elevation-panel
Side panels entering from the end. |
-6px 0 18px -7px #171D16 20%
|
inset 0 1px 0 0 #1B211B
-1px 0 0 0 #1B211B
-16px 0 36px -14px #000000 75%
|
|
--sonar-elevation-sheet
Sheets that hang from the top bar, such as Customize overview: a short shadow below the sheet only. Restored in 1.0.0-alpha.14. |
0 8px 18px -7px #171D16 20%
|
0 8px 18px -7px #000000 70%
|
|
--sonar-elevation-sheet-up
Bottom sheets and the navigation drawer on phones. |
0 -12px 32px -8px #000000 25%
|
0 -12px 32px -8px #000000 25%
|
|
--sonar-elevation-top-bar
The top bar over the page: a faint shadow under it. |
0 2px 8px 0 #000000 3.5%
|
0 1px 0 0 #1B211B
|
|
--sonar-elevation-sidebar
The edge of the sidebar against the page: none in light, where the surfaces already differ. |
none
|
1px 0 0 0 #171D17
|
|
--sonar-elevation-edit-bar
The bar of Edit layout at the foot of the window: level 2. |
0 1px 2px 0 #171D16 12.8%
0 2px 6px 2px #171D16 8%
|
0 -1px 0 0 #1B211B
|
Guidelines
- Elevation follows behavior, not importance: a card is level 1 whatever it contains.
- A card being dragged lifts to level 4 and settles back to level 1 when dropped.
- In the dark theme a shadow alone is hard to see, so side panels and bars also draw a 1 px edge.
- A menu or a list opened from something keeps one level above it: menus at 2 over cards at 1, dialogs at 3.
- Never add a shadow to show state (hover, selection): elevation changes only when something lifts, as a dragged card.