Radius
Radius (often referred to as “border radius”) defines the curvature of the corners of UI elements. It contributes to the overall feel and branding of a product, influencing whether interfaces appear sharp and modern, soft and friendly, or somewhere in between. A consistent radius system ensures that all components—from buttons to cards to modals—share a unified visual style.
Best practices
Limit the Number of Radius Values
Sticking to two or three options (e.g., small, medium, large) simplifies decisions and keeps the UI consistent.
Overusing different radii can create a fragmented look.
Use Appropriately for Brand Personality
If your brand is playful, slightly larger radii might suit.
For a more formal, professional vibe, smaller or sharper corners might be appropriate.
Maintain Accessibility
Although radius primarily affects aesthetics, large or unusual shapes shouldn’t hinder identification or clickable areas.
Ensure that focus outlines or other accessibility indicators still show clearly around rounded corners.
Document Use Cases
Specify which radius tokens to use for specific components (e.g., radius-sm for buttons, radius-md for cards).
This helps teams avoid mixing and matching radii arbitrarily.
Consider Device & Platform Constraints
Some platforms or design patterns (e.g., iOS) naturally lean towards more rounded corners.
Remain flexible if your design system spans multiple platforms.
Align with Other Foundations
Combine radius guidelines with spacing, color, and typography for a cohesive design language.
For example, test how shadows or borders look with different corner radii to maintain a clean and unified style.
Use tokens or variables (e.g., radius-sm, radius-md, radius-lg) so that changing a radius globally is quick and straightforward.
Summary
Radius is a subtle yet impactful design foundation that shapes the character and aesthetic of a product’s UI. By establishing a clear scale of border radii and mapping them consistently across components, you ensure a polished and cohesive appearance. Whether you prefer sharp edges for a modern feel or rounded corners for a softer tone, documenting and adhering to radius guidelines makes it easy to maintain visual harmony and express your brand identity effectively.
