◆ Spacing · Radii · v1.0
Soft corners, hard system
7-step radius scale
0 · 3 · 4 · 6 · 8 · 12 · ∞
01RADIUS LADDER · 7 named steps
never invent in-betweens
--r-0
SHARP · 0px
--r-1
CHIP · 3px
--r-2
★ INPUT · 4px
--r-3
BTN · ICON · 6px
--r-4
★ CARD · 8px
--r-5
PANEL · 12px
--r-full
PILL · ∞
02WHEN TO USE WHICH · element → radius
one shape per role
--r-0 · SHARP

Tickers · Code

Telemetry rails, code blocks, tabular data. Sharp corners signal raw data.

CODE · TICKER
--r-2 · INPUT

Inputs · Chips

Form fields, tag chips, dropdown items. 4px reads tight and precise — never round forms more.

INPUT · CHIP
★ --r-4 · CARD

Cards · Buttons

The workhorse. Every default card, button, panel sits at 8px. If unsure, this is the right answer.

★ CARD · BUTTON
--r-full · PILL

Pills · Avatars

Status pills, badges, avatars, dialpad keys. Fully round signals identity or state.

★ ACTIVE
03NESTING MATH · concentric radii
inner = outer − padding
OUTER · 12px
INNER · 8px
★ The concentric rule
rinner = router − pad
A 12px-radius card with 4px inner padding contains an 8px-radius child. This keeps the visible stroke parallel and prevents the dreaded "donut" gap.

Never nest equal radii — the inner element will look pinched. Never nest larger radius inside smaller — the child overflows.
04RULES · the radius opinion
three commitments
1

Pick by role, not size

Radius is a semantic token. An icon-button and an avatar are different things and shouldn't share a corner just because they're the same size. --r-3 for buttons, --r-full for avatars — every time.

2

Never mix scales

A panel of cards uses one radius for every card. A toolbar of icon-buttons uses one radius for every button. Mixing r-3 and r-4 in the same cluster is visual noise.

3

Soft outside, soft inside

If the outer card is rounded, the image inside it must clip to the same shape. Use overflow:hidden and border-radius:inherit on media. Sharp corners poking out of a rounded container is the #1 dev tell.

05TOKEN REFERENCE
--r-* · radius scale
--r-0sharp0px
--r-1chip3px
★ --r-2input4px
--r-3btn-icon6px
★ --r-4card8px
--r-5panel12px
★ --r-fullpill9999px
CONCENTRICruler-out − pad
OUTER PANELmarketing14–16px
MEDIA CLIPalwaysinherit
NEVERused2 · 5 · 10 · 14
NESTINGmax depth3 levels