Elevation and materials

Elevation shows what sits above what: a menu above the page, a dialog above everything. Content stays flat, and height is kept for surfaces that float over it.

Levels

Level 0The page, resting cards, wells, tables--elevation-0No shadow
Level 1A clickable card under the pointer--elevation-18 px down, 24 px blur
Level 2The navigation rail, the bottom bar on a phone--elevation-212 px down, 32 px blur
Level 3Menus, popovers, dialogs, sheets, toasts--elevation-324 px down, 64 px blur

Each surface sits at one level. Content stays at the bottom and stands out from the page by its fill. A shadow appears only when a surface floats over the content or lifts under the pointer.

Height in both themes

In the light theme the shadow carries the height. A card is already white, so a menu cannot get lighter, and its soft shadow lifts it off the page. Light shadows take the navy of the ink, since black turns a white page gray.

In the dark theme a shadow barely shows against a dark page, so a higher surface is also a lighter one. The page is the darkest fill, a card is lighter and a menu lighter again.

Welders for a shipyard in Split

Croatia, 24 positions

Page: #f5f5f7 in light, #000214 in dark; --bg
Card: #ffffff in light, #191c2c in dark; --surface-1
Menu and dialog: white at 97 percent in light, #20232f in dark; --glass-fill-raised

Materials

Solid is the material of content. Pages, cards, fields and tables are opaque, and nothing shows through.

Frosted glass is for bars that float over scrolling content, such as the bottom bar on a phone. It blurs what passes underneath, so labels stay readable while the content stays in view.

Menus, popovers and dialogs use a raised fill that is nearly opaque, so their text reads as if on paper. On a phone they are fully opaque.

A scrim dims the page under a dialog or a sheet and tells people that the page is out of reach until they close it.

Welders for a shipyard in Split
Care workers for a clinic in Graz
Drivers for a logistics firm in Plovdiv
Cooks for a hotel in Dubrovnik
Electricians for a site in Bratislava
Warehouse staff for a depot in Brno
Nurses for a hospital in Ljubljana
Painters for a shipyard in Rijeka
Masons for a builder in Sofia
Farm workers for an orchard in Osijek
Welders for a shipyard in Split
Care workers for a clinic in Graz
Drivers for a logistics firm in Plovdiv
Cooks for a hotel in Dubrovnik
Electricians for a site in Bratislava
Warehouse staff for a depot in Brno
Nurses for a hospital in Ljubljana
Painters for a shipyard in Rijeka
Masons for a builder in Sofia
Farm workers for an orchard in Osijek

Solid: opaque; --surface-1
Frosted: blur 48 px with strong saturation; --glass-blur-nav
Raised: nearly opaque, blur 28 px; --glass-fill-raised
Scrim: navy at 44 percent in light, 66 percent in dark; --overlay

When glass is allowed

Use glass only on the outermost surface. A glass surface inside another can blur only its parent, not the page, so it turns into a flat gray patch.

Text on frosted glass carries a soft halo in the color of the surface, which keeps it readable over any content. Do not add contrast to the blur to help legibility, since it crushes the content beneath into gray.

When the browser cannot blur, or the reader asks for less transparency, glass falls back to its solid fill. In forced colors it takes the system background and a 1 px edge.

Stacking order

Layers stack in a fixed order, from sticky headers at the bottom to toasts at the top. Give a layer its token, not a number of your own.

A layer opened from inside another opens within it. A menu opened in a dialog renders in the dialog’s layer, so it shows above the dialog and closes first.

Escape closes the top layer only, and focus returns to the control that opened it.

Sticky table and list headers: 20; --layer-sticky
Page header, navigation rail: 40; --layer-header
Menu, popover, tooltip: 65; --layer-popover
Dialog, sheet, scrim: 60; --layer-dialog
Toast: 70; --layer-toast

Permitted and not permitted

Permitted

