Skip to content

Typography

Four families, four jobs. Cinzel carries the wordmark and ceremony display; Figtree carries UI headings and data labels; Inter carries every interface string and body paragraph; JetBrains Mono carries everything a wallet must never let you misread — amounts, addresses, hashes, seed words.

The four families

Family stacks come from the font tokens; the web apps self-host via next/font.

Display · Cinzel

COLDHARBOR

var(--font-display), 'Cinzel', ui-serif, Georgia, serif

The wordmark, hero titles, and ceremony moments only. Roman capitals — all-caps, wide tracking.

Heading · Figtree

Sovereign by default

var(--font-heading), 'Figtree', ui-sans-serif, system-ui, sans-serif

UI section headings and data labels — a touch more character than the body face.

UI · Inter

Calm surfaces, one clear action

var(--font-sans), 'Inter', ui-sans-serif, system-ui, sans-serif

Every interface string and body paragraph.

Data · JetBrains Mono

1.204 517

var(--font-mono), 'JetBrains Mono', ui-monospace, monospace

Amounts, addresses, hashes, seed words. Always mono; amounts always tabular-nums.

<h1 className="font-display">COLDHARBOR</h1>
<h2 className="font-heading font-semibold">Section</h2>
<p className="font-sans">Interface copy</p>
<span className="font-mono tabular-nums">1.204 517 09</span>
  • --ch-font-family-display
  • --ch-font-family-heading
  • --ch-font-family-sans
  • --ch-font-family-mono

Size scale

Ten steps from 11px microcopy to 64px display. Line heights: tight 1.15 for display, snug 1.35 for headings, normal 1.55 for body.

2xs0.6875rem · 11pxCold water, warm light
xs0.75rem · 12pxCold water, warm light
sm0.875rem · 14pxCold water, warm light
md1rem · 16pxCold water, warm light
lg1.125rem · 18pxCold water, warm light
xl1.375rem · 22pxCold water, warm light
2xl1.75rem · 28pxCold water, warm light
3xl2.25rem · 36pxCold water, warm light
4xl3rem · 48pxCold water, warm light
5xl4rem · 64pxCold water, warm light
  • --ch-font-size-2xs
  • --ch-font-size-xs
  • --ch-font-size-sm
  • --ch-font-size-md
  • --ch-font-size-lg
  • --ch-font-size-xl
  • --ch-font-size-2xl
  • --ch-font-size-3xl
  • --ch-font-size-4xl
  • --ch-font-size-5xl

Weights

Weights are capability-scoped per family — the display face never exceeds semibold.

Body & Heading
  • 400 regularHarbor watch
  • 500 mediumHarbor watch
  • 600 semiboldHarbor watch
  • 700 boldHarbor watch
Display
  • 400 regularHARBOR
  • 500 mediumHARBOR
  • 600 semiboldHARBOR
Mono
  • 400 regularbc1p…x7q4
  • 500 mediumbc1p…x7q4
  • 700 boldbc1p…x7q4
  • --ch-font-weight-regular
  • --ch-font-weight-medium
  • --ch-font-weight-semibold
  • --ch-font-weight-bold

Line length

Body copy targets 60–75 characters per line. Cap prose at max-w-[65ch]; never let running text span a full desktop viewport.

65ch measure

A wallet earns trust by refusing knowledge. ColdHarbor keeps keys on the device, watches the chain through oblivious protocols, and asks for nothing it could later be forced to surrender. The interface carries that posture: calm surfaces, one clear action per screen, and copy that says exactly what will happen — no more, no less.

<p className="max-w-[65ch] leading-normal">…</p>
  • --ch-font-leading-normal

Tabular figures

Amounts are always font-mono + tabular-nums so columns of digits align and balances never reflow as they tick. The proportional face is shown only as the counter-example.

Correct — mono, tabular-nums
  • 1.204 517 09
  • 0.000 981 24
  • 11.090 000 07
Wrong — proportional digits
  • 1.204 517 09
  • 0.000 981 24
  • 11.090 000 07

Digits drift out of column; never set amounts in the UI face.

<span className="font-mono tabular-nums">1.204 517 09</span>
  • --ch-font-family-mono

Display & heading rules

Cinzel is a mark, not a workhorse; Figtree does the heading lifting.

  • Cinzel (display): wordmark, page-level display headings, and ceremony moments only — never body copy, labels, or controls.
  • Cinzel is all-caps with wide tracking (tracking-wide, 0.08em); the face has no lowercase intent. Weights 400–600 only. No italics.
  • Figtree (heading): UI section headings and data labels. It carries the interface hierarchy so Inter can stay quiet for body copy.
  • Inter (body): everything else — paragraphs, labels, controls, help text.
  • Each family is bound to a token stack (--font-display / --font-heading / --font-sans / --font-mono) and self-hosted via next/font.
<h1 className="font-display tracking-wide uppercase">SEED CEREMONY</h1>
<h2 className="font-heading font-semibold">Recovery phrase</h2>
  • --ch-font-family-display
  • --ch-font-family-heading
  • --ch-font-tracking-wide