Soft corners.

Five radii — four to sixteen, plus full for pills and avatars. Soft, never sharp; restrained, never bubbly.

Small

--radius-sm · 4px

Chips, badges, small controls

Medium

--radius-md · 8px

Buttons, inputs, fields

Large

--radius-lg · 12px

Cards, panels

Extra-large

--radius-xl · 16px

Modals, large surfaces

Full

--radius-full · full

Pills, avatars, dots

Corners are soft but measured — there is no zero radius. Larger surfaces take larger radii so corners read equally soft at every scale.

Rotate your phone for a larger view. Tap the slide to open it full size and zoom.

8.5 × 11 · Portrait