Border Radius

Two radii cover the system: one for cards and panels, one for pill-shaped controls. A handful of smaller radii are still written directly into component styles and have not been promoted to tokens yet.

CSS Tokens SASS Tokens Tailwind DTCG
in-sync·Source: css:blocks/base.css·Last synced 42d ago

Radius Scale

Seven steps from sharp corners to a full pill shape. Apply these tokens to inputs, cards, buttons, and overlays to keep component shapes consistent.

card14px
pill999px

Usage

TokenValuepxUsage
--border-radius-card14px14pxCards and panels: feature cards, FAQ items.
--border-radius-pill999px999pxFully rounded. Every button and the pill badge.
:root {
  --border-radius-card: 14px; /** Cards and panels: feature cards, FAQ items. */
  --border-radius-pill: 999px; /** Fully rounded. Every button and the pill badge. */
}
PreviousGridNext Motion