Logo
The Sparks Legacy mark — a metallic-gold concentric-triangle radiating lines outward. Art-deco identity paired with the "SPARKS LEGACY TEAM" wordmark and the tagline "Compassion You Can Trust ~ Care You Deserve." Vector redraw pending from Michelle’s designer.
Full Logo — Light & Dark Backgrounds
Compact (no tagline)
Mark Only & Wordmark Only
mark 72pxmark 48pxmark 28pxOn Dark — Mark & Wordmark
Sparks Legacy Academy Mark
Sister brand for the course platform. Art-deco mortarboard cap — tilted forward, concentric chevron relief, draping tassel. Shares the metallic-gold tokens and Cinzel wordmark treatment of the Sparks Legacy Team mark.
Full Logo — Light & Dark Backgrounds
Compact (no tagline)
Mark Only & Wordmark Only
mark 96pxmark 64pxmark 40pxmark 24pxOn Dark — Mark & Wordmark
Side-by-Side with Sparks Legacy Team — On Dark
Sparks Legacy TeamSparks Legacy AcademySide-by-Side with Sparks Legacy Team — On Light
Sparks Legacy TeamSparks Legacy AcademyBrand Colors
Click any swatch to copy its hex value. Black + metallic gold is the signature combination — elegant, art-deco, and unmistakable. Cream and olive-sage warm it up.
Black (Primary)
Metallic Gold (Accent)
Cream / Ivory (Secondary)
Olive Sage (Tertiary)
Functional
Neutrals
Typography
Cinzel for headings — art-deco, geometric, timeless. Lato for body — humanist, legible, warm. Cormorant Garamond for accents and italic moments.
H1 · Cinzel 800 · 56px
Compassion You Can
H2 · Cinzel 700 · 40px
Trust. Care. Deserve.
H3 · Cinzel 600 · 28px
Medicare & Social Security. Agent-Built.
Body · Lato 400 · 16px
Sparks Legacy Academy is a Medicare and Social Security education platform for insurance agents and agency owners. Three course shells, an advanced quiz engine, Stripe subscription billing with agency volume tiers, and white-label subdomains for top-producing agents.
Small · Lato 700 · 14px
Powered by Sparks Legacy Team.
Micro · Cinzel 500 · 11px · uppercase · tracked
Enrollment Open · Launching June 2026
Buttons
Every state on light + dark. Click the toggle to preview on the opposite background.
Primary (metallic gold)
Secondary (black)
Outline
Ghost & Text
Gradients & Glow
Metallic gold gradient + black sunrise. Gold glows add elevation without shouting.
.sparks-gradient
.sparks-gradient-shine
.sparks-gradient-sunrise
.sparks-gradient-text
Glow Effects
.sparks-glow-gold
.sparks-glow-gold-soft
.sparks-glow-sage
Cards & Containers
The container vocabulary used across the platform. Hover to see the motion cues.
Course
SSA & Medicare Foundations 101
The starter course — Social Security and Original Medicare fundamentals every new agent needs.
Master Class
SSA & Medicare Master Class
The advanced track. Deeper coverage, complex client scenarios, and certification.
White-Label
Agency-Branded Course
Reserved third shell — agencies can drop their own curriculum into a co-branded environment.
Premium
Gradient Border Card
Used for hero moments — testimonials, featured courses, key callouts inside dark sections.
Active Agents
1,247
↑ 18% vs last month
Badges & Status Indicators
Status pills for phases, steps, enrollments, payments.
Status Dots (pulse)
Form Inputs
Text inputs, selects, checkboxes, toggle switches. All focus states gold.
Radius & Spacing
Consistent rhythm. 4px base unit, rounded corners scale with component size.
sm · rounded-md
md · rounded-lg
lg · rounded-xl
xl · rounded-2xl
full · rounded-full
ADA & Contrast Compliance
WCAG 2.1 AA is the bar. These are the approved foreground / background pairings used across Sparks Legacy Academy. Every pair below meets AA (4.5:1 body text · 3:1 large text & UI).
Standards Targeted
- AA body text · 4.5 : 1 minimum
- AA large text · 3 : 1 minimum (≥18.66px bold or ≥24px normal)
- UI components & graphical objects · 3 : 1 minimum (status dots, icons, borders)
- Logos, wordmarks, and purely decorative text are exempt per WCAG — the gold gradient on the “SPARKS LEGACY TEAM” wordmark and the concentric-triangle mark fall here.
Approved Body-Text Pairs (AA ≥ 4.5 : 1)
sparks-black-700 on white
19.8 : 1
sparks-black-700 on cream
17.3 : 1
gray-600 on white
7.5 : 1
gray-500 on white
4.5 : 1
gold-darker on white
6.4 : 1
gold-darker on cream-light
6.0 : 1
sparks-black-700 on sparks-gold
8.2 : 1
cream on sparks-black-800
17.5 : 1
green-dark on white
5.4 : 1
red-dark on white
5.9 : 1
blue-dark on white
7.2 : 1
amber-dark on white
4.7 : 1
Avoid — Fails AA Body Text
These combinations fail 4.5 : 1 for small text. They are banned for body copy, labels, and status pills. If you need a gold accent on light, use gold-darker. If you need white text on a bright fill, make sure it is a large display size (≥18.66px bold) or fall back to black text.
gold-dark on white (3.8 : 1)
Use gold-darker instead
sparks-gold on white (2.5 : 1)
Fills/icons only, never body text
white on green (2.6 : 1)
Use dark text on green fills
white on amber (2.3 : 1)
Use dark text on amber fills
gray-400 on white (3.0 : 1)
Decorative only
Beyond Contrast
Focus rings
Every interactive element gets a 2px gold/30 focus ring (visible outline for keyboard users).
Don't rely on color alone
Status pills pair color with a text label. Dots pair color with an adjacent word.
Semantic HTML
Real buttons, real links, real labels tied to inputs with htmlFor.
Motion respect
Animations use transition, not keyframes by default. Respect prefers-reduced-motion in Phase 1 polish.
Minimum tap target
44x44px interactive areas on touch (buttons, links, toggles).
Alt text + aria
Icon-only controls get aria-label. Decorative icons get aria-hidden.