Contents Purpose Anatomy Variants States Tokens Used Accessibility Behavior Distinction from Tag Platform Notes Component: badge Purpose Display a status indicator or count. Always non-interactive. Anatomy label — required, short text or number Variants Class Visual Usage badge Base — surface-tertiary bg, text-secondary Neutral count or label badge-accent accent-subtle bg, accent-text Highlighted indicator badge-success success-subtle bg, success-text Positive status badge-warning warning-subtle bg, warning-text Caution status badge-error error-subtle bg, error-text Negative status States None. Badges are display-only. No hover, no focus, no interaction. Tokens Used --font-sans, --text-xs, --leading-normal --space-1, --space-2 --color-surface-tertiary --color-text-secondary --color-accent-subtle, --color-accent-text --color-success-subtle, --color-success-text --color-warning-subtle, --color-warning-text --color-error-subtle, --color-error-text Accessibility Semantic element: <span class="badge"> If the badge conveys important status information not otherwise available in context, add role="status" or include an aria-label. Functional color is not the sole indicator — the label text carries the meaning. Contrast: functional color tokens are designed to meet WCAG AA on their respective subtle backgrounds. Behavior Badges do not truncate. Content should be kept short (1-3 characters or a short word). No interaction. No pointer events. No cursor change. Distinction from Tag Badges are smaller (--text-xs, tighter padding), always non-interactive, and carry functional color variants for status. Tags are for user-generated categories and can be interactive. Platform Notes Web: CSS in @layer components. Rendered as <span>. Font-weight 600 for legibility at small size. macOS: Map to a styled capsule label or SwiftUI Text with background modifier.