Small, but telling.

Eleven atoms that label and signal — badges, chips, pills, swatches, sigils, avatars. Status speaks in moss, amber, rust, and stone; accent stays reserved for the one selected chip.

Badgetone · appearance

Draft Ready Overdue Prep Tag

Tones neutral · info · success · warning · danger · accent in appearance soft / solid / outline. Add onRemove for a dismissable chip.

Status Badgevariant · category

Active Idle Indexing Verified Failed

variant dot / badge / outline / subtle × category success…muted, sizes sm / default / lg. animation="pulse" rings live work.

Agent Badgeagent · size · isActive

persona-forge ux-designer system

Mono pill showing the working agent. size sm / md; isActive pulses the dot. Color anchors to status tokens, never raw accent.

Chiptone · size · selected

Filter Calm Selected Tag Disabled

Interactive sibling of Pill: removable · selectable · disabled. Sizes sm / md / lg. The selected ring is the lone accent moment.

Pilltone · size · dot

v2.4 Live Beta Featured

Read-only status atom — lighter than Badge, no dismiss. Tones neutral · brand · success · warning · danger · info, sizes sm / md.

Status Pillstatus · lifecycle

Drafted Ready In Progress Resolved Archived

Pill bound to lifecycle tokens via a status string — drafted, ready, active, in-progress, resolved, archived, failed. Unknown values fall back to neutral.

Status Swatchhex · size · checker

16 20 24 checker

Color square for sortable rows + palette legends. Sizes 16 / 20 / 24 / 32; showChecker surfaces low-opacity tokens. Carries role="img".

Tonetone · appearance

soft solid outline text

Generic tinted surface for non-pill cases — headers, stripes, inline text, dots. appearance soft / solid / outline / text / dot; as sets the tag.

Sigilkind · size

AVsm ORmd KNlg HSxl

Circular faction badge — initials or image with a tone-bound ring. kind kinship · guild · order · cabal · house · movement, sizes sm / md / lg / xl.

Avatarsize · image / fallback

Axs ALsm ALmd lg · img ALxl

Radix Avatar with AvatarImage + AvatarFallback. Sizes xs · sm · md · lg · xl (or numeric px). Falls back to initials when the image fails.

Iconname · size

xs · 14 sm · 16 md · 20 lg · 24 xl · 28

Typed registry over lucide-react — reference by name, size via --icon-* tokens xs…xl. label announces meaningful icons.

Rotate your phone for a larger view. Tap the slide to open it full size and zoom.

8.5 × 11 · Portrait