Radius
At Leverage, our radius system is built on a foundation of 4-px multiples, using numeric values as semantic tokens. This approach provides clear, standardized rounding specifications for every component in our interface. By adhering to these consistent, easily referenced tokens, we ensure that all corners and edges maintain a uniform look and feel throughout the platform. This not only reinforces our overall design consistency but also streamlines collaboration between designers and developers, allowing everyone to speak the same language when it comes to element styling.
Tokens
token-name
semantic token
px
rem
radii-none
numeric-values/none
0px
0rem
radii-3x-small
numeric-values/20
2px
0.125rem
radii-2x-small
numeric-values/40
4px
0.25rem
radii-x-small
numeric-values/60
6px
0.375rem
radii-small
numeric-values/80
8px
0.5rem
radii-medium
numeric-values/120
12px
0.75rem
radii-large
numeric-values/16
16px
1rem
radii-x-large
numeric-values/200
20px
1.25rem
radii-2x-large
numeric-values/240
24px
1.5rem
radii-3x-large
numeric-values/320
32px
2rem
radii-full
numeric-values/1000
50%
50%
