Foundations

Radius

Zetta runs on essentially two radii: 8px for component containers and a full round for pills and circles. Full-bleed uses 0. The only smaller corner anywhere is the 4px checkbox. This restraint is guardrail 6.

The radii

rounded.base 8px

Component containers — cards, inputs, buttons, dialogs, menus.

rounded.full 9999px

Pills and circles — badges, avatars, switches, progress, FABs.

rounded.none 0

Full-bleed edges that meet the viewport or another surface.

rounded.sm 4px

The one exception — the checkbox, and nothing else.

The rule

6Containers use 8px; pills, avatars, switches and progress use full; full-bleed uses 0. The checkbox at 4px is the only smaller radius.
Never reach for rounded-md / -lg / -xl on components — that softness is off-system.

Radius tokens and their values are on the Spacing & radius tokens page.