← The Foolscap Folio

Specimen sheet · Sheet 1 of 1 · Scale 1:1

The Foolscap Design System

Dark blue-green and gray serif ink on creamy paper; the manner of an aged newspaper crossed with an antique engineering schematic. Every value on this sheet resolves to a token in foolscap.tokens.json.

01 · Color

tokens: color.*

Primitive ramps — reference tier

Semantic tier — purpose names

02 · Typography

tokens: font.* · typography.*

masthead · Playfair 800 · 68/68

Foolscap

h1 / headline · Playfair 700 · 38/44

The Shrinking Atlantic, Measured

h2 · Playfair 700 · 30/36

I. The Record as a Curve

h3 · Lora 600 · 24/32

Boiler pressure and its discontents

lede · Lora 400 italic · 19/28

A century of boiler pressure, rivet counts, and national vanity, read from the record book.

prose · Lora 400 · 17/28

The North Atlantic is the best-documented stretch of water on Earth, and for a hundred years its passenger record was the most public benchmark in engineering. Body text carries a standard link, a highlighter swipe, and inline code.

label · Plex Mono 600 · 12/16 · +14% · caps

Fig. 3 — Installed Power Against Record Speed

byline · Lora 400 · 14/20 · +8% · caps

By J. P. Bonner · Monday, September 28, 2026

Vertical rhythm: 4px baseline grid; prose baseline 28px. Paragraph spacing, heading margins, and figure margins are whole baselines (see docs/guidelines.md §2.3).

03 · Emphasis — the offset plate

tokens: shadow.plate* · color.emphasis.*

One loud voice. A flat ochre (or ink) plate offset down-right, like a misregistered spot color. Maximum one plated element per view; below it, the quiet ladder: size → case → rule → tint.

shadow.plate

A pane on the ochre plate — the standard strong emphasis.

inverse + plate

An ink pane on the plate: the loudest legal combination.

Inline: the assay returned 34.51 knots average, a record.

04 · Components

tokens: component.*

Buttonscomponent.button.*

Mono caps, 40px, square, 1.5px rule. Hover deepens ink; active presses 1px into the paper; focus draws the ochre ring.

Chips & labelscomponent.chip.*

Eyebrow label · Byline dateline · Ctrl K

Form controlscomponent.input.*
Notescolor.feedback.*
Info — the styleguide has been reprinted.
Success — entry accepted into the ledger.
Warning — sources disagree by half a knot.
Danger — this record was disallowed.
Tablecomponent.table.*
YearVesselSpeed, knPower, hpFlag
1838Great Western8.66750GB
1909Mauretania26.0676,000GB
1935Normandie29.98160,000FR
1952United States34.51240,000US

05 · Figures

tokens: color.chart.* · Observable Plot

Fig. S1Line on graph-paper grid; single series uses chart.ink.
Fig. S2Bars, hairline-stroked in ink, categorical ramp chart.1–6 in order.

06 · Graph — labelled marks

tokens: component.graph.* · .fc-graph*

A node-link plate: points, not boxes. Five channels, each redundant with something other than hue — series (fill), texture (pattern), size (radius), shape (silhouette), proximity (outer ring colour + weight + dash). Drag the paper to pan, drag a mark to move it, wheel or ± to zoom, 0 to reset — or use the buttons below the plate. With a mark focused, Enter or Space selects it and the arrow keys move it (Shift for larger steps).

Fig. S3Graph plate on graph-paper grid; labels are mono apparatus with a paper knockout, never boxed.
Pan
Move selected

Graph data as tables (marks and links)

07 · Token taxonomy

W3C DTCG · Curtis levels

Three tiers; each references only the tier below. The chain for a primary button's ground:

component

component.button.primary.background
→

semantic

color.action.primary
→

primitive

color.spruce.700
→

value

#26453F

Full taxonomy in docs/tokens.md; source of truth tokens/foolscap.tokens.json; emitted artifacts dist/foolscap.vars.css (custom properties, light + blueprint) and dist/foolscap.theme.css (Tailwind v4 @theme).