Radius
We use three border radius sizes to create a consistent, approachable look across our UI.
Apply them based on component type, hierarchy, and visual balance.
Radius scale
| Token name | Value |
|---|---|
300 or small | 8px |
350 or medium | 12px |
400 or large | 16px |
round or full | 999999px |
Usage
System border tokens are available for the border-radius, border-width and
border-color CSS properties. Border tokens can also be applied with presets
that include all three properties preconfigured for specific use-cases.
React
Individual border properties can be set with the corresponding
style props of borderRadius,
borderWidth, and borderColor. Border presets are applied via the border
style prop.