Skip to content

Radius

The design system has 6 preset radiuses. 
radius-0px
No radius
0px
radius-4px
Tiny
4px
radius-8px
Small
8px
radius-16px
Medium
16px
radius-32px
Large
32px
radius-1000
Round
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. 

radius-example-4px
radius-example-8px
radius-example-16px
radius-example-32px

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. 
radius-dont