Borders & Elevation
Structure is drawn with 1px hairlines, and depth is expressed by surface lightness — not blur. Corners are sharp everywhere; radius is 0 on every control. There is exactly one sanctioned shadow, and it belongs only to floating layers.
Hairline ramp
Four alpha-white rules do all the structural work — never solid gray. Each row below draws a box with the named border so you can compare weights directly.
Surface-step depth
Elevation is lightness. Each step lifts one measured notch above the canvas; a hairline seals the edge. No component casts a shadow to look raised.
The one overlay shadow
--pds-shadow-overlay is the single exception — reserved for floating layers that leave the document flow: Dialog, Popover, DropdownMenu, Tooltip, Sheet, Toast, CommandPalette. Nothing anchored in the page may use it.
Focus policy
With no shadows to signal state, focus must be unmistakable: a --pds-color-ring outline (the accent at 60% alpha) on every interactive element via :focus-visible. Tab into the controls below to see it — keyboard focus only, never on mouse click.