Radius

Four values, used with discipline. Rounded without being friendly-to-a-fault. Pills for controls, generous corners for containers, sharp never.

Scale#

radius-sm

8px--radius-sm

Small UI: badges, verified tags, inline chips.

radius-md

12px--radius-md

Input fields, inner cards, image holders.

radius-lg

16px--radius-lg

Product cards, brand profile, containers.

radius-full

9999px--radius-full

Buttons, filter chips, search bar — anything that's a pill.

Controls are pills. Buttons, chips, search bars, trust badges — all radius-full. Nothing that invites clicking should be square.
Containers are radius-lg (16 px). Cards, modals, section surfaces. Large enough to feel deliberate, tight enough to feel like engineering.
Inner elements are radius-md (12 px). An input inside a card is a step tighter than the card itself.
Never square corners. No exceptions in UI. Full-bleed images are the only rule-free surface.