---
title: "Elevation tokens"
description: "The six elevation levels as composite shadow values for light and dark."
url: "https://tanrei.chnotchy.com/tokens/elevation/"
last_updated: 2026-10-23T17:33:05.000Z
---

# Elevation tokens

> The six elevation levels as composite shadow values for light and dark.

Composite shadows under `tanrei.sys.elevation`. The first layer of every level above zero is the hairline ring. For guidance, read [Elevation](https://tanrei.chnotchy.com/foundations/elevation/).

| 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`