--radius-xs
4px · kbd, code chip
Foundations · Radius
Match the curve to the element.
Five named radii from sharp to friendly. Buttons stay smaller, cards go larger, status pills are fully rounded with --radius-pill.
Border radius
Match the radius to the element: buttons stay smaller, cards go larger, status pills are fully rounded.
--radius-sm
6px · button, input
--radius-md
8px · callout, toast
--radius-lg
12px · card
--radius-xl
16px · feature card