Colophon.
Studios that publish design principles should be willing to show their own working. This page describes how the site is built, what it costs to load, and which of our own rules it follows.
- Framework
- Next.js
- Typefaces
- 3
- Client JS
- 4 components
- Standard
- WCAG 2.2 AA
- Display
- Instrument Serif — headlines, pull quotes, principle numerals
- Text
- Hanken Grotesk — body copy, navigation, interface
- Metadata
- DM Mono — labels, indices, annotations, tabular figures
- Scale
- Fluid, clamp-based, 1.25 ratio with viewport interpolation
- Measure
- Capped at 68ch for continuous prose
- Ground
- #F4F1E8 — a warm bone, not white
- Ink
- #16150F — a warm near-black, not #000
- Correction
- #C0300F — the accent, reserved for one job per view
- Polarity
- Both themes defined by role, not generated by inversion
- Contrast
- 4.5:1 minimum on body text, verified per pair
- Framework
- Next.js App Router, React Server Components by default
- Styling
- Tailwind CSS v4 with a hand-written token layer
- Content
- Typed modules for the canon and tools; the blog comes from the Blogboard API
- Motion
- CSS transitions with an IntersectionObserver, no animation library
- Client JS
- Four interactive components. Everything else is server-rendered.
- Accessibility
- WCAG 2.2 AA — keyboard-complete, screen-reader tested
- Motion
- prefers-reduced-motion honoured with reduced variants, not removal
- Images
- Photography and printed specimens, framed on the studio grid
- Licence
- Canon and charter under CC BY 4.0
Instrument Serif — display
Regular / Italic
Every design decision has an origin.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Hanken Grotesk — text
Variable 100–900
Sixty to seventy-five characters is the working range for continuous prose. Below forty-five the eye tracks back too often and rhythm collapses; above eighty it loses the return.
DM Mono — metadata
Light / Regular / Medium
MEASURE BEFORE SCALE — CC BY 4.0 — 2026
0123456789 !?@#$%&*()[]<>/\|+-=~
Paper
#F4F1E8
Ground
Ink
#16150F
Text
Correction
#C0300F
Accent
Blueprint
#33566B
Structure
Neither the ground nor the ink is pure — #FFF and #000 are harsh together and flatten depth. Both carry a small amount of warmth so the surface reads as paper rather than as a screen. See Neutral first.
Built to the same standard we publish.
If you find somewhere this site breaks one of its own principles, tell us. That correction is worth more to us than the compliment.