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.
We use foundational tokens to set up all of our components and templates.
They are used as a base for our semantic tokens.
Name | Value |
|---|---|
radii-10 | 10px |
radii-16 | 16px |
radii-24 | 24px |
radii-32 | 32px |
radii-40 | 40px |
radii-64 | 64px |
radii-full | 50% |
Usage
- Use semantic tokens from the design system.
- Use semantic tokens, not foundational tokens in your work.
- Don’t use custom or hard-coded values.
Name | Value |
|---|---|
buttons-and-controls | radii-full |
input | radii-10 |
small-container | radii-16 |
large-container | radii-32 |
Most of the interactive components use completely rounded corners, making them distinct.
Inputs have an accentuated radius that still handles error messages and labels on top, without running into readability issues.
Components that have a varying amount of content inside use a border radius that — in combination with padding — gives content space to breathe, making it easier to read and digest.
When the area in the component increases, so does the border radius. For our components that occupy more space on screen, we use the most accentuated border radius.
