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

# Design System

> MemberPulse design system overview - foundations for building consistent user interfaces

# MemberPulse Design System

A comprehensive design system for maintaining visual consistency across the MemberPulse platform.

<CardGroup cols={2}>
  <Card title="Brand" icon="fingerprint" href="/style-guide/brand">
    Logo usage, brand values, and identity guidelines
  </Card>

  <Card title="Colours" icon="palette" href="/style-guide/colours">
    Primary, secondary, semantic, and chart colour palettes
  </Card>

  <Card title="Typography" icon="type" href="/style-guide/typography">
    Font families, headings, body text, and text styles
  </Card>

  <Card title="Buttons" icon="square" href="/style-guide/buttons">
    Primary, secondary, tertiary, warning, and danger buttons
  </Card>

  <Card title="Forms" icon="text-cursor-input" href="/style-guide/forms">
    Input fields, selects, checkboxes, and validation states
  </Card>

  <Card title="Tables & Datagrids" icon="table" href="/style-guide/tables">
    Data tables, sorting, filtering, and pagination
  </Card>

  <Card title="Cards & Content" icon="square-dashed" href="/style-guide/cards">
    Cards, articles, stat cards, and content layouts
  </Card>

  <Card title="Navigation" icon="compass" href="/style-guide/navigation">
    Tabs, pills, breadcrumbs, and menu patterns
  </Card>

  <Card title="Icons" icon="icons" href="/style-guide/icons">
    Lucide icon library and usage guidelines
  </Card>

  <Card title="Feedback" icon="message-circle" href="/style-guide/feedback">
    Alerts, toasts, badges, and status indicators
  </Card>
</CardGroup>

***

## Design Principles

<Steps>
  <Step title="Consistency" icon="copy">
    Use consistent patterns, spacing, and components across all portals to create a unified experience.
  </Step>

  <Step title="Clarity" icon="eye">
    Prioritise readability and clear visual hierarchy. Users should understand interfaces at a glance.
  </Step>

  <Step title="Accessibility" icon="accessibility">
    Meet WCAG 2.1 AA standards. All interactive elements must be keyboard accessible with proper contrast.
  </Step>

  <Step title="Responsiveness" icon="smartphone">
    Design mobile-first. All components must work across desktop, tablet, and mobile devices.
  </Step>
</Steps>

***

## Theme Configuration

MemberPulse supports both light and dark themes. The design system uses CSS custom properties for theming.

```css theme={null}
:root {
  --background: #FFFFFF;
  --foreground: #000000;
  --primary: #2421C4;
  --secondary: #ECEBFF;
  --muted: #F5F5F7;
  --border: #E2E8F0;
  --radius: 0.5rem;
}

[data-theme="dark"] {
  --background: #0F101A;
  --foreground: #FFFFFF;
  --primary: #6C69FF;
  --secondary: #2A2890;
  --muted: #2B2E3E;
  --border: #3A3F50;
}
```

***

## Spacing Scale

Consistent spacing creates visual rhythm. Use these spacing tokens throughout the application.

| Token      | Value   | Pixels | Usage            |
| ---------- | ------- | ------ | ---------------- |
| `space-0`  | 0       | 0px    | No spacing       |
| `space-1`  | 0.25rem | 4px    | Tight/compact    |
| `space-2`  | 0.5rem  | 8px    | Small gaps       |
| `space-3`  | 0.75rem | 12px   | Default padding  |
| `space-4`  | 1rem    | 16px   | Standard spacing |
| `space-5`  | 1.5rem  | 24px   | Section gaps     |
| `space-6`  | 2rem    | 32px   | Large gaps       |
| `space-8`  | 3rem    | 48px   | Section dividers |
| `space-10` | 4rem    | 64px   | Page sections    |

***

## Border Radius

| Token         | Value    | Usage                  |
| ------------- | -------- | ---------------------- |
| `radius-sm`   | 0.25rem  | Small elements, badges |
| `radius`      | 0.5rem   | Buttons, inputs, cards |
| `radius-md`   | 0.625rem | Medium cards           |
| `radius-lg`   | 0.75rem  | Large cards, modals    |
| `radius-xl`   | 1rem     | Hero sections          |
| `radius-full` | 9999px   | Pills, avatars         |