> ## Documentation Index
> Fetch the complete documentation index at: https://memberpulseptyltd.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<CardGroup cols={3}>
  <Card title="Primary Blue">
    <div style={{backgroundColor: '#2421C4', height: '80px', borderRadius: '0', marginBottom: '16px'}} />

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

    **Usage:** Primary buttons, links, focus rings, active states
  </Card>

  <Card title="Light Blue">
    <div style={{backgroundColor: '#6C69FF', height: '80px', borderRadius: '0', marginBottom: '16px'}} />

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

    **Usage:** Hover states, secondary highlights, light theme accents
  </Card>

  <Card title="Dark Blue">
    <div style={{backgroundColor: '#1A18A0', height: '80px', borderRadius: '0', marginBottom: '16px'}} />

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

    **Usage:** Active/pressed states, dark mode primary, headings
  </Card>
</CardGroup>

***

## UI Colours - Light Theme

| Colour           | Swatch                                                                                                                                               | Hex       | CSS Variable         | Usage              |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------------------- | ------------------ |
| Background       | <div style={{backgroundColor: '#FFFFFF', width: '24px', height: '24px', borderRadius: '0', border: '1px solid #E2E8F0', display: 'inline-block'}} /> | `#FFFFFF` | `--background`       | Page backgrounds   |
| Foreground       | <div style={{backgroundColor: '#000000', width: '24px', height: '24px', borderRadius: '0', display: 'inline-block'}} />                              | `#000000` | `--foreground`       | Primary text       |
| Card             | <div style={{backgroundColor: '#F8F8FA', width: '24px', height: '24px', borderRadius: '0', border: '1px solid #E2E8F0', display: 'inline-block'}} /> | `#F8F8FA` | `--card`             | Card backgrounds   |
| Card Foreground  | <div style={{backgroundColor: '#000000', width: '24px', height: '24px', borderRadius: '0', display: 'inline-block'}} />                              | `#000000` | `--card-foreground`  | Card text          |
| Muted            | <div style={{backgroundColor: '#F5F5F7', width: '24px', height: '24px', borderRadius: '0', border: '1px solid #E2E8F0', display: 'inline-block'}} /> | `#F5F5F7` | `--muted`            | Subtle backgrounds |
| Muted Foreground | <div style={{backgroundColor: '#6C757D', width: '24px', height: '24px', borderRadius: '0', display: 'inline-block'}} />                              | `#6C757D` | `--muted-foreground` | Secondary text     |
| Border           | <div style={{backgroundColor: '#E2E8F0', width: '24px', height: '24px', borderRadius: '0', border: '1px solid #CBD5E0', display: 'inline-block'}} /> | `#E2E8F0` | `--border`           | Borders, dividers  |
| Input            | <div style={{backgroundColor: '#F5F5F7', width: '24px', height: '24px', borderRadius: '0', border: '1px solid #E2E8F0', display: 'inline-block'}} /> | `#F5F5F7` | `--input`            | Input backgrounds  |
| Ring             | <div style={{backgroundColor: '#2421C4', width: '24px', height: '24px', borderRadius: '0', display: 'inline-block'}} />                              | `#2421C4` | `--ring`             | Focus rings        |

***

## UI Colours - Dark Theme

