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.
| Property | Value |
|---|---|
| Hex | #2421C4 |
| RGB | 0, 102, 204 |
| HSL | 210, 100%, 40% |
Usage: Primary buttons, links, focus rings, active states
| Property | Value |
|---|---|
| Hex | #6C69FF |
| RGB | 51, 153, 255 |
| HSL | 210, 100%, 60% |
Usage: Hover states, secondary highlights, light theme accents
| 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.
Hex: #10B981
Positive actions, success states, confirmations
Hex: #F59E0B
Caution, pending states, attention needed
Hex: #DC3545
Errors, delete actions, critical alerts
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 |