◆ Components · Badges & Pills · v1.0
Status as language
6 tones · 5 sizes · 4 shapes
pill · solid · tag · counter
01ANATOMY · the default pill
dot · label · case · weight
★ ACTIVE NOW
▸ DOT   6px · glow-color · optional pulse
▸ LABEL   JetBrains Mono · 700 · UPPERCASE · LS .12em
▸ CASE   always upper · max 18 chars
▸ RADIUS   --r-full (999px)
▸ BORDER   1px tone/30 · fill tone/12
▸ HEIGHT   24px default · 32px lg · 18px xs
02TONES · 6 + 2 solid
one role per color
★ LIME · BRAND
ACTIVELIVE★ PRO
CYAN · INFO
INCOMINGROUTING+TRANSFERRED
VIOLET · PREMIUM
ENTERPRISE★ NEWBETA
RED · DANGER
MISSEDFAILED−$0.04
AMBER · WARN
PENDINGRATE LIMIT−4%
MUTE · NEUTRAL
QUEUEDUTC−05:00DRAFT
★ SOLID · LIME
★ HEROSTART TRIAL
SOLID · DARK
BETA · v1.0★ NEW · BANNER
03SIZES · 5 step scale
all 8pt-aligned in height
XS · 18px
X1+2!
Inline within body text · counter beside icons
SM · 22px
LIVEEU-WEST-2v1.0
Dense tables · sidebar items · meta rows
★ MD · 24px
ACTIVEENTERPRISEMISSED
Default · cards · list rows · most call sites
LG · 32px
★ LIVE NOW★ PRO PLAN
Section headers · hero pricing badge
XL · 40px
★ ANNOUNCEMENTBETA · v1.0
Marketing announcement bars · launch ribbons
04SHAPES · pill is canonical · tag · counter · keycap
4 variants beyond the pill
PILL · default
ACTIVE+12
Status · count · category · the workhorse
TAG · removable
SALES ×EU-WEST ×PRIORITY ×
Filter chips · selected segments · removable
COUNTER · numeric
31299+★2
Nav badges · inbox count · always numeric · max 99+
KEYCAP · shortcut
⌘K·↵·ESC
Keyboard hints · command palette · tooltips
05IN CONTEXT · the 6 real-world uses
pills live inside other components
★ CALL ROW · ACTIVE
MO
Mo · Outbound
SAL · 09:14 · 03:21
LIVE
CALL ROW · MISSED
JD
Jane Doe · Inbound
+1 415 555 0142 · 4m ago
MISSED
NAV ITEM · UNREAD COUNTER
▸  INBOX · CALLS 14
FILTER BAR · REMOVABLE TAGS
FILTERED BY SALES × EU-WEST × 7-DAYS ×
PRICING TIER · PREMIUM
Pro Plan
$49 / mo · unlimited calls
★ POPULAR
COMMAND PALETTE · KEYCAPS
▸ Start a new call
⌘N
06RULES · what to do · what to avoid
opinionated · enforced
✓ DO
  • Use ONE tone per badge — never gradient or multi-color fills
  • Always set text-transform: uppercase
  • Animate the dot with pulse only on live/active states
  • Pair counter badges with an icon they belong to
  • Use mute tone for inert/neutral facts (timezone, version)
✗ DON'T
  • Don't put sentence-case copy in a pill — uppercase only
  • Don't stack 4+ pills in a row — that's a tag input, use Tag
  • Don't use red/amber for "new feature" — use violet
  • Don't pulse static badges — kills the live-state signal
  • Don't exceed 18 character label — truncate or rephrase
07TOKEN REFERENCE
--badge-* · component scope
RADIUSpill--r-full
RADIUStag--r-3 · 6px
FONTlabelJetBrains 700
LStracking0.12em
PAD-Ymd5px
PAD-Xmd10–11px
DOTsize6 × 6px
DOT GLOWpulse8px tone
FILLtonetone/.12
BORDERtonetone/.30
MAX LABELchars≤ 18
PULSEanim1.6s ease