# Typography

> Cabinet Grotesk for Crew OS, Inter for Max, Instrument Serif for Max's agent surfaces.

**Cabinet Grotesk** (files in `fonts/`, weights 100–900; there is no 600 cut, so semibold renders from the Bold file) is the brand face. Crew OS sets everything in it — display, interface and body. Max uses it for display moments (onboarding, the first-day packet) and sets its interface in **Inter** (Google Fonts, 100–900). Monospace is the system stack (`mono`).

- Display: `display-hero` (60px, medium, tracking −0.05em, balanced and centred) for the one hero line; `display-page` (48px semibold) for public page titles; `display-section` (30px bold) for marketing section heads. Scale display sizes down a step per breakpoint (60 → 48 → 36 → 30).
- Interface: use the `crew-*` styles in Crew OS and the `max-*` styles in Max. They share sizes: title 24/32 (Crew semibold, Max bold, both tracking −0.025em), heading 18/28 semibold, body 14/20, body-lg 16/24, caption 12/16, label 14/1 medium, overline 12px semibold uppercase.
- 14px (`*-body`) is the default interface size; 12px (`*-caption`) is the most-used size in Max, for meta lines and tables.
- Text fields render 16px below the `md` breakpoint and 14px from `md` up, so phones don't zoom on focus.
- Code: `code-inline` (13.6px on a `muted` chip, radius 0.4rem) and `code-block` (12.8px on `muted` with a `border` hairline, radius 0.5rem).
- Max turns on the OpenType features `ss01`, `ss02`, `cv05` and `cv08` for body text; keep them on.
- Agent surfaces add **Instrument Serif** (Google Fonts, `serif`) for greetings and onboarding titles — `chat-empty-title` (46px) and `packet-title` (72px), each with a muted italic `em` — and set messages in `chat-message` (14.5px / 1.68).
- Keep text at 12px or larger, body at weight 400 or heavier, and no light weights under 20px. Max's design audit counts 763 uses of 8–11px sizes and asks for one 12px caption style instead: that is debt to pay down, not a pattern to copy.

## Display

Family: `--font-cabinet` ("Cabinet Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)

| Style | Size | Line height | Weight | Tracking | Usage |
|---|---|---|---|---|---|
| `display-hero` | 60px | 1 | 500 | -0.05em | Marketing hero h1 at xl (text-6xl font-medium tracking-tighter); steps down to 48, 36 and 30px at smaller breakpoints. Balanced, centred, in `primary`. |
| `display-page` | 48px | 1 | 600 | -0.025em | Public page h1 (integrations, manifesto, blog index) at md; 60px at lg. |
| `display-section` | 30px | 36px | 700 | — | Marketing section headings (text-3xl font-bold). |

## Crew OS interface

Family: `--font-cabinet` ("Cabinet Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)

| Style | Size | Line height | Weight | Tracking | Usage |
|---|---|---|---|---|---|
| `crew-title` | 24px | 32px | 600 | -0.025em | Crew OS page titles (text-2xl font-semibold tracking-tight). |
| `crew-heading` | 18px | 28px | 600 | — | Section and dialog titles (text-lg font-semibold). |
| `crew-body-lg` | 16px | 24px | 400 | — | Lead paragraphs and text fields below md (inputs render text-base on phones so iOS does not zoom). |
| `crew-body` | 14px | 20px | 400 | — | Default interface text: table cells, descriptions, buttons (text-sm). |
| `crew-label` | 14px | 1 | 500 | — | Form labels and Button text (text-sm leading-none font-medium). |
| `crew-caption` | 12px | 16px | 400 | — | Meta lines, badges, table footers (text-xs). |
| `crew-overline` | 12px | 1.5 | 600 | 0.08em | Eyebrows above section titles and settings group titles; always set uppercase, in `muted-foreground`. |

## Max interface

Family: `--font-inter` (Inter, -apple-system, "Helvetica Neue", Arial, sans-serif)

| Style | Size | Line height | Weight | Tracking | Usage |
|---|---|---|---|---|---|
| `max-title` | 24px | 32px | 700 | -0.025em | Max page titles (text-2xl font-bold tracking-tight). |
| `max-heading` | 18px | 28px | 600 | — | Card, sheet and dialog titles (text-lg font-semibold). |
| `max-body-lg` | 16px | 24px | 400 | — | Chat messages and long-form reading; text fields below md. |
| `max-body` | 14px | 20px | 400 | — | Default Max interface text (text-sm). |
| `max-label` | 14px | 1 | 500 | — | Form labels and Button text. |
| `max-caption` | 12px | 16px | 400 | — | The most used size in Max (text-xs): table meta, badges, timestamps, helper lines. |
| `max-overline` | 12px | 1.5 | 600 | 0.08em | Settings group titles; uppercase, in `muted-foreground`. |

## Max agent surfaces

Family: `--font-inter` (Inter, -apple-system, "Helvetica Neue", Arial, sans-serif)

| Style | Size | Line height | Weight | Tracking | Usage |
|---|---|---|---|---|---|
| `packet-title` | 72px | 0.96 | 400 | -0.025em | Onboarding packet page titles (Instrument Serif, `.page__title`); 44px on phones. |
| `chat-empty-title` | 46px | 1.02 | 400 | -0.02em | The Max chat empty state (`.mx-empty__title`), with a muted italic `em`; clamp(36px, 11vw, 46px) on phones. |
| `chat-message` | 14.5px | 1.68 | 400 | -0.005em | Max's messages (`.mx-bubble`), the composer text and onboarding bubbles: prose, no box. |
| `chat-meta` | 11px | 1.3 | 500 | — | Row meta, tool-call states and badges on agent surfaces, in `mx-ink-3`. |
| `mono-eyebrow` | 10.5px | 1 | 500 | 0.14em | Onboarding packet eyebrows and field labels (`.eyebrow`, `.field-label`); uppercase, in the dimmest readable ink. |

## Code

Family: `--font-mono` (ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)

| Style | Size | Line height | Weight | Tracking | Usage |
|---|---|---|---|---|---|
| `code-inline` | 13.6px | undefined | 400 | — | Inline code in editors and docs (0.85rem) on a `muted` chip, radius 0.4rem. |
| `code-block` | 12.8px | undefined | 400 | — | Code blocks (0.8rem) on `muted` with a `border` hairline, radius 0.5rem. |