Elevations

Three steps - sm, md, lg - each mirrored across the schemes: a dark surface needs a wider, softer shadow to read as the same lift.

Click any specimen to copy the token it documents, as var(--token).

How it works

Write box-shadow: var(--root-e--md) and name no scheme. Each token already mirrors.

sm - separation without hierarchy. The element stays on the page and is only told apart from it: a badge, a container, a group of rows, a control that has to read as a control. Reach for it when a border would do the job but would add one line too many. If the thing is meant to look like it has been picked up, this is the wrong step.

md - one layer above the content. The surface is on top of the page rather than in it: a card, a dropdown, a popover, a menu, a toast. This is the step to reach for by default when something opens over something else and is still part of the same view.

lg - above everything. Reserved for what takes the whole screen's attention: a modal, a dialog, a drawer, a primary floating action. It is the loudest of the three, so a page that uses it more than once at a time has two things claiming to be the most important. When in doubt between md and lg, ask whether the rest of the page is still usable underneath - if it is, the answer is md.

The values. No X offset on any step, so the lift is vertical; Y, blur and spread grow with the step - in the light scheme 2 / 20 / 0, 4 / 40 / -2, 18 / 60 / 2, in px - on a neutral grey at 20%, 25% and 35%, never a tint. The dark scheme keeps the Y and widens the blur to 38, 70 and 80.

Two columns. A shadow is only readable against the surface it was tuned for, and the grey that lifts a light card is all but invisible on a dark one. Each column pins its own color-scheme and prints the shadow the browser resolved there.

One limit. The color mirrors through light-dark(), which follows the ColorSchemeSwitcher, while the blur mirrors through prefers-color-scheme, which does not - a length cannot go through light-dark(). Under a manual override the tint moves and the blur stays at the system scheme's.

Elevations

How it works

Light

Dark