Border Radius

Overview

In our design system, we use a consistent set of border radius values to ensure visual harmony and consistency across all components.

Usage

Variables

We have defined three primary border radius variables for designers and developers to use:

1. radius-lg 16px (1rem)
2. radius-default:8px (0.5rem)
3. radius-sm: 4px (0.25rem)

These values are designed to provide flexibility while maintaining a consistent visual language.

radius-sm (4px)

The small border radius is perfect for subtle rounding, giving a slight softness to elements without being too noticeable. It is great for smaller components like buttons.

radius-sm is used for this elements border-radius:

/* Example usage */
.element {
  border-radius: var(--radius-sm);
}

radius-default (8px)

The default border radius is suitable for most components, providing a balanced and modern look. It is versatile and can be used for nav items, icon buttons, small cards, and form elements.

radius-default is used for this elements border-radius:

/* Example usage */
.element {
  border-radius: var(--radius-default);
}

radius-lg (16px)

This large border radius is ideal for elements that need a more pronounced, rounded appearance. It works well for larger components such as cards and panels.

radius-lg is used for this elements border-radius:

/* Example usage */
.element {
  border-radius: var(--radius-lg);
}