MemberPulse Design System

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

Design Principles

1. Consistency

   Use consistent patterns, spacing, and components across all portals to create a unified experience.

2. Clarity

   Prioritise readability and clear visual hierarchy. Users should understand interfaces at a glance.

3. Accessibility

   Meet WCAG 2.1 AA standards. All interactive elements must be keyboard accessible with proper contrast.

4. Responsiveness

   Design mobile-first. All components must work across desktop, tablet, and mobile devices.

Theme Configuration

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

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

Border Radius