<!-- SPDX-License-Identifier: MIT -->
<!-- SPDX-FileCopyrightText: 2025-2026 Marcus Quinn -->

# Design System: Playful Vibrant — Typography

## Font Families

- **All text:** `Nunito, "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`
- **Monospace:** `"Fira Code", "JetBrains Mono", "SFMono-Regular", Consolas, monospace`

## Hierarchy

| Role | Size | Weight | Line-Height | Letter-Spacing | Colour | Notes |
|------|------|--------|-------------|----------------|--------|-------|
| Display | 56px / 3.5rem | 800 | 1.1 | -0.02em | `#1e1b4b` | Hero headlines, celebrations |
| H1 | 40px / 2.5rem | 700 | 1.15 | -0.015em | `#1e1b4b` | Page titles |
| H2 | 32px / 2rem | 700 | 1.2 | -0.01em | `#1e1b4b` | Section headers |
| H3 | 24px / 1.5rem | 700 | 1.25 | -0.005em | `#1e1b4b` | Subsections |
| H4 | 18px / 1.125rem | 700 | 1.3 | 0 | `#1e1b4b` | Card titles |
| Body Large | 18px / 1.125rem | 400 | 1.6 | 0 | `#374151` | Lead text |
| Body | 16px / 1rem | 400 | 1.6 | 0 | `#374151` | Default text |
| Body Small | 14px / 0.875rem | 400 | 1.5 | 0.005em | `#374151` | Compact text |
| Caption | 12px / 0.75rem | 600 | 1.4 | 0.02em | `#6b7280` | Labels, badges |
| Button | 15px / 0.9375rem | 700 | 1.2 | 0.01em | — | Button text |

## Principles

- Weight 700 (bold) for all headings — confidence and energy
- Weight 800 (extra-bold) for display text only — maximum impact
- Nunito's rounded terminals complement the rounded UI shapes
- Avoid thin weights (300, 400) for headings — they lack the required energy
- Maximum content width: 800px for body text (wider than editorial — content is scanned, not deeply read)

## Mobile Typography Adjustments

- Display → 36px on mobile
- H1 → 32px on mobile
- H2 → 26px on mobile
- Body remains 16px on all screen sizes
