# Foundations · Typography

KDS uses two brand typefaces.

| Family | Use | Weights |
|--------|-----|---------|
| **Opificio** | Wordmark and display moments only. | Bold (700) — canonical. Rounded and Regular cuts available for editorial. |
| **Manrope** (variable) | All UI typography — headings, body, labels, captions. | 200 ExtraLight, 300 Light, 400 Regular, 500 Medium, 600 SemiBold, 700 Bold, 800 ExtraBold |
| **Roboto Mono** *(non-brand)* | Code, tabular figures, identifiers. | 400, 500 |

Manrope is loaded as a variable font via `@fontsource-variable/manrope` (product apps) or `next/font/google` (Next.js apps). Use the **Variable** build wherever possible — it lets us interpolate weight without shipping multiple files.

## Wordmark lockup

`kode` in Opificio Bold (72pt) above `design consultants` in Manrope ExtraLight (20pt, +4% letter-spacing).

## Type scale (UI)

| Token | Family | Size | Weight | Line height | Use |
|-------|--------|------|--------|-------------|-----|
| `display`             | Opificio | 72px | 700 | 80px | Hero / wordmark only |
| `wordmarkSecondary`   | Manrope  | 20px | 200 | 28px | Wordmark second line |
| `headingXL`           | Manrope  | 32px | 700 | 40px | Page hero |
| `headingL`            | Manrope  | 24px | 600 | 32px | Section heading |
| `headingM`            | Manrope  | 20px | 600 | 28px | Subsection / card title |
| `headingS`            | Manrope  | 16px | 600 | 24px | Group label |
| `bodyL`               | Manrope  | 18px | 400 | 28px | Lead paragraph |
| `bodyM` *(default)*   | Manrope  | 16px | 400 | 24px | Body copy |
| `bodyS`               | Manrope  | 14px | 400 | 20px | Secondary / helper |
| `caption`             | Manrope  | 12px | 500 | 16px | Labels, badges, meta |
| `mono`                | Roboto Mono | 14px | 400 | 20px | Code, identifiers |

## OpenType features

Product apps enable `font-feature-settings: "ss01", "cv11"` on Manrope. These swap the default `a` and adjust the `1` / `l` for clearer numeric reading on the warm canvas. Keep them on by default — they are part of the brand voice.

For numerics use `font-variant-numeric: tabular-nums` (utility class `.tnum`) so columns don't jitter.

## Display weight

`.font-display` class is `Manrope 800` with `letter-spacing: -0.02em`. Use for hero headlines where Opificio would be too much.

## Web font delivery

- Self-host Manrope from `/assets/fonts/manrope/` and preload **400** + **600** in the document head.
- Opificio is licensed; self-host from `/assets/fonts/opificio/`. Don't expose source files publicly.
- Fallback stack: `'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif`.

## Do / Don't

- ✅ Default body to `bodyM` with `line-height: 1.5` for readability.
- ✅ Use Opificio for the wordmark and nowhere else.
- ❌ Don't mix Manrope with Geist / Inter / Outfit. The legacy apps that do so are drift to be migrated.
- ❌ Don't justify text. Don't underline anything that isn't a link.