Colophon · How this site is built

The site is the work sample.

Before you open a single case study, you are already reading the strongest one. This page is hand-written 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.

01 · Type

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. Instrument Sans was removed from the system entirely.

The serif has one hard rule: it never renders below 24px. 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 the 1× Windows laptops most of this audience uses, 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.

Instrument Serifdisplay · statements
Dense systems, read at a glance.
Radio Canadaprose · wordmark
The body voice. Calm measure, generous leading — the frame is dense, the reading is quiet.
IBM Plex Monolabels · data
Case study 01 · No value returned
02 · Colour

Colour is bound to a legend, never used for decoration. Blue means one thing across the whole site — read this. It is not a hover accent and not a brand flourish. Red marks an ambiguous or null value; sage marks a resolved one. That discipline is the difference between a heads-up display and a skin.

Paper
The ground. A HUD rendered on paper, not on black.
Ink
Text and hairlines, at 0.667px.
Blue
Bound to one meaning: read this.
Data red
An ambiguous or missing value.
03 · Build

Static HTML and one hand-authored stylesheet. No build step, no bundler, no runtime dependency beyond three web fonts and an icon set. 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.

04 · Access

It passes its own audit. Every interactive control has a visible focus ring, every destination icon is paired with screen-reader text, motion respects prefers-reduced-motion, and a skip link leads the keyboard straight to the content. Accessibility is treated as part of the craft, not a compliance pass bolted on at the end.

05 · The name

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.