Radius

Corner radius communicates approachability and helps group related content. We keep a small, deliberate scale rather than arbitrary values, and we derive nested radii mathematically so parent and child corners stay visually aligned.

Standalone elementsCopy Anchor Link

The default radius for elements that aren't nested inside another rounded container is 8px.

Purpose: ensures visual consistency and approachability across the UI.

Nested elementsCopy Anchor Link

When a rounded container wraps another rounded element, the parent's radius should be derived from the child's radius and the padding between them, so the two curves stay concentric:

Parent Radius = Child Radius + Padding

Applies to: containers wrapping content with rounded corners — cards with inner elements, dialogs, panels.

Example: child radius 4px + padding 8px → parent radius 12px.

Parent radius (12px) = child radius (4px) + padding (8px).

Purpose: aligns parent and child corners for a seamless, visually balanced design.

Implementation notesCopy Anchor Link

• Use design tokens or CSS variables wherever possible instead of hardcoding values:

  Copy Text

  --parent-radius: calc(var(--child-radius) + var(--padding));