Foundations
Colors
Brand Palette
Primary and secondary colors from globals.css
Chime Teal
--chime-teal
Primary brand color. Buttons, links, active states, icons.
Used: btn-primary bg, nav active, mega-menu accents
Chime Teal Dark
--chime-teal-dark
Primary hover / header band. Deeper teal for pressed states and headings.
Used: btn-primary hover, h1–h6 text, header band
Chime Teal Light
--chime-teal-light
Soft teal accent for tints and highlights.
Used: rarely used directly; reserved for subtle accents
Chime Gold
--chime-gold
Secondary accent. Badges, icons, highlights on teal.
Used: Quickship badge, detail icons, success check
Chime Gold Dark
--chime-gold-dark
Gold hover / deeper accent.
Used: reserved for gold hover states
Chime Blush
--chime-blush
Tertiary accent. Footer tagline, social hover.
Used: 'It's a Vibration.' tagline, social icon hover
Chime Navy
--chime-navy
Dark surface. Footer background.
Used: Footer bg, state badge bg
Chime Slate
--chime-slate
Muted body text.
Used: secondary text, captions
Light BG
--chime-light-bg
Tinted surface. Region cards, section backgrounds.
Used: RegionsSection cards, mega-menu panels
Cream
--chime-cream
App background. Page canvas.
Used: body background, main canvas
White
--chime-white
Card surface and default light surface.
Used: cards, product tiles, panels
Utility Colors
In-code colors not yet tokenized
Gold Hover
Footer link / button hover on navy.
Used: Footer nav hover, region pill hover
Gold Accent
Lead form eyebrow text on teal.
Used: LeadForm 'Start a Conversation' eyebrow
Lead Form BG
Contact form section background.
Used: LeadForm section bg
Focus Border
Input focus border on teal form.
Used: LeadForm input focus state
Navy Dark
State abbreviation badge background.
Used: PartnerCard state badges
Quickship Gold
Quickship product badge.
Used: ProductCard quickship badge
Alert Orange
Reserved alert / warning accent.
Used: safelisted; not yet in use
Inconsistencies & Conflicts
Issues related to Color
Brand colors live as CSS variables in globals.css (--chime-*) but Tailwind's theme.extend does not map them. Components use hardcoded hex values (bg-[#00768B]) instead of semantic tokens (bg-primary). The shadcn --primary token is set to neutral grayscale (0 0% 9%), not the brand teal.
Resolved: Brand colors mapped into tailwind.config.js (brand, brand-dark, brand-light, brand-tint, gold, gold-light, gold-dark, cream, navy). Layout.jsx and all btn-* classes migrated to semantic names. shadcn --primary/--ring bridged to brand teal HSL.
index.css defines HSL-channel tokens (--primary, --border, etc.) but globals.css defines hex tokens (--chime-*). Two color systems coexist; components use hex classes, shadcn primitives use HSL tokens.
Resolved: shadcn --primary and --ring set to brand teal HSL (189 100% 27%) in both :root and .dark; --primary-foreground set to white. shadcn primitives now inherit brand teal automatically.
Quickship badge uses white text on #BD995C gold (2.7:1) — fails WCAG AA for normal text. Gold eyebrow #D4AC6E on the #116072 lead-form background (3.4:1) fails AA for normal text. Gold detail icons on white (2.7:1) fail the 3:1 UI-graphics minimum.
Resolved: Quickship badge darkened to #8B6A2E (white text = 5.0:1, AA pass). A live WCAG contrast grid added to the Design System documents every brand pairing's AA/AAA status and minimum font size for ongoing monitoring.