Coldharbour

Most editorial websites lean on photography. Remove the images and what remains is usually a stack of centred paragraphs — the design was never doing the work.

Coldharbour started as a constraint: build something that reads as art-directed using type, rule, space and timing only. No photographs, no illustration, no video.

One display face and one text face. Two colours plus paper. No image assets of any kind. Everything had to work at 320px and at 2560px, and had to read identically with animation switched off.

The last constraint turned out to be the useful one. Designing for the reduced-motion case first meant the composition had to hold still, and the motion could only add emphasis.

The page settled into long single-column passages interrupted by full-bleed typographic breaks. The interruptions do the pacing that images normally do — they mark a change of subject and give the eye somewhere to rest.

Rules and margin notes carry the secondary information. Putting dates, references and asides in the margin instead of in parentheses shortened the main text considerably.

The first version scrubbed a scroll-linked timeline across the whole page. On a trackpad it felt precise. On a phone, with momentum scrolling, it felt broken — content arrived late and left early, and reading while scrolling was unpleasant.

It was replaced with discrete reveals tied to each passage. Less impressive as a demo, better to read, and considerably less code. The scroll-linked version is the thing I would have kept if I were designing to be admired rather than read.

The margin-note pattern and the reduced-motion-first order of work are both used on this site, in the Studio division. So is the conclusion that a reveal should never animate opacity from zero — if the animation fails, the words have to still be there.