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

.display-xlTailwind: text-display-xl font-displaydisplay · 72px/72px · 400

Marketing hero only. Haksen is caps-only: write the copy in capitals.

UNDERSTAND ANYTHING

.display-lTailwind: text-display-l font-displaydisplay · 48px/52px · 400

Deck titles, section openers on the website, social posts.

BRING ANYTHING.

.display-mTailwind: text-display-m font-displaydisplay · 28px/32px · 400

Empty states, onboarding titles, email headlines.

YOUR VISUAL VAULT

.eyebrowTailwind: text-eyebrow font-displaydisplay · 13px/16px · 400

Kickers above headlines and Vault section labels. Never a full sentence.

BUILT FOR SPATIAL MINDS

Interface

.title-lTailwind: text-title-l font-uiui · 32px/38px · 700

Website and email headlines in sentence case; dialog hero titles.

Understand anything visually.

.titleTailwind: text-title font-uiui · 22px/28px · 700

Dialog and panel titles.

Rename this Visualli

.headingTailwind: text-heading font-uiui · 17px/24px · 700

Group headings inside panels, card titles.

Comfort & appearance

.bodyTailwind: text-body font-uiui · 15px/22px · 400

Default reading text: Composer input, chat turns, fact cards, emails.

Drop in notes, links or PDFs and watch them become a map.

.body-smTailwind: text-body-sm font-uiui · 13px/18px · 400

Vault rows, helper text, menu items.

Updated 2 minutes ago

.labelTailwind: text-label font-uiui · 13px/16px · 600

Buttons, tabs, segmented controls, chips.

Create

.captionTailwind: text-caption font-uiui · 12px/16px · 400

Source attributions, timestamps, legal lines. Never below 12px.

From EU-forced-labor.pdf · p.12

.codeTailwind: text-code font-monomono · 13px/20px · 400

The .visualli JSON in View source, spec docs, keyboard shortcuts.

{"type":"layer","level":1}

Canvas

.node-rootTailwind: text-node-root font-handhand · 30px/34px · 700

The level-0 node and the current focus node label.

EU Forced Labour Regulation

.node-labelTailwind: text-node-label font-handhand · 22px/26px · 700

Every other node label. Max three lines, then ellipsis; scales inversely with zoom.

Scope & Definitions

.signatureTailwind: text-signature font-handhand · 1em/1 · 400

One hand-set word inside an interface headline ("Understand anything Visually."). Once per screen.

Visually

.edge-labelTailwind: text-edge-label font-notenote · 18px/20px · 500

Labels along connectors, lowercase, ≤4 words.

coordinates through

.annotationTailwind: text-annotation font-notenote · 24px/26px · 600

Hand-written marginalia: onboarding hints on the canvas, deck and website call-outs.

start here →