Corner Radii

Corner radii add visual softness and a sense of cohesion to our UI components. By standardizing corner radii, we ensure consistency across all design elements, enhancing the overall user experience. Our corner radius values are defined as design tokens and are used to create variations that cater to different design needs.

Storybook

Storybook - Corners Documentation

Figma Demo

Guidelines

Variations

The defined corner radius values provide flexibility and adaptability in design, ensuring that components can be styled to suit different contexts and purposes.

  • XS (4px): Ideal for small elements such as buttons, input fields, and small cards.
  • SM (8px): Suitable for medium-sized elements like larger buttons, medium-sized cards, and tooltips.
  • Default (16px): Used for standard elements like modals, large cards, and primary containers.
  • LG (24px): Best for large surfaces such as hero sections, large modals, and key feature containers.
  • Full (9999px): Creates a fully rounded effect, typically used for circular elements like avatars and action buttons.

Usage

To ensure a consistent and coherent design, apply the corner radius values thoughtfully across various UI components:

  • XS: Use for minimal visual softness without compromising sharpness and precision.
    • Code: rounded-xs
  • SM: Apply to elements requiring a moderate amount of roundness for a balanced look.
    • Code: rounded-sm
  • Default: Employ for the majority of components to maintain consistency and familiarity.
    • Code: rounded
  • LG: Use sparingly for emphasis on larger elements that benefit from a softer, more inviting appearance.
    • Code: rounded-lg
  • Full: Reserve for specific circular elements or to achieve a unique, rounded style.
    • Code: rounded-full

Best Practices

  • Consistency: Maintain consistency in applying corner radii across similar elements to create a unified design language.
  • Hierarchy: Use larger radii for prominent elements to draw attention and smaller radii for less critical components.
  • Context: Consider the context and purpose of the element when choosing the appropriate corner radius.
  • Balance: Ensure a balance between rounded and sharp corners to avoid visual clutter and maintain a clean design.

Accessibility

  • Touch Targets: Ensure that interactive elements with rounded corners meet the minimum touch target size (44x44 pixels) for accessibility​⬤