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

# Design System: Corporate Friendly — Typography

**Font families:**

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

## Hierarchy

| Role | Size | Weight | Line-Height | Letter-Spacing | Colour | Notes |
|------|------|--------|-------------|----------------|--------|-------|
| Display | 48px / 3rem | 700 | 1.15 | -0.02em | `#111827` | Landing page heroes |
| H1 | 36px / 2.25rem | 700 | 1.2 | -0.015em | `#111827` | Page titles |
| H2 | 28px / 1.75rem | 600 | 1.3 | -0.01em | `#111827` | Section headers |
| H3 | 22px / 1.375rem | 600 | 1.35 | -0.005em | `#111827` | Subsection headers |
| H4 | 18px / 1.125rem | 600 | 1.4 | 0 | `#111827` | Card titles |
| Body Large | 18px / 1.125rem | 400 | 1.65 | 0 | `#374151` | Introductory paragraphs |
| Body | 16px / 1rem | 400 | 1.65 | 0 | `#374151` | Default paragraph text |
| Body Small | 14px / 0.875rem | 400 | 1.55 | 0.005em | `#374151` | Secondary content |
| Caption | 12px / 0.75rem | 500 | 1.4 | 0.015em | `#6b7280` | Labels, timestamps |

**Principles:**

- Prefer weight 600 for headings (semibold) rather than 700 (bold) for a friendlier feel
- Line-height is generous (1.65 for body) to aid readability and reduce visual density
- Maximum content width: 720px for long-form reading
- Use optical alignment — visually align text to icons and other elements, not just mathematically
