Foundations
Radius
Seven steps, and each one maps to a role. Radius is what makes a system feel consistent — a stray 10px corner is more noticeable than a wrong colour.
Scale
radius.xs4px
radius.sm6px
radius.md8px
radius.lg12px
radius.xl16px
radius.2xl22px
radius.full9999px
Applications
Radius follows role, not taste. These are the only pairings you should need.
radius.sm — small controls
Tag
radius.md — default controls
radius.lg / xl — surfaces
Panels and cards use 12px. Dialogs lift to 16px because they float furthest from the canvas.
Reference
| Token | Value | Utility | Use for |
|---|---|---|---|
radius.xs | 4px | rounded-xs | Inline code, tiny chips |
radius.sm | 6px | rounded-sm | Small controls, kbd, tags |
radius.md | 8px | rounded-md | Default control radius |
radius.lg | 12px | rounded-lg | Cards, panels |
radius.xl | 16px | rounded-xl | Dialogs, hero surfaces |
radius.2xl | 22px | rounded-2xl | Special showcase surfaces only |
radius.full | 9999px | rounded-full | Dots, avatars, switch track |
Rules
Do
- Match a control's radius to its size.
- Nest surfaces with an
inheritradius and one step of padding. - Keep the switch track and its thumb fully round.
Don't
- Default to pill-shaped buttons — they read as consumer, not analytical.
- Mix two radii inside one component group.
- Use
rounded-nonefor “technical” unless the surface is a table edge.