Radius

About the scale

Radius tokens give every brand a consistent corner-roundness language. Every primitive step is derived from three private dimens — base, stepdown, and stepup — so a brand can shift the entire scale by changing only those three values, and every dependent token follows. radius-md is the anchor: descend in stepdown increments to reach sm and xs, ascend in stepup increments to reach lg, and use radius-rounded for the pill end.

Resolved pixel values live in the active brand — the ladder above, the corner specimens at the top, and the full token inventory below all read live from the brand selected in the header, so the numbers you see match what your application gets.

Using the scale

Pick a token by intent, not by the size it happens to be at today.

Nudge tokens — use sparingly

radius-sm-nudge (6 px) and radius-md-nudge (12 px) sit one stepdown above their base. Reach for them only when the adjacent base step feels off by exactly one increment — for example, a card whose interior is radius-md but whose outer container needs to feel slightly softer than radius-lg. Default to the base steps; nudges are a fine-tuning escape hatch, not a fourth and fifth ladder rung.

Semantic aliases

Some tokens carry semantic intent rather than a position on the scale. Prefer the alias over the primitive when the intent matches — that way, if the design system later drifts (e.g. all CTAs adopt a softer corner), only the alias moves and every CTA updates with it. Brands are free to override an alias independently of its primitive, so don't assume an alias and a primitive that happen to share a pixel value today will keep doing so.

Live pixel values for each alias are in the full token inventory at the bottom of the page, resolved against the active brand.

Pairing with focus rings

A focus ring should trace the component's shape, not float on top of it. The ring's own radius must equal the component's radius plus the ring offset — otherwise the ring corners pinch inward (offset too small) or balloon outward (offset too large).

.button {
  border-radius: var(--crown-radius-md);
}
.button:focus-visible {
  outline: 2px solid var(--crown-color-border-focus);
  outline-offset: 2px;
  border-radius: calc(var(--crown-radius-md) + 2px);
}

Applying radius in code

Every radius token is exposed as a CSS custom property under --crown-radius-* and as a Tailwind utility under rounded-*.

CSS custom properties

.card {
  border-radius: var(--crown-radius-md);
}
.pill {
  border-radius: var(--crown-radius-rounded);
}

Tailwind utilities

<div className="rounded-md">…</div>
<div className="rounded-lg">…</div>
<button className="rounded-cta-md">Save</button>
<span  className="rounded-rounded">New</span>

Per-side and per-corner

The Tailwind preset emits side and corner variants for every token. Use them when only some corners should round — e.g. a tab head, a stacked card group, or the top of a bottom sheet.

<div className="rounded-t-lg">              {/* top corners only */}
<div className="rounded-tl-md rounded-tr-md"> {/* explicit per corner */}
<div className="rounded-s-md">               {/* logical start side  */}

Resetting

Use rounded-none (or border-radius: 0) to flatten corners — for example, on the inner edge of a button group where adjacent buttons should share a seam.

Do and don't

• ✅ Reach for the semantic alias (radius-cta-*, radius-list-grouped) before the primitive when the intent matches. It future-proofs the call site against scale drift.
• ✅ Use radius-rounded for pills and circular shapes. It resolves to a value larger than any in-system component width, so the corners always meet.
• ✅ Derive focus-ring radius with calc(var(--crown-radius-*) + offset) so the ring stays concentric with the component.
• ❌ Don't mix scales inside a single component. An outer card at radius-lg with inner controls at radius-xs reads as two design systems colliding. Stay within one step.
• ❌ Don't reach for -nudge tokens by default. They exist for narrow cases where the base step is one increment off; defaulting to them flattens the ladder.
• ❌ Don't hard-code px values even when they match a token today. Brands override the underlying scale, and hard-coded values silently skip brand theming.

All radius tokens

The table below lists every radius token emitted by the build, including the semantic aliases.