Radius
Rendered
--radius-sminputs · chips
--radiusdefault
--radius-lgpanels
--radius-xlhero
999pxpill (literal)
Tokens — app surface
The app surface uses four radii plus the pill. The set is closed; intermediate values aren't tokenized.
| Token | Value | Use |
|---|---|---|
--radius-sm | 10px | inputs, chips |
--radius-md | 16px | default — cards, glass |
--radius-lg | 24px | panels |
--radius-xl | 32px | hero containers |
--radius-hero | 72px | full-canvas hero panels and bloom-backdrop wrappers |
--radius-pill | 999px | pills, status chips — always full-round |
Tokens — brand surface
The brand layer extends the radius ramp with softer, smaller values at the low end (because marketing-surface typography sits inside tighter glyph metrics) and a continuous ramp up through 4xl so painterly panels can step down rounding without jumping straight to --radius-hero.
| Token | Value | Use |
|---|---|---|
--radius-sm | 6px | brand-surface chips, mono-chip glyph rounding |
--radius-md | 10px | brand-surface inputs, code cards, status pills |
--radius-lg | 12px | brand-surface buttons, MatterButton resting state |
--radius-xl | 16px | brand-surface cards — the marketing-grid default |
--radius-2xl | 20px | feature tiles inside the marketing grid |
--radius-3xl | 24px | larger feature panels and CTA tiles |
--radius-4xl | 32px | hero-adjacent tiles — the bridge between a card surface and the --radius-hero canvas |
--radius-hero | 72px | brand-surface hero canvas — matches the app-surface hero |
--radius-pill | 9999px | brand-surface pills — full-round at any width |
--radius-4xl sits at the same numeric value as the app-surface --radius-xl (32 px) on purpose: a hero-adjacent marketing tile and an app-surface hero container should be visually flush when they meet at a layout boundary.
Pick from the app set on the app surface, the brand set on marketing. The pill is implicit at either layer.
Don't author intermediate radii. Both ramps are closed — if a new value is needed, propose a token first.