Shape and depth

Every radius in use. The Pill Rule: if it can be pressed, it is a pill, and variants change the material, never the shape. Surfaces take the soft corners, rounder the higher they float.

The Altitude Rule: the higher a surface floats, the rounder its corners. A field sits in the page at 12px, a menu floats at 14px, a card at 16px, the canvas at 18px and a dialog, highest of all, at 20px.

Every control snaps to one ladder: 24, 30, 36 and 44px. Buttons, fields, search and segmented controls of the same size share a height, so any toolbar lines up. 36px is the default.

Flat inside the page, lifted at the frame. The sidebar and header share the porcelain ground, so the white canvas is the only raised plane. Inside the canvas, depth is tonal: hairlines, sunken wells and pebble fills.

Kept for what floats over the page, and for pills, which carry a hairline ring and a 1px drop so a white pill still reads on a white canvas. In light, shadows are teal-tinted near-black; in dark they deepen to black and gain a faint white ring, because a shadow alone vanishes on a dark ground.

The Hairline-or-Shadow Rule: a surface carries a 1px hairline or an elevation shadow, never both. A card that lifts swaps its hairline for a transparent border, so changing variant never moves its content.

A 4px base with 2px half-steps. Component interiors live on 2 to 12px, with odd pixels (5, 7, 9, 11px) kept as optical corrections around icons; layouts use 16px and up.

Pills inside a card inside the canvas: each level rounder than the one it sits in.