Foundations
Border Radius
The ladder reads: the bigger and more environmental the element, the rounder it gets. Input 12 → card 16 → sheet 24 → pill ∞.
The ladder, live
--r-inp · 12
--r-card · 16
--r-modal · 24
--r-chip · pill
Token reference
| Token | Value | Usage |
|---|---|---|
--r-inp | 12px | Inputs, textareas |
--r-card | 16px | Cards, banners, tiles |
--r-btn | 16px | Primary CTAs (14px on onboarding options) |
--r-modal | 24px | Bottom sheets, log pages (top corners) |
--r-chip | 999 (pill) | Chips, pills, dots, toggles |
(utility) | 10px | Small utility buttons, icon tiles |
Selection rule
If an element opens, slides, or hosts other elements, step up one radius. If it is tappable vocabulary (chips, dots, toggles), it is a pill. Avoid inventing intermediate radii — the four steps are the system.