Elevation and material Layers TokenValue--helix-layer-beneath-1--helix-layer-base0--helix-layer-raised10--helix-layer-sticky100--helix-layer-overlay1000--helix-layer-toast1200 The five main layers are named after what sits at each one. A numbered scale leads to values such as z-index: 1001 that nobody can explain, and those values cause stacking context bugs. LayerWhat is at itbaseThe documentraisedSomething lifted but still in the flow: a hovered row, a dragged cardstickyA header or a column that stays while content scrolls under itoverlayMenus, dialogs, popovers, tooltipstoastAbove everything, including a modal Most overlays do not need these tokens. They use the popover API and render in the browser's top layer, which is always above every z-index. Use the tokens for the cases the top layer does not cover: your own sticky header your own dragged element anything that has to sit between two of our layers Shadows TokenValue--helix-shadow-nonenone--helix-shadow-sm0 1px 2px var(--_helix-shadow-ink-sm)--helix-shadow-md0 4px 12px var(--_helix-shadow-ink-md)--helix-shadow-lg0 12px 32px var(--_helix-shadow-ink-lg)--helix-shadow-surfacevar(--helix-shadow-none)--helix-shadow-floatingvar(--helix-shadow-lg) The first four are the values. The last two are policy tokens. A theme sets them to make your interface shadow-first or border-first. See Surfaces and separation. Material Eight tokens describe translucency: TokenValueFor--helix-material-backdropblur(var(--helix-material-blur-md)) saturate(1.5)The tint behind a modal.--helix-material-opacity1How opaque a translucent surface is.--helix-material-blur-sm8pxThe lightest backdrop blur.--helix-material-blur-md16pxThe backdrop blur behind a modal.--helix-material-blur-lg32pxThe heaviest backdrop blur.--helix-material-translucentcolor-mix(in oklab, light-dark(oklch(1 0 0), oklch(0.182 var(--helix-seed-neutral-chroma, 0) var(--helix-seed-neutral-hue, 258))) 30%, transparent)The translucent background, for a surface that shows what is behind it.--helix-material-translucent-strongcolor-mix(in oklab, light-dark(oklch(1 0 0), oklch(0.182 var(--helix-seed-neutral-chroma, 0) var(--helix-seed-neutral-hue, 258))) 88%, transparent)The stronger translucent background, for a surface that shows less of what is behind it.--helix-material-borderlight-dark(color-mix(in oklab, oklch(0.15 var(--helix-seed-neutral-chroma, 0) var(--helix-seed-neutral-hue, 258)) 14%, transparent), color-mix(in oklab, oklch(1 0 0) 12%, transparent))The border a translucent surface needs to keep a visible edge. The material axis draws its three values, frosted, glass, and transparent, with these tokens. Material is an axis of its own, separate from emphasis, because a panel can be glass and outlined at the same time. Two properties that can apply at once belong on two axes. See Visual axes. Use blur with care, because it is expensive. A backdrop-filter makes the compositor read what is behind the element again on every frame the element moves. A frosted header that is always on screen pays that cost all the time. When you want depth without the frosted texture, use translucent without the blur. A translucent surface takes its color from what is behind it, so on a busy background it has no visible edge. material-border gives it one, so it keeps its shape.