Radius

Sharp by default. The mechanism is precise — tight radii for controls, slightly softer for containers, pills only for explicitly rounded elements. No soft, bubbly corners by default.

Scale

2px

--radius-sm Inputs, small controls, code blocks

4px

--radius-md Cards, containers, buttons

8px

--radius-lg Dialogs, large surfaces

999px

--radius-pill Tags, badges, toggles

50%

--radius-circle Avatars, status dots

In Context

INPUT (SM)

--radius-sm (2px)

BUTTON (MD)

--radius-md (4px)

CARD (MD)

Card

--radius-md (4px)

DIALOG (LG)

Dialog

--radius-lg (8px)

TAG (PILL)

TAG

--radius-pill (999px)

AVATAR (CIRCLE)

--radius-circle (50%)

KEY RULE

Sharp by default. The radius scale matches the "exposed mechanism" personality — precision instrument, not soft cushion. Pill (999px) and circle (50%) are special-purpose, used only for elements that explicitly need rounding (tags, badges, avatars, toggles).