Radius (also known as rounded corners) can play an important role in a design system by:
- Creating visual interest: Rounded corners can help to soften the appearance of design elements and add visual interest to designs.
- Improving usability: Rounded corners can make designs easier to use by reducing sharp edges and creating a more friendly, approachable feel.
- Reinforcing brand identity: Consistent use of radius across designs can reinforce brand identity and improve recognition.
- Enhancing accessibility: Rounded corners can make designs more accessible, particularly for users with visual impairments or disabilities.
- Improving user experience: Rounded corners can help to create a more cohesive and pleasant user experience by providing a consistent visual element across designs.
- Enhancing contrast: Rounded corners can help to improve the contrast between design elements, making it easier for users to differentiate between them.
- Improving legibility: Rounded corners can help to improve the legibility of text by making it easier to read against the background.
By using radius as part of a design system, designers and developers can ensure that designs are visually appealing, accessible, and consistent, helping to improve the overall user experience.
Radius
We use a 4px system for our radius. Our base radius is 4px and the rest of the values are multiples of the base radius. If the base value changes, the rest of the values will change accordingly.
Radius