Style Guide
Typography
MemberPulse typography system - fonts, headings, and text styles
Typography
Typography establishes visual hierarchy and ensures readability across the platform.
Font Families
Sans Serif
Primary font for UI elements, body text, and general content.
font-family: ui-sans-serif, system-ui, sans-serif;Serif
Display font for marketing, quotes, or special emphasis.
font-family: ui-serif, Georgia, serif;Monospace
Code font for technical content, code snippets, and data.
font-family: ui-monospace, monospace;Headings
| Level | Size | Weight | Line Height | Usage |
|---|---|---|---|---|
| H1 | 2.25rem (36px) | 700 (Bold) | 1.2 | Page titles |
| H2 | 1.875rem (30px) | 600 (Semibold) | 1.3 | Section headers |
| H3 | 1.5rem (24px) | 600 (Semibold) | 1.4 | Subsection headers |
| H4 | 1.25rem (20px) | 600 (Semibold) | 1.4 | Card titles |
| H5 | 1.125rem (18px) | 500 (Medium) | 1.5 | Small headers |
| H6 | 1rem (16px) | 500 (Medium) | 1.5 | Micro headers |
Body Text
Regular paragraph text uses a base font size of 16px (1rem) with a line height of 1.6 for optimal readability.
Good typography improves user experience by making content easier to scan and read.
Text Sizes
| Size | Class | Pixels | Usage |
|---|---|---|---|
| Extra Small | text-xs | 12px | Labels, badges |
| Small | text-sm | 14px | Helper text, captions |
| Base | text-base | 16px | Body text |
| Large | text-lg | 18px | Lead paragraphs |
| Extra Large | text-xl | 20px | Highlighted content |
Font Weights
| Weight | Value | Class | Usage |
|---|---|---|---|
| Light | 300 | font-light | Large display text |
| Normal | 400 | font-normal | Body text |
| Medium | 500 | font-medium | Subtle emphasis |
| Semibold | 600 | font-semibold | Headings, labels |
| Bold | 700 | font-bold | Strong emphasis |
Text Formatting
- Bold text - Used for emphasis and important information
- Italic text - Used for quotes, references, or subtle emphasis
Inline code- Used for technical terms, variables, code
Text Colours
| Colour | CSS Variable | Hex | Usage |
|---|---|---|---|
| Primary | --foreground | #000000 | Main content |
| Secondary | --muted-foreground | #6C757D | Supporting text |
| Link | --primary | #2421C4 | Clickable text |
| Success | --success | #10B981 | Positive feedback |
| Warning | --warning | #F59E0B | Caution messages |
| Destructive | --destructive | #DC3545 | Errors, warnings |
Lists
Unordered Lists
- First item in the list
- Second item in the list
- Third item in the list
Ordered Lists
- First step in the process
- Second step in the process
- Third step in the process
Code Blocks
Use inline code for short code references within text.
interface Member {
id: string;
firstName: string;
lastName: string;
email: string;
status: 'active' | 'pending' | 'expired';
}Responsive Typography
| Breakpoint | H1 | H2 | H3 | Body |
|---|---|---|---|---|
| Desktop | 36px | 30px | 24px | 16px |
| Tablet | 32px | 26px | 22px | 16px |
| Mobile | 28px | 24px | 20px | 16px |