The previous design · 10 June to 5 September 2026
The Blueprint, kept whole
Warm cream paper, ruled with a fine green grid, and one green that only ever meant something.
Satoshi · Geist · JetBrains Mono · a 4px pitch
Hamilton, Scotland · craighawkes.dev/previously
psst: this is the only page still drawn like this
What it was
Warm cream paper, and green the only colour allowed to pop
From the tenth of June to the fifth of September this site was drawn on a cream you could almost feel the tooth of, with a fine green drafting grid ruled behind every word and a single vivid green that was only ever allowed to mean something.
It was called the Blueprint, in the tokens file at least, and the header of that file described what it was trying to be in a handful of words I still like very much: warm cream paper, precise, restrained, and green the only colour that pops. Satoshi at its heaviest weights carried the headlines, Geist carried the reading, JetBrains Mono carried every label and every number, and Caveat turned up now and then in the margins, in handwriting, whenever the site wanted to lean over and tell you something quietly.
Very little of it was left to taste, and a surprising amount of it was the result of a gate saying no. The green went through more drafts than anything else on the page, which seems fair looking back, because it was being asked to do two things that pull in opposite directions at once: be bright enough to be the one thing your eye went looking for, and be dark enough, wherever it carried words, that nobody had to squint to read them.
- --bgoklch(0.965 0.008 75)
The paper. Warm rather than white, and most of the reason the page felt like a sheet you could pick up rather than a screen you were looking into.
- --textoklch(0.18 0.015 55)
The ink. A soft near-black with a little warmth left in it, so the cream never looked cold sitting beside it.
- --accentoklch(0.61 0.23 145)
The green itself, at a lightness of 0.61 rather than 0.62. At 0.62 it measured 2.93:1 against the paper, a whisker under the 3:1 a rule or a dot needs to be seen, so it came down a hundredth and stayed there.
- --accent-strongoklch(0.39 0.23 145)
The green that carried words. 0.52 measured 4.76:1, 0.42 looked right until it was measured on the card it actually sat on and came out at 6.80:1, and 0.39 reached 7.69:1.
Hover went deeper, never brighter.
The hover on a green button sat at 0.36, below the resting green. It had been caught twice going the other way, at 0.55 and then 0.51, and both times the button passed while it sat still and failed the moment a pointer landed on it.
--accent-hover in src/styles/tokens.css
A 4px pitch, chosen by measuring rather than by habit.
8px was tried first. Body text at sixteen pixels wanted 27.2px of leading, the next 8px row up was 32, and every reading column on the site would have gained eighteen per cent more air between its lines just to please the grid. At 4px the same line landed on 28.
--pitch in src/styles/tokens.css
Labels whose letter-spacing eased with the width of the screen.
At a fixed 0.05em a long uppercase label spent a third of a narrow column on the gaps between its letters, and it stacked one of them five lines deep on a phone. The tracking eased instead, from about 0.02em on a small screen to the full 0.05em from roughly 1440px up.
--tracking-label in src/styles/tokens.css
How it was drawn
Three months of small corrections, each one written down
It went live on the tenth of June and it never quite stopped being redrawn after that, a value here and a rule there, and because every change went in with a note saying why, the whole life of it can still be read back in order, one entry at a time.
10 June
It goes live
The design ships with System Mode and a live theatre for the case study, and a full quality pass behind the pair of them.
7aab887
13 June
The proof comes out from behind a click
The accordion on the homepage goes, so the evidence for each role sits on the page where you can read it instead of waiting to be opened.
2bf0a1f
15 June
System Mode turns bright
It had begun life as a dark terminal, green on black. It became the Blueprint instead: the same cream paper, with the drafting grid turned up and tinted green.
c4b9d18
27 June
A louder idea, kept to one side
A bright, brash alternative is built at its own address and kept out of search, and the spec sheet language from System Mode starts folding back into the everyday site.
d57338a
6 August
Two things taken away
The cursor reticle goes, and so does Instrument Serif, which had been loaded on every page to draw one row of the design system explorer.
921d53f
7 August
The palette in OKLCH
Every colour moves to OKLCH, and the move turns up a handful of things that had been quietly wrong, which are fixed in the same change.
fa58bf7
16 August
A 4px baseline grid
The vertical rhythm goes onto a 4px pitch, the day after Quoin is built to measure whether a page really sits on one.
8303864
17 August
Cream to the paper edge
The cream had been stopping short of the edges of the page. It takes two commits in one day to make it reach them properly.
da6cf1c
24 August
Three minutes of main thread
The gradient behind the name turns out to be costing around three minutes of main-thread time on the phone Lighthouse tests against.
d7a652b
5 September
Set down
The newer design arrives one surface at a time, and this one is folded up and kept.
e612c17
System Mode
Press Ctrl and full stop, and the wiring shows through the paper
The Blueprint had a second layer you could switch on, and it was the part of the whole design I was fondest of, because it treated the site as a drawing you were allowed to measure rather than a picture you were meant to stand back from.
Holding Ctrl and pressing the full stop, or adding ?system=true to the address, turned the drafting grid up into a heavier green lattice with a strong line every four squares, and the whole thing breathed very slowly while you looked at it. A thin ribbon arrived across the top of the page reading out the width and height of the window as you resized it, and it came with a proper exit button, because a mode you can only leave with a keyboard shortcut is a mode that quietly traps anybody holding a phone.
Dimension lines appeared around my name in the hero, measuring it in real pixels with a small tick at each end, crop marks settled into the corners of the canvas, and notes in handwriting turned up beside the things they explained. There was an inspector you could drag anywhere on the screen, dock into a corner, resize from its free edge, and use to swap the typeface on whatever you had selected, just to see how the page would have looked in something else.
What it cost
One stylesheet, three copies of every page, and a shader nobody asked for.
The old site was built three times over. There was a mobile tree, a tablet tree and a desktop tree, and the browser picked between them after the page had already arrived.
That choice was made in JavaScript, which meant the server had no idea which one you wanted. It sent the compact one to everybody, on every device, every time. Your laptop downloaded the phone layout, hydrated it, threw it away, and built the desktop one from scratch in front of you.
It left the wreckage in the page. Thirty-eight elements ended up sharing an id with another element, including the one the skip link points at, and seven streaming placeholders were parked on the body holding a copy of a page nobody would ever see.
Where that came from.
styles.css was 11,535 lines. The three trees lived in portfolio-v2/mobile, /tablet and /desktop, chosen by useDeviceClass, which returns compact on the server because a server has no viewport. Confirmed by fetching the homepage HTML: it contained m-hero and mobile-footer and no hero-blueprint at all.
src/hooks/useDeviceClass.ts
Three of everything, and the wrong one shipped to everybody.
The worst thing on it
162 secondsMain-thread time charged to one decorative background
A wash of green you would struggle to describe from memory
That is how much main-thread time one decorative background was charged with, on the phone Lighthouse tests against. Not milliseconds.
It was a WebGL mesh gradient sitting behind my own name at thirty-five per cent opacity, running an animation loop that never stopped. 263 kilobytes of shader code for a wash you would struggle to describe from memory after looking straight at it.
There was a check in front of it that was supposed to skip it on weaker hardware. It wanted four cores and four gigabytes, and the phone Lighthouse emulates has eight and four, so it ran on exactly the device it existed to protect.
What replaced it, and what that did.
@paper-design/shaders-react, loaded on all three shells. Total blocking time was 30,700ms in the run that started this. Replacing it with the same five colours as CSS radial gradients took that to 130ms and the score from 55 to 91 on its own. The wash behind the name at the top of this page is those gradients, and it does not move.
@paper-design/shaders-react
What changed, measured
Fifty-five to ninety-one, and none of it was a redesign.
Every one of these came from the old design, before a single line of the new one existed. Worth saying plainly, because it would be easy to let the new look take credit for it.
Lighthouse, mobile, against production. 4 September 2026.
- 91was 55Performance, mobile
- 130mswas 30,700msTotal blocking time
- 1.5swas 5.0sSpeed index
- 100was 100Accessibility
How it was measured.
Same tool, same throttling, same page. Lighthouse 13.4.1, mobile, against production, 4 September 2026. Accessibility did not move because it was already there, and holding it at 100 through the work was the constraint rather than the achievement.
Lighthouse 13.4.1, mobile, against production
The look is the last thing that changed, not the first.
Why it was set down
It was retired for its structure, and never for its looks
Keeping the old design as a switch would have been a nice trick and a bad answer, because the argument this site makes is that you hold yourself to a line rather than offering people a choice of looks. So it isn't an option you can turn on. It's the exhibit, and this page is the frame around it.
The redesign wasn't a repaint. Almost everything that was wrong with this one was structural, the three copies of every page and the shader and a stylesheet nobody could hold in their head, and the visual language changing was the smallest part of what happened. The numbers above are the part that can be measured, which is the only part I think is worth putting on a page.
There are 43 raw colour values left in the codebase that bypass the theme, and a ratchet that only ever lets that number go down. The newer design was handed over with a table of nineteen tokens and a note saying four grounds and one accent is the whole palette, and then used sixty-three distinct colours across its nine drawings, so neither design gets to be smug about colour.
Fifteen of those sixty-three were already a token and thirty-six were drift, within a shade of one and doing its job. The rest were real roles nothing had named. They're named now, and 56 pairings are checked on every run.
So this is the one place the Blueprint is still drawn, top to bottom, the cream and the grid and the green and the handwriting in the margins, at full strength and on purpose. Deleting it would have been tidier, it would have proved nothing, and I was far too fond of it to pretend it never happened.
A design that argues against colour literals doesn't get to arrive with sixty-three of them.