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 9.

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

Badges, chips, tags, tooltips, compact indicators — and the segmented control’s inner trigger.

The rule

9Containers 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.