Elevation & shape

Content that sits in the page uses tone: it steps up through the surface-container roles. Shadows are only for things that float. Each level is a 1px alpha ring plus two soft layers, defined with light-dark() so dark mode gets deeper, quieter shadows. On React Native the same levels ship as per-scheme boxShadow values.

Components use semantic shapes, not raw radii, so one decision changes every control. Tailwind: rounded-shape-control and so on. The primitive radius scale is unchanged.

A shape inside a shape keeps the same centre of curvature: inner radius = outer radius − padding, floored at --shape-min (4px). Menus (16px with 6px padding) use 10px items; the command palette (24px with 8px padding) uses 16px items.