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.

Brand

Logo usage, brand values, and identity guidelines

Colours

Primary, secondary, semantic, and chart colour palettes

Typography

Font families, headings, body text, and text styles

Buttons

Primary, secondary, tertiary, warning, and danger buttons

Forms

Input fields, selects, checkboxes, and validation states

Tables & Datagrids

Data tables, sorting, filtering, and pagination

Cards & Content

Cards, articles, stat cards, and content layouts

Navigation

Tabs, pills, breadcrumbs, and menu patterns

Icons

Lucide icon library and usage guidelines

Feedback

Alerts, toasts, badges, and status indicators

---

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.

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