FoundationsRadius
Three radii. Pick the smallest that works.
The system has three meaningful radius tokens: 2 px, 4 px, 6 px. Anything outside that range is reserved for non-UI shapes (avatars, pills) and is itself a token, not a magic number.
The five tokens
The five radii are a step function, not a continuum. The step function is important: it forces the author to pick the smallest radius that reads correctly, not the largest one that looks "modern".
What goes where
The rules of thumb, in order. Default to the smallest radius that still reads as "rounded".
| Radius | Use |
|---|---|
| 0 | Inline elements, code chips, lines, the case study diagrams |
| 2 px | Badges, eyebrows, very small UI |
| 4 px | Buttons, inputs, cards, dialogs, the default UI radius |
| 6 px | Images, larger cards, popovers, modals |
| 9999 px | Avatars, pills, switch tracks, circular icons |
Across the system
The same radius tokens in actual components, side by side.
Card (4 px)
Title
Why three, not five
Carbon uses 4. Material uses 5. Polaris uses 3. The exact number doesn't matter; what matters is that the count is small enough to make the choice obvious and large enough to express the few distinct radius roles in a UI.
Three is the right number for this site because there are three radius roles: a small radius for things that should feel tight (badges, eyebrows), a default radius for the bulk of the UI (buttons, inputs, cards), and a slightly larger radius for things that need to feel "open" (modals, large feature cards). A 5-radius system would give us three extra values to argue about for almost no visible benefit.