Radius
The design system has 6 preset radiuses.
No radius
0px
0px
Tiny
4px
4px
Small
8px
8px
Medium
16px
16px
Large
32px
32px
Round
1000px
1000px
There is no one “right” radius, but a right way of using them – as long as they are systematically and consistently used within the product, they can be efficiently used to convey hierarchy, type of interactivity and structure of the application.
Here is one example of how radiuses could be used in various element sizes. The documentation does not enforce to use radiuses with these sizes.
Principles
- Do not override major components (e.g. buttons, input fields, radio checkboxes), unless the product requires specific radius styles
- In general, avoid using radius values that are not documented in the guidelines.