# Typography

**Primary family:** Inter
**Mono family:** IBM Plex Mono (overlays, operational readouts)

Both are SIL OFL licensed and bundled in `/03-fonts/`.

## The four jobs

| Style | Family | Weight | Size | Line-height | Tracking | Use |
|-------|--------|--------|------|-------------|----------|-----|
| Display | Inter | 600 | 60-72px | 1.04 | -0.028em | Homepage hero, campaign posters, the invocation line |
| Heading | Inter | 600 | 32-40px | 1.10 | -0.020em | Section heads, product card titles |
| Body | Inter | 400 | 16-17px | 1.55-1.60 | 0 | All paragraph copy |
| Label | Inter | 600 | 10.5-12px | 1.20 | 0.14em UPPERCASE | Eyebrows, metadata, chart legends, signal chips |

## Overlay system (monospace)

| Style | Family | Weight | Size | Tracking | Use |
|-------|--------|--------|------|----------|-----|
| Overlay data | IBM Plex Mono | 400 | 10-11px | 0.04em | Signal chip values, room brief rows, timestamps |
| Overlay label | IBM Plex Mono | 500 | 10px | 0.08em UPPERCASE | Chip labels: AUTHORITY, 1:1 NOTES, KEY CONTEXT |

## Rules

1. **Never stack two Displays on one surface.** Only one Display per asset.
2. **Body gets 82% charcoal opacity for long-form, 100% charcoal for short executive copy.**
3. **Eyebrow + heading pairing**: small coral uppercase label sits above the heading, 0.14em tracking, color `--coral`, font-size 11-12px.
4. **Coral reserved for one word per line**: in Displays and Headings, coral applies to the payload word - "Clarity," "context," "ready." Never more than one.
5. **Mono is never used for primary copy.** It signals system output only.

## Web CSS

```css
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

:root {
  --font-brand: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}

.display {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: clamp(3.75rem, 5vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
}

.heading {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: clamp(2rem, 3vw, 2.5rem);
  line-height: 1.10;
  letter-spacing: -0.020em;
}

.body {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 1.0625rem;  /* 17px */
  line-height: 1.58;
  letter-spacing: 0;
}

.label {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 0.6875rem;  /* 11px */
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mono-overlay {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}
```

## Print and PDF

If exporting to PDF or print, embed both families from `/03-fonts/`. Do not fall back to Helvetica or Arial. The system voice depends on Inter.