Tier System
A semantic vocabulary for border-radius. Three tiers — commit, modify, contain — let components, brand themes, and inline overrides speak the same language without anyone reaching for a raw pixel value.
Three Tiers
Every primitive in the library belongs to exactly one of three tiers. The tier dictates the component's default radius and how it responds to a wrapping context. Brands tune the visual identity by changing the three token values once; component code never touches a raw pixel value.
commit
Pill (9999px). Action, identity, status. Buttons, ButtonGroup, Badge, Toolbar, SegmentGroup, Toggle, Stepper.
modify
Small (~4px). Tap surface, editable. Input, Select, Combobox, Textarea, Checkbox, RadioGroup, Tab, Menu-Item.
contain
Barely-rounded (~2px). Architectural surface, panel. Card, Alert, Dialog, Drawer, Tooltip, Popover.
The four tokens
The token names are also the public-API vocabulary: a component reads tier="commit" and applies rounded-commit — the contract is symmetric.
Tier-aware Components
Seven primitives expose a tier prop AND read from a
wrapping TierContext when the prop is unset. The other
primitives use a fixed tier per component family — see the Blocks index for the per-component
defaults.
| Component | Default tier | Family | Why |
|---|---|---|---|
| Button | commit | Action | Identity declaration — buttons read as decisive. |
| Toggle | commit | Action | Track radius mirrors Button visual weight. |
| SegmentGroup | commit | Navigation | Track + indicator both follow tier for inline action-strip ergonomics. |
| Stepper | commit | Navigation | Indicator + separator are progress-marker affordances. |
| RadioGroup | commit | Form | Indicator + dot read as commit-tier affordances even inside Form-family. |
| Checkbox | modify | Form | Box is the canonical input-tap surface — modify is its native tier. |
| Tab | modify | Navigation | Editorial-leaning navigation surface; commits would feel too loud. |
Prop and context contract
Context Cascade
A wrapping component with a tier prop publishes that
tier through TierContext. Every tier-aware child that
does not set its own tier prop inherits the wrapping value.
Switch the toolbar tier below to see Button, Toggle, Checkbox, and Badge respond in lockstep.
Children with no tier prop inherit commit. Set tier="commit" on a single child to opt-out of the cascade.
Override Pathway
The three tier tokens are CSS custom properties. Override them at any scope — global @theme for brand identity, a wrapping selector for a
stage-specific look, or an inline style attribute for one-off
experiments. The same Button code re-flows across all three.
--radius-commit: The override sits on the parent <div style> —
every rounded-commit utility inside that subtree picks
up the new value. No prop changes, no component edits.
Brand-level + scoped overrides
Bridge Token
--radius-bridge covers a narrow adjacency case: a
floating panel anchored to a commit-tier (pill) trigger. The panel itself is container-tier
content, but its radius wants to visually pair with the trigger. The bridge token sits between
the two — var(--radius-md) by default — so a Menu panel under
a pill Button reads as connected, not as a stranded contain-surface.
No component uses bridge as its primary surface radius; it appears only in menu.variants.ts. Brands tune via the foundation token
like any other tier. See Menu for usage.