Skip to content
hightouchUI

Design system

v40.8.0

Border radius

Radius scales with element size. Smaller elements get tighter corners; larger elements get softer ones. This page lists the available tokens, explains how to pick the right one, and covers how to handle nested rounded containers.

Tokens

xs2px — elements 8px tall and smaller.
sm4px — elements around 16px tall.
md6px — elements around 20px tall.
lg8px — elements around 24px tall.
xl10px — elements around 40px tall.
2xl12px — elements 64px tall and larger.
3xl16px — decorative, for surfaces that need more rounding than 2xl.
4xl20px — decorative, for large surfaces or cards with extra rounding.
5xl24px — decorative, for hero surfaces or prominent containers.
full9999px — pills and circles.

Choosing the right radius

Pick a radius based on the height of the element — as the element gets taller, the radius increases to keep corners proportional.

Element height
Token
8px and below
xs
16px
sm
20px
md
24px
lg
40px
xl
64px and above
2xl

Tokens above 2xl (3xl, 4xl, 5xl) are not tied to a specific element height. Use them when you deliberately want a softer, more rounded look on larger decorative surfaces.

Nesting border radii

When nesting rounded elements, use this formula:

Outer radius = Inner radius + Padding

This keeps the inner and outer curves concentric. If you skip the math and reuse the same token for both, the gap between curves will look uneven — wider on the sides, pinched at the corners.

Correct

Inner lg (8px) + padding p={1} (4px) = outer 2xl (12px)

Incorrect

Same 2xl on both creates an uneven gap — corners pinch while sides bulge

Another example

Inner lg (8px) + padding p={2} (8px) = outer 3xl (16px)