Canonical Badge System
4 canonical component types reused across the site — not 24 disparate designs. Consolidated under Phase I2 refactoring standards.
01
1. Badge Atom (4 Variants × 2 Sizes)
General-purpose categorical and accent labels with strict token inheritance.
Accent
Accent MD Accent SM
Neutral
Neutral MD Neutral SM
Outline
Outline MD Outline SM
Value
Value MD Value SM
Alert
Alert MD Alert SM
02
2. StatusBadge (4 Semantic States)
Real-time indicators with pulsing dots or verification glyphs.
Live Uptime SLA Urgent Fix Needed Limited Slots Staging Verified NDA Confidential
03
3. PlatformPill (1 Shared CSS Layout + Color Tokens)
Single unified layout with color overrides driven by platform tokens.
WordPress Care Shopify Care WooCommerce Astro / Headless
04
4. TrustChip (Two-Tone Label + Metric Chips)
Standardized ledger chips from PlatformHero for high-converting trust metrics.
Access No credential sharing
Recovery Automated rollback
Compliance US Entity W-9 & ACH
SLA Target Replies in <4 hrs
QA
Engineering QA Contract Fixtures
Hidden or explicit fixtures asserting fallbacks, explicit props, and custom classes.
Default Fallback Explicit Size MD Custom Class Passthrough