Foundations

Typography

Inter for words, IBM Plex Mono for numbers. A small scale, tight headings, and figures that line up.

#Typefaces

Aa 0123

Inter 400 to 800. Interface and headings.

$18,420

IBM Plex Mono 400 to 600, tabular figures. Metrics, prices, dates, counts.

Both are self-hosted in this guide so it renders the same offline. In the app, the stacks are --font-sans and --font-mono, with system fallbacks.

#Numbers

Every metric, price, date, and count uses the .num class: mono face, tabular figures, slightly tight tracking. Columns and weeks then compare at a glance.

Proportional vs tabular

Without .num

$1,111
$8,888
$18,420

With .num

$1,111
$8,888
$18,420

Code

<div class="g-grid-2" style="margin:0">
  <div><div class="label">Without .num</div><div style="font-size:var(--text-lg);font-weight:600">$1,111<br>$8,888<br>$18,420</div></div>
  <div><div class="label">With .num</div><div class="num" style="font-size:var(--text-lg);font-weight:600">$1,111<br>$8,888<br>$18,420</div></div>
</div>

#Scale

Token	Size	Sample
`--text-xs`	11.5px	Orders rose 12% this week
`--text-sm`	13px	Orders rose 12% this week
`--text-base`	14px	Orders rose 12% this week
`--text-md`	16px	Orders rose 12% this week
`--text-lg`	20px	Orders rose 12% this week
`--text-xl`	26px	Orders rose 12% this week
`--text-2xl`	clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem)	Orders rose 12% this week
`--text-metric`	clamp(1.5rem, 1.2rem + 0.9vw, 1.875rem)	Orders rose 12% this week

Use	Token	Weight
Page title (`h1`)	`--text-2xl`	800
Modal or auth card title	`--text-lg`	800
Card title, section head	`--text-md`	700
Body, tables, buttons	`--text-base`	400 · 600 for buttons
Hints and descriptions	`--text-sm`	400
Labels (uppercase)	`--text-xs`	700, `0.07em` tracking
Big metric	`--text-metric`	600, mono

#Headings and labels

Hierarchy

Weekly report

Revenue rose 12% on stronger mug sales

Orders were up 8% and sessions held steady. One product is nearly out of stock.

Code

<div class="label">Weekly report</div>
<h1 style="font-size:var(--text-2xl);font-weight:800;margin:var(--space-1) 0 var(--space-2)">Revenue rose 12% on stronger mug sales</h1>
<p class="muted" style="font-size:var(--text-md);line-height:1.6;max-width:62ch">Orders were up 8% and sessions held steady. One product is nearly out of stock.</p>

Headings use tight tracking (-0.02em) and text-wrap: balance.
Keep running text near 65 characters wide. Use max-width: 62ch to 68ch.
Small uppercase labels are a .label class. Do not type text in capitals.
Use weights 400, 600, 700, 800. Avoid light weights on small text.
Type scales fluidly only where the token says so (--text-2xl, --text-metric).