Colophon
How this site is made.
A colophon is the note at the back of a book describing how it was made. This is ours.
This site follows the same three ideas we bring to everything else: meaning, structure, and clarity. It seemed only right to hold the studio’s own pages to the standard we set elsewhere.
It is set in Instrument Sans, a typeface drawn for screens. We serve the font ourselves rather than leaning on whatever happens to be installed, so the page looks the same on Windows, a Mac, or a phone. Helvetica Neue stands in for the moment it takes to load. We hold to one or two sizes per page and let the spacing do the rest.
Everything sits on a grid of twelve columns. The margins are tight at the edges and looser within, a small tension borrowed from print. The horizontal rules do real work, dividing one section from the next rather than ornamenting the page.
The palette is black on a warm off-white, with a single red. The red always carries meaning, marking a link or drawing the eye to something. It never appears merely to fill space.
The pages are hand-written HTML served as static files, with a single function behind the contact form. That is the whole of it. The site loads immediately and should keep working for years with little attention.
The look owes a great deal to a particular strain of mid-century modernist design, which held that a grid and one good typeface can carry almost anything. We have tried to do it justice.
By day this site holds itself to meaning, structure, and clarity. You have switched the lights off, though, so you are reading the other colophon. This one explains the party.
The titles are set in Press Start 2P, a face built from the same square pixels the eighties drew everything with. We serve it ourselves, the way we serve the daytime typeface. The body text stays in Instrument Sans, because a full paragraph of pixel type is a punishment nobody deserves.
The backdrop is drawn live on a canvas in plain JavaScript: a field of stars twinkling on their own schedules, a striped sun that never quite finishes setting, and a magenta grid rolling toward you at a steady arcade pace. No libraries were harmed or indeed used. The web has always been able to do this sort of thing; it is simply rarely asked.
The palette trades warm paper for deep violet and lets the red run neon. The rules glow cyan. Restraint keeps office hours.
The pig in the corner is about ninety small cubes, projected, sorted, and painted one face at a time, dancing to a twelve-step beat. It has no name and no responsibilities. We are very fond of it.
Underneath, nothing has changed: hand-written HTML, one stylesheet, two small scripts, static files. The daytime pages answer to mid-century modernism. These answer to the arcade, which believed in grids too, only ones you could drive across. Flip the sun back on and the discipline returns as if nothing happened.