Foundations

Typography

The full type scale, from display down to micro, plus when to reach for serif, sans, or mono.

Type scale

Stacked display-to-micro so the rhythm of the scale is visible at a glance. Headings (display–h4) are set in Fraunces; everything else is DM Sans.

display
56px · lh 1.05 · w400 · -0.02em
Search infrastructure for AI
h1
40px · lh 1.1 · w400 · -0.015em
Search infrastructure for AI
h2
30px · lh 1.2 · w500 · -0.01em
Real-time, multimodal retrieval
h3
24px · lh 1.25 · w600 · -0.005em
Built for AI agents that need answers fast
h4
20px · lh 1.3 · w600
62ms median latency at 1M+ QPS
body-lg
18px · lh 1.6 · w400
Octen indexes the live web so your agents never answer with stale data.
body
16px · lh 1.6 · w400
Send a query and a mode — Deep Search, Web Search, Web Chat, or Broad Search.
body-sm
14px · lh 1.55 · w400
API keys are shown once — copy yours before closing this dialog.
caption
12px · lh 1.4 · w500
P50 latency across the last 1,000 requests
micro
11px · lh 1.3 · w600
FOUNDATIONS

Serif vs. sans

Two families, two jobs. Never mix them within the same text element.

font-serif · Fraunces

Headings and display copy only

Reserve Fraunces for display through h4 — page titles, section headers, hero statements. It carries editorial weight; using it for body text or UI labels makes the product feel like a marketing site instead of infrastructure.

font-sans · DM Sans

Everything else

Body copy, labels, buttons, table cells, form controls, navigation — anything that is UI rather than a headline uses font-sans. It's the workhorse family and should be the default you reach for.

Monospace

font-mono (JetBrains Mono) is for numeric and code contexts only — API keys, latency figures, request IDs — never for prose.

sk-live-1a2b3c4d...9f81
P50 62ms · P99 340ms
req_8f21c9a0-4b7e-4b0a-9c3d-1a2b3c4d5e6f