COLOR SYSTEM
Six core colors inspired by classic comic books
Primary Palette
Comic Red
#EF4444
bg-comic-red
text-comic-red
Energy, urgency, passion
Comic Yellow
#FBBF24
bg-comic-yellow
text-comic-yellow
Optimism, attention, warmth
Comic Blue
#0A32F4
bg-comic-blue
text-comic-blue
Trust, calm, professionalism
Comic Green
#10B981
bg-comic-green
text-comic-green
Success, confirmation, positive
Comic Black
#1F2937
bg-comic-black
text-comic-black
Borders, outlines, text
Comic White
#FFFFFF
bg-comic-white
text-comic-white
Backgrounds, contrast
Common Combinations
Yellow on Black
High contrast, dramatic, attention-grabbing
Red on White
Clean, energetic, calls to action
White on Blue
Professional, trustworthy, informative
Black on Yellow
Primary buttons, hero sections, maximum visibility
White on Red
Urgent actions, important messages, guarantees
White on Green
Success messages, confirmations, positive feedback
Gradients
Red to Yellow
linear-gradient(to bottom right, var(--comic-red), var(--comic-yellow))
Energy and warmth
Blue to Red
linear-gradient(to bottom right, var(--comic-blue), var(--comic-red))
Dynamic and bold
Usage Guidelines
✅ Do's
- • Use yellow for primary CTAs
- • Use red for urgency and guarantees
- • Use blue for trust and information
- • Use black for all borders (5px)
- • Use white for clean backgrounds
- • Maintain high contrast
❌ Don'ts
- • Don't use muted or pastel versions
- • Don't use colors outside the palette
- • Don't use low-contrast combinations
- • Don't use thin borders
- • Don't mix with non-comic styles
- • Don't use subtle grays for borders
Accessibility
All color combinations meet WCAG AA standards for contrast
| Combination | Contrast Ratio | WCAG Level |
|---|---|---|
| Black on Yellow | 11.4:1 | AAA ✓ |
| White on Red | 5.1:1 | AA ✓ |
| White on Blue | 4.8:1 | AA ✓ |
| Yellow on Black | 11.4:1 | AAA ✓ |