Shape & Radius
Seven radius tokens define the corners of containers and controls. Choose them by component role.
Where the seven tokens belong
Controls · 4 / 6px
Controls · 4 / 6px
Content · 10 / 14px
Content · 10 / 14px
Large surfaces · 20 / 28px
Large surfaces · 20 / 28px
Pill · 999px
In practice
Use the 6px token for this compact control group. Group related controls with consistent spacing.
One clear idea
Turn one clear idea into a learning path. Give the next step room to become useful.
This content card uses 14px corners. Set its internal spacing separately.
This illustrative container uses 20px corners and leaves room around the symbol. Use the official asset for a production app icon.
Try the container radii
One clear idea
Turn one clear idea into a learning path. Give the next step room to become useful.
Compare how each radius changes the container. For production, choose the token assigned to the component's role. Keep the logo paths unchanged.
Rules and source
Use the existing tokens
r-xs 4px, r-sm 6px, r-md 10px, r-lg 14px, r-xl 20px, r-2xl 28px and r-pill. Pick by component role, not decoration.
The logo is not a radius token
Keep the master’s optical turns exactly as supplied. Container radii never justify smoothing or rebuilding the symbol.
Do
Repeat a small set of role-based shapes across an application.
Don’t
Do not add arbitrary radius values or round the source paths.
Open editable Figma sourceSource pages 12