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

1. First step in the process
2. Second step in the process
3. 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