Jersey 15
Display: page titles, section titles, the name on the footer, the big lines.
- By
- The Soft Type Project
- License
- SIL Open Font License 1.1
Colophon
// how this site is made
Type, design, colour, bitmaps, motion, pixel residents and the tools behind them. Everything here is a fact about this build.
§01
Type
// type
Three open-licensed faces, self-hosted, each set in its own sample. The social cards are drawn from bitmaps of a fourth, Departure Mono (SIL OFL 1.1).
JetBrains Mono
The system voice: status bar, navigation, labels, keycaps, buttons, tables, captions, code.
- By
- JetBrains
- License
- SIL Open Font License 1.1
Geist
Reading: card and article titles, ledes and long-form body text.
- By
- Vercel
- License
- SIL Open Font License 1.1
- Source
- vercel.com/font
Subset woff2 files, about 58 KB in total, all three preloaded.
§02
Design
// design
Three explorations came first. Martin chose a combination of them, direction D.
Direction A: Lab Notebook
Window frames with a pinstriped title bar and a hard shadow, the threshold ruler, and the plates. I kept all three.
Direction B: Workstation TUI
The layout, the status bar, the section heads and the fonts: Jersey 15, JetBrains Mono and Geist. This became the base.
Direction C: A Minitel / videotex direction
Keycap buttons and cards with an ink header strip. I kept the buttons and the cards.
Direction D: The combination Martin chose
B for layout and fonts, A for frames and the ruler, C for buttons and cards, plus a tricolore bar on the photo window.
Each exploration was drawn on a canvas before any code. No file names in the interface, and no tool counts.
§03
Colour
// colour
Paper, ink and one red. No gradients: tone comes from dither and hard-stop stripes.
Paper
#F4F1EA
The ground everywhere. Warm paper, less glare than white.
Ink on paper 16.7:1
Ink
#111111
Text, rules, frames and the inverted bands.
Paper on ink 16.7:1
Signal
#CC1F1A
Red on paper. Rare: about once per view.
On paper 4.93:1
Signal on ink
#FF4D3D
The red for ink grounds only. No single red passes on both grounds.
On ink 5.74:1
Captions use two softer inks, #3A3732 (10.5:1) and #55504A (7.1:1). Body text stays at 4.5:1 or better. Blue appears only in the tricolore bar of the photo window, and in one small hidden place.
§04
Dither
// bitmaps
Generated pictures are 1-bit: ink on paper, nothing in between.
Bayer uses an ordered matrix and leaves a regular texture. Atkinson diffuses part of each pixel’s error, so highlights stay clean. Floyd–Steinberg diffuses all of it for smoother tone. The engine is a small TypeScript module in this repository.
Covers are generated at build, one per article, from a set of procedural scenes. They are deterministic: the same input gives the same bytes, about 1.5 KB each. They are served as plain PNGs, never re-encoded, and text never sits on a dithered fill. The photo on the home and About pages is the original colour picture, resized and not dithered; the portraits below are kept as specimens.
§05
Motion
// motion
Stepped, with one smooth exception.
Stepped animation. Typed text, blinking cursors, the boot dissolve and the sprite walks all advance in steps(), never eased.
One smooth hover press. Cards and buttons sit on a hard shadow; under the pointer they slide into it in 140 ms and slide back out. It is the only smooth motion on the site, and it was asked for.
Every animation has a reduced-motion branch, and the footer motion: on/off switch turns them all off. With motion off the press still happens, instantly.
§06
Boot and residents
// residents
A CRT start-up, then a small cast of pixel figures.
The boot is a 1.5 second CRT power-on self-test that loads the stack as drivers, then dissolves in eight Bayer steps. It plays once per session, can be skipped, never runs under reduced motion, and is CSS only.
The residents are original pixel art drawn in code, 24 × 32 pixels a frame, shown here at 2×. They walk the footer floor, at most three on screen and one on mobile. A click or Enter opens a fact bubble.
Martin
The author, with a laptop.
Marianne
Inspired by Marianne, not the official logo: red Phrygian cap, marinière.
Minitel
A walking Minitel, with a blank screen.
Syrenka
The mermaid of Warsaw.
Coq
The French rooster.
§07
Built with
// build
Next.js on Vercel, and a team of Claude agents.
Next.js on Vercel, statically generated. Every page is rendered at build time. It is TypeScript with CSS Modules over a frozen token set, and client JavaScript only where interaction needs it, such as the residents and the toggles. Build v2026.10.
Built with a team of Claude agents orchestrated in waves. The orchestrator wrote the contracts first, then agents worked in parallel on separate worktrees with one owner per file. The roster below lists the waves; the repository is not public, so there is no link.
| Wave | Who | What they did |
|---|---|---|
| 0 · Foundations | Orchestrator | Roster, contracts, scaffold and the design canvas. |
| 1 · Research | 6 research agents | Library inventory, profile facts, design references, Hermes Agent and Omarchy, stack names, open fonts. |
| 2 · Direction | 3 design explorers | Lab Notebook, Workstation TUI and a Minitel/videotex direction. Martin chose a combination of the three: direction D. |
| 3 · Build | About 16 builders in parallel | Content, UI, effects (dither, boot, sprites, residents, social cards) and SEO. Every file has exactly one owner. |
| 4 · Verify | QA runners and independent reviewers | Browser checks, accessibility audits and review, then a fix wave. |
| 5 · Direction D | Orchestrator, then the builders again | The orchestrator froze the direction D contracts (window, card, button, tokens, fonts), then the builders rebuilt every page on them. |
§08
Keys and switches
// keys
Single-key shortcuts, and two switches to turn things off.
| Key | Action |
|---|---|
| m | Go to Method |
| r | Go to Research |
| g | Go to Glossary |
| a | Go to About |
| ? | Show the keyboard help |
| Esc | Close a bubble or the help |
The footer status line has two toggles. motion: on/off stops every animation, on top of honouring your system’s reduced-motion setting. shortcuts: on/off disables the single-key shortcuts above; Esc keeps working either way.
§09
For machines
// machines
Plain files, no scraping needed.
- /llms.txtA short index of the site for language models (llmstxt.org layout).
- /llms-full.txtThe same pages as one plain-markdown document.
- /rss.xmlNew research notes and method guides.
- /sitemap.xmlEvery URL with its last-modified date.
§10
Analytics
// privacy
This site uses Vercel Web Analytics and Speed Insights to count page views and measure performance. They use no cookies and collect no personal data.
§11
Trademarks
// notes
Tool and company names on this site are trademarks of their owners and are used only to describe the tools I work with; no endorsement is implied.