A shadow on surfaces that float over content
Menus, dialogs and bars that stay in view as the page scrolls.
Frosted glass on a bar over scrolling content
The blur keeps its labels readable.
Layer values from the layer tokens
The stacking order stays the same across screens.

Not permitted

A shadow on a card at rest
A resting card is flat and separates by its fill.
Glass inside glass
The inner surface blurs only its parent and turns gray.
A black shadow
It turns a white page gray.
A z-index such as 1000 or 9999
Pick the layer the surface belongs to.

NextIconography

Elevation and materials

Names the elevation levels, the materials and the stacking layers, and says when a surface may use glass.

Kind: foundation
Page: https://design.werklist.com/foundations/elevation
Version: 2.1.2

Rules

Each surface sits at one level. A shadow appears only when a surface floats over the content or lifts under the pointer.
Content surfaces sit at --elevation-0 and separate by fill. No shadow on a card at rest.
Menus, popovers, dialogs, sheets and toasts sit at --elevation-3 with the raised material.
In the light theme the shadow carries the height. Light shadows take the navy of the ink, never black, which turns a white page gray.
In the dark theme a higher surface is a lighter one: --bg, then --surface-1, then --glass-fill-raised.
Frosted glass only for bars that float over content scrolling beneath them.
Glass sits on the outermost surface only. Glass inside glass blurs only its parent and turns gray.
No contrast added to a blur. It crushes the content beneath into gray.
A scrim dims the page under a dialog or a sheet, and the page is out of reach until it closes.
Layers stack in a fixed order, from sticky headers at the bottom to toasts at the top.
z-index only from --layer-sticky, --layer-header, --layer-popover, --layer-dialog, --layer-toast. Never a value such as 1000 or 9999.
A layer opened from inside another opens within it. A menu opened in a dialog shows above the dialog and closes first.

Anatomy

Level 0: the page, resting cards, wells, tables. No shadow (--elevation-0)
Level 1: a clickable card under the pointer. Shadow 8 px down, 24 px blur (--elevation-1)
Level 2: the navigation rail, the bottom bar on a phone. Shadow 12 px down, 32 px blur, fill --glass-fill (--elevation-2)
Level 3: menus, popovers, dialogs, sheets, toasts. Shadow 24 px down, 64 px blur, fill --glass-fill-raised (--elevation-3)
Solid material: opaque (--surface-1)
Frosted material: blur 48 px with strong saturation, text with a soft halo in the color of the surface (--glass-blur-nav)
Raised material: nearly opaque, blur 28 px, fully opaque on a phone (--glass-fill-raised)
Scrim: navy at 44 percent in light, 66 percent in dark, under dialogs and sheets (--overlay)
Layers: sticky 20, header 40, popover 65, dialog 60, toast 70 (--layer-popover)

States

Hover lift: a clickable card moves from level 0 to level 1 (--elevation-1)
Reduced transparency, or no blur in the browser: glass falls back to its solid fill (--surface-1, --glass-fill-raised)
Forced colors: glass takes the system background and a 1 px edge

Keyboard

Escape: Closes the top layer only and returns focus to the control that opened it.

Tokens

--elevation-0
--elevation-1
--elevation-2
--elevation-3
--glass-shadow-card
--glass-shadow-panel
--glass-shadow-raised
--glass-fill
--glass-fill-raised
--glass-blur-nav
--glass-blur-raised
--overlay
--surface-1
--bg
--layer-sticky
--layer-header
--layer-popover
--layer-dialog
--layer-toast

JSON

