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

# Typography

> MemberPulse typography system - fonts, headings, and text styles

# Typography

Typography establishes visual hierarchy and ensures readability across the platform.

***

## Font Families

<CardGroup cols={3}>
  <Card title="Sans Serif" icon="text">
    **Primary font** for UI elements, body text, and general content.

    ```css theme={null}
    font-family: ui-sans-serif, system-ui, sans-serif;
    ```
  </Card>

  <Card title="Serif" icon="text">
    **Display font** for marketing, quotes, or special emphasis.

    ```css theme={null}
    font-family: ui-serif, Georgia, serif;
    ```
  </Card>

  <Card title="Monospace" icon="code">
    **Code font** for technical content, code snippets, and data.

    ```css theme={null}
    font-family: ui-monospace, monospace;
    ```
  </Card>
</CardGroup>

***

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

<Note>
  Good typography improves user experience by making content easier to scan and read.
</Note>

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

```typescript theme={null}
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 |