Chapter 03

Type that talks like software

Three typefaces, no exceptions. Chakra Petch speaks in headlines — squared and technical, the web successor to the brand's Loos heritage. Inter does the reading. JetBrains Mono handles the numbers, because in an operations product the numbers are the product.

Typefaces

Chakra Petch, Inter & JetBrains Mono

AaBb 0123
Bold — headlines, the display voice
Squared, technical, unmistakably ours.
Chakra Petch · 700display headlines · Google Fonts
AaBbCcDdEeFf 0123456789
Regular — body copy
Medium — UI labels
Semibold — buttons, emphasis
Bold — the wordmark, card titles
Extrabold — hero stats & numerals
Interbody & UI text · Google Fonts
$29/user · 0123456789
backoffice.llc
Dr 1100 · Cr 2100 — 4,250.00
GET /api/records?entity=deals
JetBrains Mono · 500money, data, URLs, code
Fallbacks: Inter falls back to the system stack (-apple-system, Segoe UI, Roboto, sans-serif); JetBrains Mono to ui-monospace, monospace. In documents where webfonts aren't possible (slides, email), use the fallback stack — never substitute a different display face.
Scale

The type scale

Display
Chakra Petch · 38–72px · 700
tracking −0.015em · line 1.08
Run the whole company from one place.
Headline / H2
Chakra Petch · 24–36px · 700
tracking −0.01em · line 1.15
Built in 5 minutes, not 5 weeks
Title / H3
16–17px · 700
tracking −0.01em
Every entity exports to CSV from the toolbar
Body
16px · 400 · line 1.55–1.65
measure ≤ 640px
Describe your business in plain English and the AI designs the entities, fields, and dashboards — then seeds sample records so the workspace is alive on first open.
Small / caption
13–14px · 400–500 · Muted
No credit card required. Free tier is free forever — 3 users, 500 records.
Eyebrow
11–12px · 700 · uppercase
tracking +0.08em
AI-native builder
Data / mono
12–13px · JetBrains Mono 500
$245/mo · 5 users · Business
Rules

What keeps it ours

Tighter as it grows

Tracking scales with size: −0.035em on display, −0.02em on headlines, −0.01em on titles, neutral on body. Big and loose reads off-brand.

One gradient phrase

A headline may carry the gradient on exactly one phrase — the phrase that matters. Never the whole headline, never two phrases.

Sentence case, always

Headlines, buttons, and navigation are sentence case. Title Case Reads Like A Press Release; ALL CAPS is reserved for 11px eyebrows.

Numbers do the talking

"$29/user/mo" beats "affordable". "5 minutes" beats "fast". Put the number in the headline and set data in JetBrains Mono.

Nothing lighter than 400

No thin or light weights, ever. The brand's voice is confident; hairline type whispers.

Readable measure

Body copy never runs wider than ~640px. If a paragraph spans the container, it's a layout bug, not a style choice.