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

# Design System: Corporate Modern — Typography Rules

## Font Families

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

## Hierarchy

| Role | Size | Weight | Line-Height | Letter-Spacing | Colour | Notes |
|------|------|--------|-------------|----------------|--------|-------|
| Display | 56px / 3.5rem | 700 | 1.1 | -0.025em | `#1a1a2e` | Marketing heroes only |
| H1 | 40px / 2.5rem | 700 | 1.2 | -0.02em | `#1a1a2e` | Page titles |
| H2 | 32px / 2rem | 600 | 1.25 | -0.015em | `#1a1a2e` | Section headers |
| H3 | 24px / 1.5rem | 600 | 1.3 | -0.01em | `#1a1a2e` | Subsections |
| H4 | 20px / 1.25rem | 600 | 1.35 | -0.005em | `#1a1a2e` | Card headers |
| Body Large | 18px / 1.125rem | 400 | 1.6 | 0 | `#334155` | Lead paragraphs |
| Body | 16px / 1rem | 400 | 1.6 | 0 | `#334155` | Default text |
| Body Small | 14px / 0.875rem | 400 | 1.5 | 0.005em | `#334155` | Compact layouts |
| Caption | 12px / 0.75rem | 500 | 1.4 | 0.02em | `#64748b` | Labels, metadata |
| Overline | 12px / 0.75rem | 600 | 1.2 | 0.08em | `#64748b` | Section labels (uppercase) |

## Principles

- One font family for everything — hierarchy comes from size and weight only
- Negative letter-spacing on headings (tighter), positive on small text (looser)
- Maximum content width: 720px for long-form text
- Use weight 500 (medium) sparingly — primarily for emphasis within body text
