A Reference

The
Colophon.

Every typeface, token, and component that composes Possible Futures, annotated so you can point at a thing and say what's wrong with it.

I · The faces

Fraunces

Display · Italic accents · Long-form reading

Variable serif · wght 300–700 · opsz 9–144 · SOFT 0–100 · WONK 0–1

Possible Futures.

Display · 72 / opsz 144 · SOFT 60 · italic tail opsz 144 · SOFT 100 · WONK 1

Exhibition heading, thirty-six point.

Sub-display · 28 / opsz 36 · SOFT 40

This is body italic. The compass wants a sentence that feels like it was set by a human who cares about the rhythm of the line.

Body italic · 18 / opsz 18 · SOFT 50

At text sizes Fraunces loses most of its flair and reads like a proper bookface — the opsz axis ramps up contrast as you go bigger, not smaller, so long passages stay calm while display settings earn their drama.

Body roman · 15 / opsz 15 · SOFT 30

Fraunces is the whole aesthetic. It has an optical-size axis that lets the same family behave like a newspaper body at 14pt and a 1900s poster at 144pt. The SOFT axis is what gives headings their warmth, and the WONK axis adds a tiny bit of swing to the italics that reads as 'hand-set' rather than 'rendered by a browser'. Every place you see display type, italic voice, or long-form reading in the app, it's Fraunces.

Instrument Sans

Buttons · Form fields · Smallcaps labels · UI chrome

Variable sans · wght 400–700 · roman + italic

link · italic

Buttons use Instrument Sans 10 / 600, uppercase, 0.16em tracking

Form field · Instrument Sans 13 · placeholder italic via serif fallback

Smallcaps label

Instrument Sans 10 / 600, 0.18em tracking, text-transform: uppercase

A quiet workhorse. Fraunces at 10–12 point reads as 'stressed' when you just want a label to behave; Instrument Sans takes over anywhere the text is small, dense, or interactive. The two were designed by the same foundry (Instrument) and share proportions, so the pairing doesn't fight itself. If you find an Instrument Sans usage that wants to be italic or atmospheric, that's a sign it probably wants Fraunces instead.

JetBrains Mono

Scores · Dates · Roman numerals · Code · Tabular figures

Monospace · wght 400–500 · lining figures

/18

W3 · C3 · G3 · P3 · T3 · I3

Dimension atoms

2026-04-12

Date stamp

npm run dev:sandbox
npm run reset:sandbox
# Possible Futures is ready to press

Command card · mono 12, ink border-left, paper-2 fill

Every number in the app is set in mono with tabular figures so scores align vertically and numerals don't jump around as values change. It's also the texture that makes the catalog feel like an archival listing rather than a spreadsheet — the roman numerals in the sidebar (I., II., III.), the entry numbers on each catalog row, the compass bearings under dates. Code blocks in the slides use it too, for the obvious reason.

II · The palette

Warm paper and warm ink. The vermillion stamp is the only chromatic accent and it's rationed — it only shows up where the eye needs to be drawn, never as decoration.

--paper

#f4eee4

Page background

--paper-2

#ebe3d3

Card fill

--paper-3

#e3d9c2

Deeper card

--rule

#d4c6ad

Hairlines, borders

--ink

#1a1512

Primary text

--ink-2

#6b5e4f

Secondary text

--ink-3

#a39379

Tertiary · meta

--stamp

#c6371f

The only accent

III · Type in context

The editorial hierarchy as it shows up across the app. Each row names the role and the file where the rule lives so you can trace any change back to its source.

Display head

components/layout/editorial.tsx · PageHeader

An Index of Possible Futures.

The italic tail is the vermillion pivot for every page title. If you change the opsz or SOFT here, every page follows.

Eyebrow (smallcaps)

.smallcaps utility · globals.css

I · Dashboard — a working index

Instrument Sans 10 / 600, 0.18em tracking. Used for section labels, filter hints, and ledger subtitles.

Italic subtitle

PageHeader subtitle

A working catalog of roles under consideration. Scored, annotated, and kept close at hand.

Always italic. Always under a display head. Never more than two lines.

Catalog entry title

components/roles/role-row.tsx

Anthropic

Company name on a dashboard row. opsz 30 keeps contrast lower than display headings so rows feel listable, not shouted.

Total score

role-row.tsx · editorial.tsx LedgerStat

Scores are Fraunces with tabular figures, not JetBrains. The catalog look wants type-set numbers; JetBrains is reserved for atomic meta (dimensions, dates).

Status (typographic, not pill)

components/roles/status-select.tsx

interviewing

All role and application statuses render as lowercase italic text instead of colored pills. Vermillion for active/positive states, ink-3 with strikethrough for dead states.

IV · Component atoms

Buttons

The stamp button has a 2px ink shadow that shifts on hover — it's the strongest affordance in the app and should only be used for the primary action on any given screen. Ghost is for secondary. Italic link is for tertiary / cancel.

Chip (italic quoted)

“craft”×“typography”×“design engineer”×“prototype”×

Signal words, red flags, banned words — anything the student curates renders as quoted italic serif. The quotation marks are the subtle move that makes it feel archival.

Meta row

Statusinterviewing

Recommendationapply

Resume versionB: Maker

Labels in smallcaps, values in italic serif. Used on the role detail page and the publish reveal.

Catalog row

Anthropic

Design Engineer, AI Capability · San Francisco

18/18

interviewing

This is what a single role looks like on the dashboard. Tabular index on the left, Fraunces title + metadata, oversized score, italic status on the right.

V · Notes to a future reader

The whole system is three fonts and seven colors. If you find yourself reaching for a fourth font or a second accent color, pause and ask whether the existing atoms can do the job with a different weight, opsz, or italic switch. Editorial systems fail the same way every time: somebody introduces a “just one” exception and two weeks later there are nine exceptions and no system.

Vermillion is load-bearing for hierarchy. It marks the italic tail of a display head, a strong-fit score, an active status, a published signal. It should never be used for decoration or for the secondary action on a screen. If a page has no vermillion, that means nothing on that page needs your attention urgently, and that's a meaningful signal in its own right.

The SOFT axis on Fraunces is the single easiest knob to turn for emotional temperature. Higher SOFT (80–100) makes the italics feel closer to handwriting and is reserved for accents and reveals. Lower SOFT (20–40) keeps long-form reading calm. If a section feels too fussy, drop the SOFT value before you reach for a different font.

If you want to propose a change, the fastest way to make it actionable is to screenshot the thing you don't like, annotate it, and open an issue referencing the file paths listed in section III above. Every rule in this system lives in a specific file — nothing is implicit.

← back to the dashboard