Elevation
Six levels of z-order, drawn as a hairline ring plus a very soft shadow, with no surface tint.
Elevation describes which surface is above which. Tanrei keeps the six semantic levels, 0 to 5, and draws them in a restrained way.
level0level1level2level3level4level5| Token | Light | Dark |
|---|---|---|
--tanrei-sys-elevation-level0 | ||
--tanrei-sys-elevation-level1 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) |
--tanrei-sys-elevation-level2 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 2px 0px rgb(0 0 0 / 0.04) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 2px 0px rgb(0 0 0 / 0.04) |
--tanrei-sys-elevation-level3 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 4px 8px -4px rgb(0 0 0 / 0.04) 0px 16px 24px -8px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 4px 8px -4px rgb(0 0 0 / 0.04) 0px 16px 24px -8px rgb(0 0 0 / 0.06) |
--tanrei-sys-elevation-level4 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 8px 16px -4px rgb(0 0 0 / 0.04) 0px 24px 32px -8px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 8px 16px -4px rgb(0 0 0 / 0.04) 0px 24px 32px -8px rgb(0 0 0 / 0.06) |
--tanrei-sys-elevation-level5 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 8px 24px -12px rgb(0 0 0 / 0.12) 0px 8px 32px -12px rgb(0 0 0 / 0.06) 0px 32px 72px -12px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 8px 24px -12px rgb(0 0 0 / 0.12) 0px 8px 32px -12px rgb(0 0 0 / 0.06) 0px 32px 72px -12px rgb(0 0 0 / 0.06) |
Generated from design/tokens/tanrei.light.tokens.json, design/tokens/tanrei.dark.tokens.json, tokens/sys/elevation.tokens.json
Each level above zero is a composite shadow token with two kinds of layer:
- a 1px ring in the
elevation-ringrole, which defines the edge crisply on any background; - one or two very soft, low-opacity shadows that grow with the level.
The ring is always the first layer. A platform that cannot draw shadow spread renders it as a one-pixel border and keeps the rest.
Raised surfaces are not tinted with the primary color. Depth is expressed by the ring, the shadow and, where needed, a step on the surface-container ladder. This keeps neutral surfaces neutral.
Shadows are hard to see against a near-black canvas, so in dark themes the ring does most of the work and raised surfaces also step to a lighter container role.
| Level | Typical use |
|---|---|
| 0 | The page and anything flush with it |
| 1 | Cards at rest, selected segmented options |
| 2 | Elevated buttons, raised cards on hover |
| 3 | Menus, popovers, snackbars |
| 4–5 | Dialogs, sheets and other modal surfaces |
Use as few levels as a screen can manage. If two neighbours need separating and neither floats, use a hairline instead.