brand-system-badge-components

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

1. Small (24-32px height)
2. Rounded corners (2-4px or pill-shape)
3. Brand color background OR brand color border
4. White or accent text
5. ALL CAPS typography (10-12pt, semibold)
6. Letter-spacing 0.05-0.1em
7. 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.