§ COLOPHON

How this site
was made.

A short note on the surface, the type, the build, and the question of AI. None of these decisions are arbitrary; if any of them age badly, this page is where I'll explain why.


§ 1.0 · PAPER

The paper changed. The cyanotype lines stayed.

A note on a reversal.

The paper.

The page sits on a near-white with a very subtle cool tint, close to #F7F8F9. It reads as architectural drafting paper. The cool tint is deliberate: it coordinates with the cyanotype-blue lines that do the structural work everywhere else on the site.

Earlier drafts used FT salmon (#FFF1E0), the bisque stock the Financial Times has printed on since 1893. That paper was an editorial signal, and a good one. Once the design committed to Field Manual plus service-blueprint vocabulary, the salmon stopped doing the work it was hired to do. The near-white lets cyanotype lines and typographic structure carry the identity instead.

Dark mode inverts to near-black with the same subtle cool tint (#0E1115). The cyanotype lines brighten to maintain legibility. The metaphor flips the way deep-exposure cyanotype prints do: lighter blue lines on a darker ground.


§ 2.0 · TYPE

One family, two voices. Serif for prose and headlines; mono for the system layer. The same typographic system IBM uses for its technical documentation.

IBM Plex Serif

DISPLAY + BODY · BOLD MONDAY / IBM · 2017

A slab-influenced serif designed for IBM's technical documentation. Carries the hero headline, every section head, project titles, and all prose. Reads as a spec document, not a marketing surface. Used here at three weights: Light (300) for display, Regular (400) for body, SemiBold (600) for structural emphasis.

IBM Plex Mono

SYSTEM · BOLD MONDAY / IBM · 2017

Designed alongside Plex Serif as siblings. Carries the system layer: section numbers, project metadata, dates, tags, technical annotations, anything that names structure rather than expressing voice. Used at Regular and Medium weights.


§ 3.0 · STACK

No bundler. No framework. Edit and ship.
HTML / CSS / JS
Plain. No build step. One stylesheet, one IIFE.
DESIGN SYSTEM
Tokens via CSS custom properties. Same names in Figma and code.
HOSTING
Static files at nicojan.com.
DESIGN FILE
Private. The work happens in this repo first; Figma is reference, not source of truth.

§ 4.0 · ON USING AI

I use AI. Here's what that means.

I work with Claude every day. The MCP guide on the homepage is the practical evidence of that. So is most of the instrumentation behind how I write, design, and brief clients. AI in the toolbox is not the question for me; AI in place of the work is.

Decisions on this site are mine. The accent colour and the typeface pairing and the structural choice to give every project its own layout were arguments I made to a model and kept making until they held up. The copy is mine after several passes; if a paragraph in the case studies sounds borrowed, I'd rather rewrite it than ship it.

Working with AI doesn't subtract the craft. It moves where the craft sits. The craft is now in noticing what doesn't work, naming why, and rewriting until it does. The same loop I ran in classrooms for eight years.


← BACK TO WORK