# Typography

| Family | Stack |
| --- | --- |
| --font-display | `Haksen, "Atkinson Hyperlegible Next", system-ui, sans-serif` |
| --font-ui | `"Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif` |
| --font-hand | `Kalam, "Atkinson Hyperlegible Next", cursive` |
| --font-note | `Caveat, Kalam, cursive` |
| --font-mono | `"Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace` |

## Display

| Style | Family | Size / line | Weight | Usage |
| --- | --- | --- | --- | --- |
| .display-xl | display | 72px/72px | 400 | Marketing hero only. Haksen is caps-only: write the copy in capitals. |
| .display-l | display | 48px/52px | 400 | Deck titles, section openers on the website, social posts. |
| .display-m | display | 28px/32px | 400 | Empty states, onboarding titles, email headlines. |
| .eyebrow | display | 13px/16px | 400 | Kickers above headlines and Vault section labels. Never a full sentence. |

## Interface

| Style | Family | Size / line | Weight | Usage |
| --- | --- | --- | --- | --- |
| .title-l | ui | 32px/38px | 700 | Website and email headlines in sentence case; dialog hero titles. |
| .title | ui | 22px/28px | 700 | Dialog and panel titles. |
| .heading | ui | 17px/24px | 700 | Group headings inside panels, card titles. |
| .body | ui | 15px/22px | 400 | Default reading text: Composer input, chat turns, fact cards, emails. |
| .body-sm | ui | 13px/18px | 400 | Vault rows, helper text, menu items. |
| .label | ui | 13px/16px | 600 | Buttons, tabs, segmented controls, chips. |
| .caption | ui | 12px/16px | 400 | Source attributions, timestamps, legal lines. Never below 12px. |
| .code | mono | 13px/20px | 400 | The .visualli JSON in View source, spec docs, keyboard shortcuts. |

## Canvas

| Style | Family | Size / line | Weight | Usage |
| --- | --- | --- | --- | --- |
| .node-root | hand | 30px/34px | 700 | The level-0 node and the current focus node label. |
| .node-label | hand | 22px/26px | 700 | Every other node label. Max three lines, then ellipsis; scales inversely with zoom. |
| .signature | hand | 1em/1 | 400 | One hand-set word inside an interface headline ("Understand anything Visually."). Once per screen. |
| .edge-label | note | 18px/20px | 500 | Labels along connectors, lowercase, ≤4 words. |
| .annotation | note | 24px/26px | 600 | Hand-written marginalia: onboarding hints on the canvas, deck and website call-outs. |