Badge & Pill
Pill-shaped labels that convey status, category, or meaning in a few words. .badge is a read-only label; .chip is an action chip for copy, open, or call interactions. Colors are fixed per semantic meaning — arbitrary decorative colors are not permitted.
Badge
border-radius: 9999px, 14px font, letter-spacing 0. Background is a 12% tint of the semantic color; text uses the semantic color directly. Use only for meaningful status, track, or time labels.
Variants
Chip
.chip is an action chip used as a button or link. Three variants are available: copy (chip-copy), open external (chip-open), and call (chip-call). A subtle press-down animation provides click feedback.
Rules
Each color maps to exactly one meaning — reusing a color for multiple statuses confuses users. Badges belong inline near text for status or category; chips are reserved for actions like copy, navigate, or call.
| Variant | Color token | Meaning / Usage |
|---|---|---|
| primary | --c-primary | Brand emphasis, currently active status |
| sky | --c-sky-light | Positive events: early applications, registration confirmed |
| positive | --c-positive | Success, complete, healthy |
| warning | --c-warning | Pending, caution, needs review |
| negative | --c-negative | Closed, failed, urgent |
| grey | --c-light-grey | Neutral, track or category label, inactive |
Never do
- Do not use a badge as a decorative eyebrow above hero or section headings (allowed only on explicit user request)
- No numeric prefixes such as
01,02 - No arbitrary colors outside the token set (no raw HEX values)
- No purely decorative use — a label must always convey status or category information