Skip to content
Documentation

ADR-002: Radius & Shape

Decision

A restrained corner-radius vocabulary on the xl / lg / md / sm scale. No pill shapes on controls; rounded-full is reserved for true circles only.

Key rules

  • Live values: xl = 10px, lg = 8px, md = 6px, sm = 4px (tightened from the original scale).
  • Use the xl / lg / md / sm scale exclusively — no rounded-2xl / rounded-3xl or arbitrary values.
  • Container and shell components cap at xl (10px); inner controls (inputs, badges) use md or sm.
  • No pill shapes (rounded-full) on buttons, inputs, badges, or chips. rounded-full is for true circles only — avatars, radio dots, step markers.
  • Restrained rounded rectangles are the house shape; when in doubt, go tighter.

Why

A tight, consistent radius scale reads as deliberate. Per-component radius creativity fragments the product’s silhouette.

Applies when

You are choosing or reviewing the border-radius of any component, especially container shells and inner controls.

  • ADR-001 — design tokens (defines the radius scale).