Armen Ghazaryan

Visual design: an instrument, not a magazine

The site is designed as a measuring instrument: monochrome chrome, colour only for measured data and status, one type family, and the live JVM as the first screen.

Status
Accepted 1 October 2026 · colour and motion amended by ADR 0020: a brand, a colour for each area, motion that reveals
The record
0008-visual-design-instrument-not-magazine.md

Context

The first design ("paper & signal") used a cream page, a serif display face, a vermilion accent, numbered sections with a label rail, uppercase monospace eyebrows, and rounded cards sharing one shadow. Each is a sensible default; together they are the look that generated sites converge on in 2026, and a hiring manager who has seen fifty portfolios reads it as a template rather than a person. The site's real asset is unusual: a Java service of my own that streams live telemetry, and a lab where claims from the CV can be broken by hand.

Decision

Design the site as a measuring instrument built by its owner.

  • Colour means data. The chrome is monochrome in both themes (bone and ink; graphite and chalk). Chromatic colour appears only where it carries a measurement (the categorical series palette) or a status (good / warning / critical, always with an icon and a label). There is no brand accent colour. The first series colour, blue, means "measured on a real system" wherever a number appears: the live trace and its readouts, the measured results of the cases, and the lab statistics that come from the JVM or the browser. Numbers computed by a model stay in ink.
  • One family, three voices. Instrument Sans across its width axis: condensed (75 %) for display and headings, normal width for text and controls; JetBrains Mono for numbers, code and axis ticks only, never as a decorative label face. The serif is gone. Small headings of panels and control groups stay at normal width: the condensed voice belongs to page and section headings and to the titles of records (cases, experiments, companies); below about 20 px the condensed cut looks cramped, so nothing smaller is set in it.
  • The hero is the instrument. The first screen draws the live heap of the JVM behind the page across the full width, with its readouts along the baseline. Nothing on that screen is simulated; when the API is cold or offline the trace says so.
  • Structure encodes information. Rules separate records (cases, jobs, results); sequence markers appear only on the one real sequence (the career timeline); small labels appear only as the term of a definition pair. No eyebrows, no numbered section rails, no arrows appended to link text.
  • Quiet motion. The only motion nobody asked for is the trace growing as samples arrive. Hover and open/close states answer the pointer; prefers-reduced-motion switches the rest off.

Consequences

  • Two font families instead of three; the serif files leave the bundle.
  • --accent stays as an alias of ink so the lab kit keeps working; chart tokens keep the validated series and status palettes.
  • Screenshots in both themes (pnpm shot) are part of every design change.
  • The Open Graph image and the CV typesetting follow the same tokens and are regenerated with the site.
  • Lab cards show each experiment's own picture in miniature, in the experiment's colours, drawn from data its engine computed (or from the run recorded on the JVM) by pnpm lab:thumbs; a test fails when the numbers a card quotes drift from the engine. Revised 2026-10-02 after the hand-drawn sketches read as clip art.