Next Spacing & layout

Typography

Type scale Fonts Tokens Usage

Type scale, rendered at production weights

H1 through body-strong as the live CSS emits them - exact size, weight, line-height, and letter-spacing. Use this stack as the visual cap on what the system can lay down inline; anything more expressive belongs in a custom-page recipe, not in the foundations.

H1 · 48 / 700 / 1.06 / -0.02em

One agent, four moments

H2 · 32 / 600 / 1.15 / -0.012em

Train, test, deploy, analyze

H3 · 22 / 600 / 1.2 / -0.012em

Living Knowledge

H4 · 17 / 600 / 1.3

Section sub-heading

Body lede · 17 / 400 / 1.55

The customer agent meets external customers; the team assistant meets internal teams.

Body · 15 / 400 / 1.55

Body copy resolves through the same humanist sans; tracking stays at zero.

Body strong · 15 / 600 / 1.55

Body emphasis - used for nouns that need to stand out inline.

Eyebrow · mono · 12 / 500 / 0.12em

Eyebrow line

The three faces — display, mono, wordmark

Which typefaces the site loads, where each one is used, and how the wordmark slot ships (vector paths, not a live webfont).

Geist --font-display / --font-body

Display headings and body copy. Geometric sans with humanist proportions. Weights 300–700.

The quick brown fox jumps over the lazy dog · 0123456789

Inter Tight --font-body

Body text, UI labels, descriptions. Compact proportions for dense layouts. Weights 400–700.

The quick brown fox jumps over the lazy dog · 0123456789

JetBrains Mono --font-mono

Eyebrows, code, build metadata, technical labels. Weights 400–600.

The quick brown fox jumps over the lazy dog · 0123456789

Hanken Grotesk --font-wordmark

Used only for the "Unless" wordmark inside the lockup. Ships as pre-converted vector paths inside the SVG, not a live webfont.

Type tokens — weight, tracking, line-height

The four-step weight scale, the three tracking constants, and the line-height bands behind everything in Type scale. Stick to these when adding a new typographic role - emphasis lifts through weight, not size.

Weights

  • 700 - H1 display anchor. Used once per page.
  • 600 - H2 / H3 / H4 sub-headings; inline strong; mono eyebrow when bold.
  • 500 - interactive labels (buttons, links), mono eyebrow default.
  • 400 - body copy + body lede. Quiet by default; emphasis lifts via weight, not size.

Tracking + line-height

  • --tracking-tight: -0.02em (display).
  • --tracking-normal: 0 (body).
  • --tracking-eyebrow: 0.12em (mono uppercase).
  • Line-height: display 1.06–1.2; body 1.55.

Type rules — what NOT to do

Four constraints the type system holds to. Read these before introducing a new heading style - they're the rules behind why headings feel consistent across every page.

  • Never use leading-none - banned project-wide. Use leading-tight / leading-[1.06] for display.
  • Use text-wrap: balance on every heading (already in base styles).
  • Sub-page hero headings target a 4–6-word compression that wraps to two lines at lg+.
  • Eyebrows are uppercase mono at 12px with 0.12em tracking - the canonical recipe is .u-kicker.