> ## Documentation Index
> Fetch the complete documentation index at: https://docs.encoreos.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography Guide

> Tailwind utilities: font-sans (body), font-heading, font-mono. Never declare font-family inline — it bypasses PF-95 tenant typography overrides.

**Status:** Phase 1 — tokens landed. Phase 3 component migration pending.
**Owner:** Platform Foundation (PF)
**Source of truth:** `src/index.css` (`--text-*`, `--leading-*`, `--tracking-*`, `--font-*`).

## Families

| Token                               | Family        | Use                                                  |
| ----------------------------------- | ------------- | ---------------------------------------------------- |
| `--font-body`                       | Inter         | All body, controls, tables, labels                   |
| `--font-display` / `--font-heading` | Space Grotesk | H1–H4, page titles, marketing display                |
| `--font-mono`                       | DM Mono       | Codes (ICD-10/CPT), IDs, JSON, money in dense tables |

Tailwind utilities: `font-sans` (body), `font-heading`, `font-mono`. **Never** declare `font-family` inline — it bypasses PF-95 tenant typography overrides.

## Type scale

Modular ratio \~1.2, optimized for Space Grotesk display + Inter body.

| Token               | px | Pair with leading  |
| ------------------- | -- | ------------------ |
| `--text-2xs`        | 11 | `--leading-snug`   |
| `--text-xs`         | 12 | `--leading-snug`   |
| `--text-sm`         | 14 | `--leading-normal` |
| `--text-base`       | 16 | `--leading-normal` |
| `--text-lg`         | 18 | `--leading-snug`   |
| `--text-xl`         | 22 | `--leading-snug`   |
| `--text-2xl`        | 28 | `--leading-tight`  |
| `--text-3xl`        | 34 | `--leading-tight`  |
| `--text-4xl`        | 42 | `--leading-tight`  |
| `--text-display-md` | 52 | `--leading-tight`  |
| `--text-display-lg` | 64 | `--leading-tight`  |

H1–H4 in `@layer base` already consume the scale; new headings should use the same tokens, not raw `text-[NNpx]`.

## Tracking

* Display (`text-2xl`+): `--tracking-tight` (≈ -0.015em). Already applied via `h1/h2`.
* Body / UI: `--tracking-normal`.
* Eyebrow / overline / ALL-CAPS labels: `--tracking-wide` (0.04em).
* Monospace IDs: `--tracking-mono` (0.01em).

## Font features

`body` enables Inter `cv11` (single-storey 'a'-disambiguating digits), `ss01`, `cv02`. Headings use `ss01`, `ss02`. Tabular numerals are **opt-in**: add `font-variant-numeric: tabular-nums` (or `.font-tabular`) on cells where alignment matters.

## Color contrast (Phase 1 fixes)

* `--text-secondary` tightened light `215 22% 38%`, dark `215 20% 72%` for WCAG AA.
* Dark `--primary` lifted to `222 70% 60%` so CTAs stand off elevated cards.
* `--chart-3` / `--chart-5` darkened in light mode for AA on white.
* `--chart-N-foreground` added — use as the text/label color when drawing on a `--chart-N` fill.

## Migration rules (Phase 3)

1. No new `text-[NNpx]` arbitrary sizes; use the scale.
2. No new `font-family:` declarations; use the tokens.
3. Promote any heading drawn via styled `<div>` to a real `<h1>`–`<h4>` so base styles apply.
4. Long-form prose (compliance docs, audit narratives) → wrap in `.prose` with `--leading-relaxed`.

See also: [SEMANTIC\_COLORS.md](/development/SEMANTIC_COLORS), [ICON\_GUIDE.md](/development/ICON_GUIDE).