# Foundations · Radius

Corner radius scales with component density. Pick from the curated set — never hand-roll a value.

## Scale

| Token | px | Use |
|-------|-----|-----|
| `none` | 0    | Resets, full-bleed images |
| `xs`   | 2    | Chips, inline tags |
| `sm`   | 4    | Inputs, small controls, tooltips |
| `md`   | 8    | Buttons, default surfaces |
| `lg`   | 12   | Cards, sections |
| `xl`   | 16   | Modals, sheets, elevated cards |
| `2xl`  | 24   | Marketing surfaces, feature panels |
| `full` | 9999 | Pills, avatars, badges, circular buttons |

## Rules

- ✅ Match radius to size: small controls get `sm`, big surfaces get `lg`/`xl`. A 600px modal at `rounded.sm` looks broken.
- ✅ Nested radii — the inner radius should be `outer - padding` to keep the corner concentric. Most of the time `lg` outside + `md` inside reads right.
- ❌ Don't mix more than two radii in a single composition.
- ❌ Don't use `full` on anything taller than 32px unless it's intentionally circular.

## Per-platform notes

- iOS: Apple's continuous corners are not directly available in CSS — accept the small perceptual difference rather than approximating.
- Tailwind v4: bind these to `--radius-{token}` in `@theme`, e.g. `--radius-md: 8px`. The product family does this in `globals.css`.