Components / Badges
Badges
Compact labels for status, category, and domain classification. Domain badges use the
three-domain color system: burgundy/amber for .com,
amber for .net, slate-mauve for
.org. No generic "success/warning/info" colors — all
semantics are domain-specific.
Preview
Domain Badges
Each Xuperson domain has a dedicated badge color. These colors carry semantic meaning — use them only in their designated contexts.
#800020
Commercial ventures, products, services. Energy, emergence, enterprise.
color-mix(in srgb, #800020 15%, transparent)
#b06d2d
Learning, portfolios, talent, mentorship. Growth, development, connection.
color-mix(in srgb, #b06d2d 15%, transparent)
#5a4a6c
Research, journals, scholarly publishing. Wisdom, depth, exploration.
color-mix(in srgb, #5a4a6c 15%, transparent)
Semantic Variants
| Variant | Preview | |
|---|---|---|
| default | | Active status, primary categorization |
| secondary | | Neutral labels, subcategories |
| outline | | Light-weight tags, filters |
| destructive | | Errors, critical warnings, removed items |
Usage Guidelines
✓ Domain-specific colors only
The three domain colors (.com/.net/.org) carry semantic meaning. Use them only in domain-classification contexts.
✓ Monospace font for domain badges
Domain badges use Space Mono for the domain string (.com, .net, .org) to signal technical context.
✗ Generic success/warning colors
Never use arbitrary green/yellow/blue for status. Map status colors to domain semantics instead.
✗ Badges as buttons
Badges are labels, not actions. Use Button for clickable elements. Never add onClick to a Badge.