| name | brand-system-badge-components |
| description | Use when adding brand identifier badges (verified, certified, premium, beta). Badges communicate trust signals and feature status.
|
Brand-System Badge Components
Badges: small, brand-colored, restrained typography. Communicate status: 'VERIFIED', 'PREMIUM', 'BETA', 'NEW'. Don't overuse.
Badge anatomy
- Small (24-32px height)
- Rounded corners (2-4px or pill-shape)
- Brand color background OR brand color border
- White or accent text
- ALL CAPS typography (10-12pt, semibold)
- Letter-spacing 0.05-0.1em
- Padding 4-8px horizontal, 2-4px vertical
Badge variations
| Type | Color | Use |
|---|
| Verified | Brand accent | Account / trust signal |
| Premium | Gold | Tier indicator |
| New | Brand accent | Feature highlight |
| Beta | Cream + ink border | Feature status |
| Hot | Warning amber | Demand signal |
| Sold | Muted ink | Status |
| Live | Success green | Real-time |
Implementation
.badge {
display: inline-flex;
align-items: center;
padding: 4px 8px;
background: var(--accent);
color: var(--cream);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 3px;
}
.badge-outline {
background: transparent;
color: var(--accent);
border: 1px solid var(--accent);
}
Where this fits in the X3 empire
Used across CardPrepAI for trust signals and feature flags.