{
  "title": "Elevation and materials",
  "path": "/foundations/elevation",
  "url": "https://design.werklist.com/foundations/elevation",
  "text": "https://design.werklist.com/agent/foundations/elevation",
  "summary": "How surfaces rise above the page with shadow and fill, when glass is allowed, and the order in which layers stack.",
  "version": "2.1.2",
  "kind": "foundation",
  "name": "Elevation and materials",
  "purpose": "Names the elevation levels, the materials and the stacking layers, and says when a surface may use glass.",
  "anatomy": [
    {
      "part": "Level 0",
      "measure": "the page, resting cards, wells, tables. No shadow",
      "token": "--elevation-0"
    },
    {
      "part": "Level 1",
      "measure": "a clickable card under the pointer. Shadow 8 px down, 24 px blur",
      "token": "--elevation-1"
    },
    {
      "part": "Level 2",
      "measure": "the navigation rail, the bottom bar on a phone. Shadow 12 px down, 32 px blur, fill --glass-fill",
      "token": "--elevation-2"
    },
    {
      "part": "Level 3",
      "measure": "menus, popovers, dialogs, sheets, toasts. Shadow 24 px down, 64 px blur, fill --glass-fill-raised",
      "token": "--elevation-3"
    },
    {
      "part": "Solid material",
      "measure": "opaque",
      "token": "--surface-1"
    },
    {
      "part": "Frosted material",
      "measure": "blur 48 px with strong saturation, text with a soft halo in the color of the surface",
      "token": "--glass-blur-nav"
    },
    {
      "part": "Raised material",
      "measure": "nearly opaque, blur 28 px, fully opaque on a phone",
      "token": "--glass-fill-raised"
    },
    {
      "part": "Scrim",
      "measure": "navy at 44 percent in light, 66 percent in dark, under dialogs and sheets",
      "token": "--overlay"
    },
    {
      "part": "Layers",
      "measure": "sticky 20, header 40, popover 65, dialog 60, toast 70",
      "token": "--layer-popover"
    }
  ],
  "states": [
    {
      "name": "Hover lift",
      "change": "a clickable card moves from level 0 to level 1",
      "tokens": [
        "--elevation-1"
      ]
    },
    {
      "name": "Reduced transparency, or no blur in the browser",
      "change": "glass falls back to its solid fill",
      "tokens": [
        "--surface-1",
        "--glass-fill-raised"
      ]
    },
    {
      "name": "Forced colors",
      "change": "glass takes the system background and a 1 px edge"
    }
  ],
  "keys": [
    {
      "key": "Escape",
      "action": "Closes the top layer only and returns focus to the control that opened it."
    }
  ],
  "tokens": [
    "--elevation-0",
    "--elevation-1",
    "--elevation-2",
    "--elevation-3",
    "--glass-shadow-card",
    "--glass-shadow-panel",
    "--glass-shadow-raised",
    "--glass-fill",
    "--glass-fill-raised",
    "--glass-blur-nav",
    "--glass-blur-raised",
    "--overlay",
    "--surface-1",
    "--bg",
    "--layer-sticky",
    "--layer-header",
    "--layer-popover",
    "--layer-dialog",
    "--layer-toast"
  ],
  "rules": [
    "Each surface sits at one level. A shadow appears only when a surface floats over the content or lifts under the pointer.",
    "Content surfaces sit at --elevation-0 and separate by fill. No shadow on a card at rest.",
    "Menus, popovers, dialogs, sheets and toasts sit at --elevation-3 with the raised material.",
    "In the light theme the shadow carries the height. Light shadows take the navy of the ink, never black, which turns a white page gray.",
    "In the dark theme a higher surface is a lighter one: --bg, then --surface-1, then --glass-fill-raised.",
    "Frosted glass only for bars that float over content scrolling beneath them.",
    "Glass sits on the outermost surface only. Glass inside glass blurs only its parent and turns gray.",
    "No contrast added to a blur. It crushes the content beneath into gray.",
    "A scrim dims the page under a dialog or a sheet, and the page is out of reach until it closes.",
    "Layers stack in a fixed order, from sticky headers at the bottom to toasts at the top.",
    "z-index only from --layer-sticky, --layer-header, --layer-popover, --layer-dialog, --layer-toast. Never a value such as 1000 or 9999.",
    "A layer opened from inside another opens within it. A menu opened in a dialog shows above the dialog and closes first."
  ]
}

Raw file: https://design.werklist.com/agent/foundations/elevation