Colophon
Colophon
How this site is made, what it’s made of, and a button that checks it.
The page audits itself.
This runs axe-core, the same engine inside VPAT Vault’s scanner, against this page right now, then checks its images, headings, fonts and colour pairs. Every page also runs it in the test suite before it ships.
$ ready. Press “Run the checks”.
By the numbers
- Pages
- 34
- Stylesheet
- 602 lines · 11.1 KB gzipped
- Script
- 10.1 KB gzipped · optional
- Fonts
- 3 faces · 160.1 KB
- Images
- 30 files · 1539.9 KB
- Contrast
- 28 text pairs · lowest 5.37:1
Counted by the build. No framework, no tracking, no cookies. Every page reads with JavaScript off.
Type
Ink · display and interface
Familjen Grotesk
Headlines, titles, numbers and buttons. Its ink traps, notches cut into the joints of letters like k and 4, show at display sizes.
Voice · reading
Newsreader
Essays, case studies, captions and the film quotes.
Pencil · notes and specs
Red Hat Mono
Labels, specs, figure numbers and measurements. Always small, always blue.
Colour
Bristol
#FFFFFF
The ground. Pure white, so scanned drawings print straight onto it.
India ink
#0A0A0A · 19.80:1 on Bristol
Type, drawings, panel borders and buttons.
Graphite
#55585C · 7.15:1 on Bristol
Secondary text only.
Non-photo blue
#A4DDED
Construction only: grid, guides, crop marks, highlights. Never text.
Blueline
#1B62A0 · 6.36:1 on Bristol
Notes, captions, links, focus rings and callout numbers.
The site follows your system setting: Bristol by day, Ink by night. Status is always a symbol plus a word: Live, In progress, Private, Shipped.
Parts
The pieces every page is built from. Switch on Pencils in the footer to see the grid under them, with rulers and a spec for anything you point at.
Buttons and links
Availability
Title block
- Role
- Design and build
- Status
- Live, v2
- Numbers
- 20 pieces · 299 controls
Pull quote
So the checks are scripts now instead of opinions.
Rule
R-05
Nothing runs that you did not start.
Accessibility
This site aims to meet WCAG 2.2 at level AA. Every page is checked with axe-core in the test suite, every text colour pair is checked by a script at build time, and every page works with a keyboard and with JavaScript turned off.
Motion is optional. With reduced motion turned on in your system settings, drawings arrive inked, the hot takes stop rotating, and the linefield piece holds still. The take-it-apart figure on the home page is an illustration; its text description says what it shows.
If something doesn’t work for you, tell me through LinkedIn or the brief, and I’ll fix it.
Credits
Familjen Grotesk, Newsreader and Red Hat Mono are used under the SIL Open Font License and served from this site. Run the checks uses axe-core under the Mozilla Public License 2.0. The ink band runs Grain Field from linefield, which is MIT licensed. Terry drew himself, and he has a shop.
The source is on GitHub. The previous version of the site is kept on the v1-classic branch.