Relief

How far this site lets a surface leave the page — ONE decision for the whole document, and the only one most consumers ever make. It scales every family at once, so turning it moves the lit edge, the sheen and the cast shadow together. Zero is flat and is what ships, so a consumer who never heard of it gets the page this library has always drawn. One is the depth the reference was designed at. There is no ceiling, but past about two a page stops reading as paper and starts reading as a stack of cards.

The THIRD shadow in the list — the one cast below the box, `0 2px 8px -2px` at one unit. The only family that scales its geometry as well as its ink, because a thing that is higher casts further as well as darker. On ink it is by far the loudest of the three, 52% against the rim at 24% and the sheen at 9%, which is why turning it feels like turning the master: it IS most of what the master does. On paper the balance inverts. Like the other three it is a SHARE of the master rather than a value of its own: 1 takes all of the dial, 0 takes none, 2 takes double.

The FIRST shadow in the list — an inset hairline along the top edge, `inset 0 1px 0 0`, and its geometry never moves. Light catching the top edge of something standing up. THE TWO GROUNDS NEED OPPOSITE MIXES, which is the whole reason these are separate dials and not one: on ink the rim is 24% and the cast shadow 52%; on paper the rim is 55% and the shadow 22%. It is what makes depth read at all on a dark ground, where a shadow under a card is a dark shape on a dark page and says nothing.

The SECOND shadow in the list — an inset wash falling down the fill, `inset 0 14px 14px -14px`, its geometry fixed like the rim's. A sheen washing down a filled surface, quietest of the three on ink at 9% and four times that on paper. Turn it up on its own for a glassy look; leave it at zero for shadows with no shine in them at all.

A band of light crossing a surface when you reach for it. The one relief family that moves, and the only one that is opt-in per element rather than automatic: it arrives with the `sheen` class and nowhere else. No slider, because it follows the dial.

How bright the band is, at the dial in force. There is no ink beside it: the band is `currentcolor`, so a light gleam lands on a dark fill and a dark one on cream, with nothing to configure.

How long the crossing takes. Slower than the ripple's blade at 640ms, on purpose — a press is answered and an invitation is offered, and an invitation that crosses at the speed of an answer reads as a twitch.

Noise over the page ground, and the one family here that is NOT depth. Lift, rim and gloss are three ways a surface says how far it stands off the page; this says whether the page is printed or screen-flat, which is true of a document whether or not anything on it is raised. So it is a dial of its own, independent of the master, and it ships at nothing. At the strengths worth using you do not see it — you notice its absence when it is switched off. A theme that wants the two coupled writes `--ds-grain: var(--ds-relief)` and gets the old behaviour back in one line.

ON PAPER — url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeColorMatrix type='matrix' values='0.08 0 0 0 0 0 0.08 0 0 0 0 0 0.08 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")

The texture itself, as a token, so a theme wanting paper fibre or a halftone states its own and base.css does not change. Three hundred-odd bytes of inline SVG: no request, no asset, nothing to host.

The tile. Larger reads as cloud, smaller as static.

ON PAPER — calc(var(--ds-grain) * 0.08)

How strong, at the dial in force. Zero at the shipped default, and the layer then paints nothing at all — measured pixel-identical against the same page with the rule deleted.

How the noise meets the ground. `normal` ships, and `overlay` is the better-looking answer — it darkens what is dark and lightens what is light rather than laying one wash over both. It is not the default because any blend other than `normal` forces the body to isolate, which changes how everything inside it composites at ANY opacity, zero included. Measured: with overlay, every viewport of two site pages differed from having no layer at all, while the layer was painting nothing.

How far a shadow falls at one unit of lift. Take it to zero and pair it with a wide blur for an omnidirectional glow, which is how depth reads on near-black.

How soft the edge is. At zero you get a hard offset block, which suits a hairline-ruled design better than it has any right to.

How much narrower than its box a shadow is. Negative on purpose: at zero a soft shadow haloes evenly on all four sides and the card reads as printed rather than as lifted.

How far down a fill the sheen washes before it is gone. Short is a highlight on the top edge; long is a gradient across the whole surface.

A field, a code block — pressed into the page rather than laid on it. The one rung that goes inward, and the one with no highlight: light catches the top edge of something standing up, and the top edge of a recess is the part in shadow.

A button, resting on the page. The unit the other rungs are measured against.

A card: the case plate, the CTA slab, the featured offer.

Something that has left the page — a dropdown panel, the dock, the plate control lying on a photograph.

A modal, over everything. The top of the ladder.

How much lift is on, once the master has had its say. The multiplication lives here rather than at twenty-one call sites.

The same for the lit edge.

The same for the sheen.

The same for the blade of light. Sheen IS depth, so unlike grain it stays a share of the master.

ON PAPER — calc(var(--ds-lift-on) * 22%)

How strong a shadow is at one unit of lift, as a percentage the dial multiplies. Per ground, and by a wide margin: on near-black a shadow has to be nearly opaque to be seen at all, and the same value on paper is a smear.

ON PAPER — calc(var(--ds-rim-on) * 55%)

How strong the lit edge is. Far higher on paper, where the highlight has to stand out from a surface that is already near-white.

ON PAPER — calc(var(--ds-gloss-on) * 40%)

How strong the sheen is.

ON PAPER — color-mix(in srgb, var(--ds-ink) var(--ds-lift-mix), transparent)

What a shadow is made of. Stated rather than derived on a dark ground — a shadow is the absence of light and no role in the system is darker than the ground itself. On paper it is the ink of the design; a neutral grey shadow over a warm ground reads as dirt.

ON PAPER — color-mix(in srgb, var(--ds-ground) var(--ds-rim-mix), transparent)

What the lit edge is made of: the brightest thing in the palette. On a dark ground that is the ink; on paper the ink is the darkest thing there is and the brightest is the ground itself.

ON PAPER — color-mix(in srgb, var(--ds-ground) var(--ds-gloss-mix), transparent)

What the sheen is made of. The same source as the rim, and for the same reason.

The zero rung, named. A component or a caller opts out with this rather than with `none` — `none` cannot appear inside a shadow list, so a rule that resets to it is a rule a focus ring can never be composed onto.

Read by the text inputs, the select, the affixed field and the code block.

Read by the button. It takes the raised rung on hover, so a door you have reached for comes further out of the page.

Read by the case plate, the CTA slab, the featured offer card and the sticky site header.

Read by the dropdown panel — which the megamenu composes with rather than repeating — and by the plate control on a clip.

The same rung falling the other way, read by the dock. A bar pinned to the bottom of the screen casts upward or it casts off the screen, and that is a second physical situation rather than a negated first one.

Read by the modal card, and by nothing else.