Loading page…
Loading page…
Six families, six jobs. Cinzel carries the wordmark and ceremony display; Figtree carries UI headings; Inter carries every interface string and body paragraph; Ioskeley Mono carries everything a wallet must never let you misread — amounts, addresses, hashes, seed words — plus figure captions, chips, and button faces (bold caps); Shine Typewriter carries navigation labels and badge values.
Family stacks come from the font tokens; the web apps self-host via next/font.
var(--font-display), 'Cinzel', ui-serif, Georgia, serif
The wordmark, hero titles, and ceremony moments only. Roman capitals — all-caps, wide tracking.
Sovereign by default
var(--font-heading), 'Figtree', ui-sans-serif, system-ui, sans-serif
UI section headings — hierarchy without stealing the mark.
Calm surfaces, one clear action
var(--font-sans), 'Inter', ui-sans-serif, system-ui, sans-serif
Every interface string and body paragraph.
1.204 517
var(--font-mono), 'Ioskeley Mono', ui-monospace, monospace
Amounts, addresses, hashes, seed words — plus captions, chips, and bold-caps button faces.
Portfolio · Send · Receive
var(--font-typewriter), 'Shine Typewriter', ui-monospace, monospace
Section navigation and badge values — the typewriter voice on wayfinding.
const seed = "…";
var(--font-mono), 'Ioskeley Mono', ui-monospace, monospace
Source blocks, file paths, and key caps. Same face as the data mono, on its own token so the two can diverge.
<Wordmark />
<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>
<a className="font-nav">Portfolio</a>
<pre className="font-code">const seed = "…"</pre>--ch-font-family-display--ch-font-family-heading--ch-font-family-sans--ch-font-family-mono--ch-font-family-nav--ch-font-family-codeTen steps from 11px microcopy to 64px display. Line heights: tight 1.15 for display, snug 1.35 for headings, normal 1.55 for body.
--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-5xlWeights are capability-scoped per family — the display face never exceeds semibold.
--ch-font-weight-regular--ch-font-weight-medium--ch-font-weight-semibold--ch-font-weight-boldBody copy targets 60–75 characters per line. Cap prose at max-w-[65ch]; never let running text span a full desktop viewport.
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-normalAmounts 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.
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-monoCinzel is a mark, not a workhorse; Figtree does the heading lifting.
--font-display / --font-heading / --font-sans / --font-mono / --font-nav / --font-code) 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