Light and dark

Below 3 L*, two neighbouring surfaces read as the same one. The steps below are computed with the CIE L* formula every time the page opens, and the ui-tokens test measures them again against tokens.css.

The greys are neutral: each value has its three channels equal. This is Vercel, not hue 231 turned grey — the hue lives in the accent and in the brand pieces, not in the surfaces.

Four shots in dark: a 5% hairline of light around it, a 4% line of light on top, a hard black line underneath and a long shadow offset downwards. In light there are three, without the lines of light.

A diffuse shadow all around, over a near-black ground, is a smudge and not height. No shot has a negative Y offset, and the test checks it by reading the CSS.

Eight pixels of margin against the ground on top, bottom and right; on the left the ground is already there, because that is where the sidebar lives. Radius 16.

That margin is the definition: without it the island is the screen, and the surface ladder stops being visible.

It lives directly on the ground: no background of its own, no border, no shadow. Its text goes in the secondary weight and its icons one step quieter, and there is exactly one row lit.

It carries no specimen because there is nothing to draw: it is the absence of a surface. If you look at it and see a panel, somebody gave it a background.