Foundations
Radius
Seven steps. Editorial corners on body surfaces, pill on identity surfaces, hairline on dense controls.
Scale
--supa-radius-xs
2px
Hairline corners on dense controls.
--supa-radius-sm
4px
Inputs, small buttons, badges.
--supa-radius-md
6px
Default surface — cards, panels, popovers.
--supa-radius-lg
8px
Larger surfaces — sheets, dialogs.
--supa-radius-xl
12px
Hero panels, marketing cards.
--supa-radius-2xl
16px
Drawer top, full-bleed panels.
--supa-radius-pill
999px
Chip / Badge end-caps and avatars.
Why
Radius carries identity. Pill says "person" or "label"; md says "document"; xs says "dense control". Pick from the scale so a brand override on one tier re-skins the entire kit consistently.