Colophon · How this site is built
The site is the work sample.
Before you open a case study, the site has already made its first argument. This page is handwritten HTML — no framework, no page builder, no template bought and reskinned. Every rule below is a decision, and every decision is legible in the source.
Three families, one job each. Instrument Serif carries display and statements. Radio Canada carries prose and the wordmark. IBM Plex Mono carries labels, data, and captions — the machine-read voice.
The serif has one hard production rule: it never renders below 24px. 22px is the arithmetic edge; 24px is the production floor with safety margin. Its thin strokes are about a fifteenth of cap height, so at 16px a hairline falls to roughly three-quarters of a device pixel and the rasteriser greys it into mush — on a 1× display, retina cannot be assumed. Where a viewport can't afford 24px, titles swap to Radio Canada 700 rather than shrink the serif into its failure zone.
The 24px floor 31px
Colour is bound to a legend, not decoration. Paper is the airframe; ink is structure. Blue marks reading and interaction emphasis. Orange marks the operator's intervention — live, working, armed, or attention required. Red marks unresolved, invalid, or failed states; sage marks resolved or passed states.
Static HTML, one shared stylesheet, page-local CSS, and a small shared behaviour file. No framework, bundler, or build step. Web fonts, icon CSS, and analytics load at runtime. The whole site is a handful of documents you could read end to end. It is versioned on GitHub and deploys to Vercel on every push — the commit is the release.
Zero corner radius, hairline borders, a fixed instrument grid. The chrome carries the heavy responsive work so the prose never has to; the frame yields to the content, not the reverse.
Shared visible focus treatment, screen-reader destination text, reduced-motion handling, and the selected checks demonstrated in the Accessibility Lab are built into the work. Accessibility is treated as part of the craft, not a compliance pass bolted on at the end.
The design system is called Eishiki — 意識, Japanese for consciousness or awareness. The name is inherited from a Flash portfolio built in 2002, carried forward as a reminder that the instinct is old and the discipline is the same.