Radius
Radius refers to the rounded corners of UI elements. Using consistent radius values helps to create a cohesive and harmonious design language.
Scale
Our radius scale is based on a 4px grid, with the following values:
2xs
6px
xs
8px
sm
12px
md
16px
lg
24px
xl
32px
2xl
48px
full
9999px
Tokens
Our radius tokens are available as CSS variables, Tailwind classes, and Figma tokens.
| Token name | CSS Variable | Class name | Output value |
|---|---|---|---|
| 2xs | --radius-2xs | rounded-2xs | 6px |
| xs | --radius-xs | rounded-xs | 8px |
| sm | --radius-sm | rounded-sm | 12px |
| md | --radius-md | rounded-md | 16px |
| lg | --radius-lg | rounded-lg | 24px |
| xl | --radius-xl | rounded-xl | 32px |
| 2xl | --radius-2xl | rounded-2xl | 48px |
| full | --radius-full | rounded-full | 9999px |