| Colour           | Swatch                                                                                                                                               | Hex       | CSS Variable         | Usage              |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------------------- | ------------------ |
| Background       | <div style={{backgroundColor: '#0F101A', width: '24px', height: '24px', borderRadius: '0', border: '1px solid #3A3F50', display: 'inline-block'}} /> | `#0F101A` | `--background`       | Page backgrounds   |
| Foreground       | <div style={{backgroundColor: '#FFFFFF', width: '24px', height: '24px', borderRadius: '0', border: '1px solid #3A3F50', display: 'inline-block'}} /> | `#FFFFFF` | `--foreground`       | Primary text       |
| Card             | <div style={{backgroundColor: '#171926', width: '24px', height: '24px', borderRadius: '0', border: '1px solid #3A3F50', display: 'inline-block'}} /> | `#171926` | `--card`             | Card backgrounds   |
| Card Foreground  | <div style={{backgroundColor: '#FFFFFF', width: '24px', height: '24px', borderRadius: '0', border: '1px solid #3A3F50', display: 'inline-block'}} /> | `#FFFFFF` | `--card-foreground`  | Card text          |
| Muted            | <div style={{backgroundColor: '#2B2E3E', width: '24px', height: '24px', borderRadius: '0', border: '1px solid #3A3F50', display: 'inline-block'}} /> | `#2B2E3E` | `--muted`            | Subtle backgrounds |
| Muted Foreground | <div style={{backgroundColor: '#9CA3AF', width: '24px', height: '24px', borderRadius: '0', display: 'inline-block'}} />                              | `#9CA3AF` | `--muted-foreground` | Secondary text     |
| Border           | <div style={{backgroundColor: '#3A3F50', width: '24px', height: '24px', borderRadius: '0', display: 'inline-block'}} />                              | `#3A3F50` | `--border`           | Borders, dividers  |
| Input            | <div style={{backgroundColor: '#2B2E3E', width: '24px', height: '24px', borderRadius: '0', border: '1px solid #3A3F50', display: 'inline-block'}} /> | `#2B2E3E` | `--input`            | Input backgrounds  |
| Ring             | <div style={{backgroundColor: '#6C69FF', width: '24px', height: '24px', borderRadius: '0', display: 'inline-block'}} />                              | `#6C69FF` | `--ring`             | Focus rings        |

***

## Semantic Colours

Semantic colours convey meaning and status.

<CardGroup cols={4}>
  <Card title="Success">
    <div style={{backgroundColor: '#10B981', height: '60px', borderRadius: '0', marginBottom: '12px'}} />

    **Hex:** `#10B981`

    Positive actions, success states, confirmations
  </Card>

  <Card title="Warning">
    <div style={{backgroundColor: '#F59E0B', height: '60px', borderRadius: '0', marginBottom: '12px'}} />

    **Hex:** `#F59E0B`

    Caution, pending states, attention needed
  </Card>

  <Card title="Destructive">
    <div style={{backgroundColor: '#DC3545', height: '60px', borderRadius: '0', marginBottom: '12px'}} />

    **Hex:** `#DC3545`

    Errors, delete actions, critical alerts
  </Card>

  <Card title="Info">
    <div style={{backgroundColor: '#3B82F6', height: '60px', borderRadius: '0', marginBottom: '12px'}} />

    **Hex:** `#3B82F6`

    Information, tips, neutral notifications
  </Card>
</CardGroup>

### 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.

<div style={{display: 'flex', gap: '4px', marginBottom: '24px'}}>
  <div style={{backgroundColor: '#2421C4', flex: 1, height: '40px', borderRadius: '0'}} />

  <div style={{backgroundColor: '#6C69FF', flex: 1, height: '40px'}} />

  <div style={{backgroundColor: '#66B2FF', flex: 1, height: '40px'}} />

  <div style={{backgroundColor: '#99CCFF', flex: 1, height: '40px'}} />

  <div style={{backgroundColor: '#CCE5FF', flex: 1, height: '40px', borderRadius: '0'}} />
</div>

| 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:

<div style={{display: 'flex', gap: '4px', marginBottom: '24px'}}>
  <div style={{backgroundColor: '#2421C4', flex: 1, height: '40px', borderRadius: '0'}} />

  <div style={{backgroundColor: '#10B981', flex: 1, height: '40px'}} />

  <div style={{backgroundColor: '#F59E0B', flex: 1, height: '40px'}} />

  <div style={{backgroundColor: '#8B5CF6', flex: 1, height: '40px'}} />

  <div style={{backgroundColor: '#EC4899', flex: 1, height: '40px'}} />

  <div style={{backgroundColor: '#06B6D4', flex: 1, height: '40px', borderRadius: '0'}} />
</div>

***

## 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  |