Documentation Index
Fetch the complete documentation index at: https://memberpulseptyltd.mintlify.app/llms.txt
Use this file to discover all available pages before exploring further.
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% |
Light Blue
| Property | Value |
|---|
| Hex | #6C69FF |
| RGB | 51, 153, 255 |
| HSL | 210, 100%, 60% |
Dark Blue
| Property | Value |
|---|
| Hex | #1A18A0 |
| RGB | 0, 68, 153 |
| HSL | 213, 100%, 30% |
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: #10B981Positive actions, success states, confirmations Warning
Hex: #F59E0BCaution, pending states, attention needed Destructive
Hex: #DC3545Errors, delete actions, critical alerts Info
Hex: #3B82F6Information, 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 |
