Foundation

Shape & elevation

Radii range from the near-square checkbox to the fully-round pill. Elevation is used sparingly — the system prefers a border over a shadow (one or the other, never both).

Radii

checkboxvar(--radius-checkbox) · 4px

fieldvar(--radius-field) · 12px

tilevar(--radius-tile) · 12px

cardvar(--radius-card) · 20px

panelvar(--radius-panel) · 28px

pillvar(--radius-pill) · 999px

Elevation

cardvar(--shadow-card)Resting cards (when elevated)

raisedvar(--shadow-raised)Raised panels

overlayvar(--shadow-overlay)Dialogs and menus