Color System

A comprehensive color palette designed for consistency and accessibility

Brand Colors

Primary Plum

#8e2784

Primary brand color for headers, buttons, and key elements

Usage Examples:

bg-primary-plumtext-primary-plum

Primary Blue Gem

#39089d

Alternative primary color for accents and CTA's

Usage Examples:

bg-primary-blue-gemtext-primary-blue-gem

Secondary Lime

#c6f806

Accent color for highlights and success states

Usage Examples:

bg-secondary-limetext-secondary-lime

Secondary Orange

#ff9c00

Warning states and energetic accents

Usage Examples:

bg-secondary-orangetext-secondary-orange

Secondary Purple

#4a1e70

Supporting brand color for depth

Usage Examples:

bg-secondary-purpletext-secondary-purple

Tertiary Blue

#9ed8f1

Info states and soft accents

Usage Examples:

bg-tertiary-bluetext-tertiary-blue

Tertiary Orange

#ffb006

Warm accent color

Usage Examples:

bg-tertiary-orangetext-tertiary-orange

Tertiary Yellow

#f2e872

Light accent and highlight color

Usage Examples:

bg-tertiary-yellowtext-tertiary-yellow

Semantic Colors

Backgrounds

Primary Background

Main page background

bg-background

Secondary Background

Card and section backgrounds

bg-background-secondary

Tertiary Background

Elevated content

bg-background-tertiary

Card Background

Card components

bg-card

Text Colors

Primary Text

Main text content

text-primary

Secondary Text

Supporting text

text-secondary

Muted Text

Subtle text and captions

text-muted-foreground

State Colors

Success

Success messages and confirmations

bg-success text-success-foreground

Warning

Warnings and caution states

bg-warning text-warning-foreground

Error

Error messages and danger states

bg-error text-error-foreground

Info

Informational messages

bg-info text-info-foreground

Color Combinations

Primary Plum Background

White text on plum background for high contrast and strong brand presence.

Lime Accent

Dark text on lime background for attention-grabbing elements.

Blue Gem Accent

Blue gem borders and text on neutral backgrounds.

Soft Information

Tertiary blue for gentle information display.

Accessibility Guidelines

🎯 Contrast Requirements

  • • All color combinations meet WCAG 2.1 AA standards
  • • Primary colors have sufficient contrast for text
  • • Interactive elements maintain focus visibility

Usage Guidelines

✅ Do

  • • Use brand colors for key elements
  • • Maintain consistent color usage
  • • Test color combinations

⚠️ Caution

  • • Avoid overusing accent colors
  • • Check contrast ratios
  • • Consider color blindness

❌ Don't

  • • Mix custom colors with system
  • • Use colors without meaning
  • • Ignore accessibility standards