Radius

Overview.

Radius sets the system’s temperature. Sharp corners read industrial, slightly rounded reads editorial, very rounded reads playful. Flatpay sits a single step softer than zero — enough that nothing feels brittle, not so much that anything feels cute.

We lean on a five-step scale and stop at 8 px. Two values do almost every job: 4 px for interactive elements (buttons, inputs, tags) and 8 px for containment (cards, callouts, containers). The other three earn their place narrowly — 2 px for the smallest details, 6 px for the handful of legacy edge cases, and rounded-full for shapes that are fundamentally circular. Nothing sits between 8 px and full.

Two starring values.

The system’s default pairing — buttons inside a card. The smaller radius nests cleanly inside the larger one and the two read as a single composition without competing.

The scale.

The five-step scale, in order. The two primary values are marked. Everything above 8 px is excluded — the system has no rounded-xl, rounded-2xl, or rounded-3xl.

• rounded-xs
  2 px

  Smallest detail elements — keyboard shortcut keys, dense badge stacks, swatches in a colour grid.

  ⌘K
• rounded-smPrimary
  4 px

  Buttons, inputs, selects, segmented controls, tags, pills, status chips. Anything you click or read at a glance.

  New prototype
• rounded-md
  6 px

  Used sparingly — a few @flatpay-dk/ui legacy components and floating popovers attached to small targets. Prefer 4 or 8 unless the design clearly calls for the in-between.

  Tooltip
• rounded-lgPrimary
  8 px

  Cards, callouts, in-page containers, list rows, dropdown menus, banners. The default surface for anything with internal padding.

  Card surface

• rounded-full
  9999 px

  Anything circular by intent — avatars, status dots, icon buttons, pill-shaped tags.

  Demo ready

Pairing.

When two radii sit near each other, the inner element should always be tighter than the outer. The eye reads nesting through the curvature difference, not just the position.

• Button inside a card. Card rounded-lg, button rounded-sm. The standard pair.
• Tag inside a card. Card rounded-lg, tag rounded-sm— the same 4 / 8 pair the buttons use. Don’t reach for rounded-full just because the tag is small.
• Avatar inside anything. Avatar rounded-full regardless of context. Circular elements don’t respond to the surrounding scale.

Circular.

rounded-fullsits outside the geometric scale — it’s shape, not curvature. Use it only for elements that are fundamentally circular: avatars, status dots, loading spinners, the close button on a toast. Pill-shaped tags use it too because the rounded ends are intrinsic to the shape, not decoration.

In code.

The Tailwind defaults are wired through @theme inline in apps/portal/app/globals.css. The base value is --radius at 0.5rem(8 px); the rest of the scale calculates from it. There’s no separate token to import — use the Tailwind utilities directly.

// The default container — 8 px
<div className="rounded-lg border bg-card p-4" />

// A button inside it — 4 px, one step tighter
<button className="rounded-sm bg-foreground px-3 py-1.5 text-background" />

// A pill / status chip — full
<span className="inline-flex items-center gap-1.5 rounded-full border px-3 py-1">
  <span className="h-1.5 w-1.5 rounded-full bg-[var(--color-green-600)]" />
  Demo ready
</span>

Don’ts.

Three patterns that break the scale. Each is the kind of mistake that looks fine in isolation but breaks the rhythm once the page assembles.

Related.