Resources / Domain Colors
Domain Colors
Each Xuperson domain carries a color identity that reflects its purpose. These colors
are semantic — they encode meaning, not decoration. They appear as badge backgrounds
only, via color-mix() for transparency.
The Domain System
Burgundy
#800020
Energy, emergence, enterprise. The commercial engine of the ecosystem.
Product pages, venture cards, commercial CTAs
Amber
#b06d2d
Growth, learning, development. The connective tissue of the ecosystem.
Course cards, portfolio pages, talent profiles
Slate Mauve
#5a4a6c
Wisdom, depth, exploration. The intellectual authority of the ecosystem.
Research articles, journal cards, academic profiles
Badge Implementations
Domain badges use color-mix() to create transparent
background tints from the base hex. This maintains semantic color while working on both
light and dark surfaces.
/* .com badge */
.badge-com {
background: color-mix(in srgb, #800020 12%, transparent);
color: #800020;
border: 1px solid color-mix(in srgb, #800020 20%, transparent);
}
/* .net badge */
.badge-net {
background: color-mix(in srgb, #b06d2d 12%, transparent);
color: #b06d2d;
border: 1px solid color-mix(in srgb, #b06d2d 20%, transparent);
}
/* .org badge */
.badge-org {
background: color-mix(in srgb, #5a4a6c 12%, transparent);
color: #5a4a6c;
border: 1px solid color-mix(in srgb, #5a4a6c 20%, transparent);
}Usage Rules
✓ Badge backgrounds only
Domain colors appear as badge chip backgrounds via color-mix transparency. Never as large surface fills.
✓ Semantic classification only
Use domain badges only when classifying content by its Xuperson domain origin. Not for generic categorization.
✗ Domain colors for status
Never use .net sage-green for 'success' or .org mauve for 'info'. These are domain identities, not status signals.
✗ Large surface fills
Domain colors are not section background colors. The core paper/card/foreground tokens handle all large surfaces.