Border Radius

A scale of 12 corner radius tokens built on a 4px base unit.

Naos corner radius tokens follow a scale derived from a 4px base unit. The token name encodes the multiplier directly: corner-radius-x4 = 4 x 4px = 16px. corner-radius-x12 = 12 x 4px = 48px.

Naming convention

Steps x1 through x6 increment by 1 (4px per step), giving fine-grained control at smaller sizes. From x8 onward the scale uses larger multiples, suited to surfaces where more pronounced or fully circular corners are intentional.

How to apply

Match the radius to the size of the element. A radius that works on a large card will overwhelm a small input field, and a radius that reads well on a small element will look understated on a large surface. As a general rule, larger surfaces can carry more curvature; smaller elements need less.

Use corner-radius-x0 deliberately. Sharp corners signal structure and rigidity. Use them when an element should read as flush, edge-aligned, or strictly rectilinear - not as a default when no other token fits.

corner-radius-x40 creates full circles and pills. At 160px, any element whose smallest side is shorter than 160px will appear fully rounded. This is a special case - use it only when that shape is the intended result.

Keep radius consistent within a group. Elements that appear together - a set of cards, a row of tiles, a list of panels - should share the same radius. Mixing values within a group creates visual noise without communicating any difference in meaning.

The most important rule is to always use a token. Never hardcode a corner radius value.