Foundations
Radius
Friendly corners throughout. The extra softness makes technical interfaces feel approachable while keeping the hierarchy crisp and product-focused.
The scalePermalink to this section
Five values. Most of the product uses two of them.
--radius-sm
6px
Checkboxes, code chips, menu items
--radius-md
12px
Buttons, inputs, most containers
--radius-lg
16px
Cards, previews, dialogs
--radius-xl
18px
Large feature panels only
--radius-full
999px
Badges, avatars, switches
AppliedPermalink to this section
Radius scales with the size of the surface. A small control with a large radius looks inflated; a large surface with a small radius looks unfinished.
| Element | Radius | Why |
|---|---|---|
| Checkbox | 6px | Small enough that a larger radius would round it away |
| Button, Input, Select | 12px | The workhorse value — most controls in the system |
| Card, Dialog, Preview | 16px | Large surfaces need a proportionally larger corner |
| Command menu | 16px | Matches dialogs, since it is the same kind of surface |
| Badge, Avatar, Switch | 999px | Fully round — shape is part of what identifies them |
| Feature panel | 18px | Marketing surfaces only, and rarely |
In contextPermalink to this section
The scale as it actually appears, on the components that use each step.
16px — card
Cards, dialogs and preview frames all share this corner.
NestingPermalink to this section
When one rounded surface sits inside another, the inner radius should be smaller by roughly the padding between them. Equal radii make the inner corner look like it is bulging outward.
Do — reduce the inner radius
The inner corner sits concentrically inside the outer one, which is what the eye expects.
Don't — repeat the same radius
With equal radii the gap between the two curves varies around the corner, and the inner shape reads as misaligned.
RestraintPermalink to this section
Full-round is a strong shape. Applying it to containers is the fastest way to make a technical product look like a consumer app.
Do — reserve pills for small controls
Badges, avatars and switches are identified partly by their shape, so the full radius is doing work.
Don't — round every container
A pill-shaped card wastes its corners, breaks alignment with everything beside it, and reads as decorative.
Where the values came from
The visual reference favours visibly rounded controls and larger 16–18px surfaces. Those translate into two reusable system steps:--radius-md for controls and --radius-lg for surfaces; 6px and 18px fill either end.