Colours

MemberPulse colour palette - primary, secondary, semantic, and chart colours

Colour Palette

Consistent colour usage creates visual harmony and reinforces brand identity.

---

Primary Colours

The primary colour palette represents the MemberPulse brand.

Primary Blue

Property	Value
Hex	#2421C4
RGB	0, 102, 204
HSL	210, 100%, 40%

Usage: Primary buttons, links, focus rings, active states

Light Blue

Property	Value
Hex	#6C69FF
RGB	51, 153, 255
HSL	210, 100%, 60%

Usage: Hover states, secondary highlights, light theme accents

Dark Blue

Property	Value
Hex	#1A18A0
RGB	0, 68, 153
HSL	213, 100%, 30%

Usage: Active/pressed states, dark mode primary, headings

---

UI Colours - Light Theme

Colour	Swatch	Hex	CSS Variable	Usage
Background		#FFFFFF	--background	Page backgrounds
Foreground		#000000	--foreground	Primary text
Card		#F8F8FA	--card	Card backgrounds
Card Foreground		#000000	--card-foreground	Card text
Muted		#F5F5F7	--muted	Subtle backgrounds
Muted Foreground		#6C757D	--muted-foreground	Secondary text
Border		#E2E8F0	--border	Borders, dividers
Input		#F5F5F7	--input	Input backgrounds
Ring		#2421C4	--ring	Focus rings

---

UI Colours - Dark Theme

Colour	Swatch	Hex	CSS Variable	Usage
Background		#0F101A	--background	Page backgrounds
Foreground		#FFFFFF	--foreground	Primary text
Card		#171926	--card	Card backgrounds
Card Foreground		#FFFFFF	--card-foreground	Card text
Muted		#2B2E3E	--muted	Subtle backgrounds
Muted Foreground		#9CA3AF	--muted-foreground	Secondary text
Border		#3A3F50	--border	Borders, dividers
Input		#2B2E3E	--input	Input backgrounds
Ring		#6C69FF	--ring	Focus rings

---

Semantic Colours

Semantic colours convey meaning and status.

Success

Hex: #10B981

Positive actions, success states, confirmations

Warning

Hex: #F59E0B

Caution, pending states, attention needed

Destructive

Hex: #DC3545

Errors, delete actions, critical alerts

Info

Hex: #3B82F6

Information, tips, neutral notifications

Semantic Colour Variants

State	Background	Foreground	Border
Success	#ECFDF5	#065F46	#10B981
Warning	#FFFBEB	#92400E	#F59E0B
Destructive	#FEF2F2	#991B1B	#DC3545
Info	#EFF6FF	#1E40AF	#3B82F6

---

Chart Colours

Sequential palette for data visualizations.

Chart	Hex	Usage
Chart 1	#2421C4	Primary data series
Chart 2	#6C69FF	Secondary data series
Chart 3	#66B2FF	Tertiary data series
Chart 4	#99CCFF	Quaternary data series
Chart 5	#CCE5FF	Quinary data series

Categorical Palette

For charts requiring distinct colours:

---

Accessibility

Contrast Requirements

All colour combinations must meet WCAG 2.1 AA standards:

Text Size	Minimum Ratio
Normal text (< 18px)	4.5:1
Large text (≥ 18px or 14px bold)	3:1
UI components	3:1

Tested Combinations

Background	Foreground	Ratio	Pass
#FFFFFF	#000000	21:1	✅ AAA
#FFFFFF	#2421C4	5.9:1	✅ AA
#FFFFFF	#6C757D	4.6:1	✅ AA
#0F101A	#FFFFFF	18.1:1	✅ AAA
#2421C4	#FFFFFF	5.9:1	✅ AA