Typography

Inter for display, system UI for body, IBM Plex Mono for code.

Display

Inter · 600 · 1.1 · -0.02em

BiglerNet

48–72px

H1

Inter · 600 · 1.2 · -0.02em

Designed for engineers

32–48px

H2

Inter · 600 · 1.25 · -0.01em

Consistent look across products

24–32px

H3

Inter · 590 · 1.3 · -0.01em

Token-driven architecture

20–24px

Body

system-ui · 450 · 1.6 · normal

Design tokens establish a shared vocabulary for colors, spacing, and typography.

15–18px

Small

system-ui · 450 · 1.5 · +0.01em

Secondary labels, timestamps, metadata

13–14px

Caption / Code

IBM Plex Mono · 400 · 1.4

$ export DESIGN_TOKENS=oklch

11–12px

Usage

h1 {
  font-family: var(--font-display);
  font-size: var(--type-scale-h1);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

Rules

1. Three-weight system: 450 (read), 590 (emphasize), 600 (announce). Never use 700+ unless you have a good reason.
2. Use letter-spacing on ALL CAPS text (+0.06em) and negative tracking on large headings (-0.02em).
3. Monospace font for IDs, hashes, timestamps, and code.
4. Avoid text-align: justify (creates rivers on the web).