Radius

Radius (or radii) are the rounded corners in components, and other pieces of content. They give the Wise experience a bolder and more expressive appearance.

A diagram showing the radius of a circle.
Desktop scale

Name

Value

radius-small

16px

radius-medium

20px

radius-large

30px

radius-x-large

40px

radius-2x-large

60px

Mobile scale

Name

Value

radius-small

10px

radius-medium

16px

radius-large

24px

radius-x-large

32px

radius-2x-large

48px

Example

Patterns such as the Card Cluster use the radius tokens in conjunction with padding to ensure the content that sits inside has enough room to breath, making it easier to digest.

Card Cluster pattern on desktop
Desktop

radius-x-large

40px

Card Cluster pattern on mobile
Mobile

radius-x-large

32px