Most portfolio sites are decorated. This one is constructed. The whole site runs on a single 40-pixel module: every column, gap and block of type is a whole number of those units. The idea is borrowed from Müller-Brockmann and Gerstner, who worked out that a grid isn't a limit on design but the thing that makes it repeatable. What's different here is that the grid is machine-readable — so an AI agent can build inside it without me redrawing every screen.
I didn't want gloss. Rendered graphics and stock imagery signal effort without carrying information — decoration standing in for thinking. What I wanted was a whiteboard crossed with an architect's working drawing: Swiss structure underneath, the marks of someone solving a problem on top. That's why emphasis is a highlighter stroke rather than bold type, and why a link draws a scribbled overline on hover. Those are working gestures, not finished ones — this is what design looks like while the problem is still being solved. Twenty years of watching software get built, and now built with AI, has only sharpened the point: structure, principles and context matter more than ever.
Colour
Four working tones and two accents. Nothing is a one-off — every hairline and rule is the ink at reduced opacity.
Ink
#10151F
All type and rules. A blue-black, not pure black.
Paper
#F7F7F5
Page background. Warm, so it reads as paper.
Mist
#E8EAEE
Cards and panels that sit back from the page.
Volt
#BFFF00
The highlighter. Used sparingly, or it stops meaning anything.
Signal Red
#E62D2D
One job only: the scribbled overline drawn under a link on hover.
The rules
Five. Short enough to hold in your head, which is the only kind that get followed.
01
Every width, height and offset is a whole number of 40px modules. Nothing lands between lines.
02
Columns come from 1, 2, 3, 4 or 6. No other division exists here.
03
Fields bleed off one edge and stop on a column line. Never boxed in on all four sides.
04
Running text stays between 45 and 75 characters a line, with 66 as the target.
05
Type sits on a 24px baseline, re-syncing with the module every 120px.
The system is a file, not a PDF
All of the above lives in one file — the tokens with their variable IDs, the module, the column canon, the measure, and a log of the places where this site currently breaks its own rules. It's the context an AI agent is handed before it touches anything here, so constraints arrive as constraints rather than preferences. That's why the tenth screen matches the first. The drift log is the honest half: a system that only records its intentions is marketing.
Read the file →Known trade-offs
A system that only documents its intentions is marketing. These are the places where something else won, and why.
Readability beat arithmetic
The 24px baseline doesn't divide the 40px module. A 20px baseline would, but at 17px body copy the lines collide. The cost is a three-module sync instead of one.
The measure runs long
Body text sits near 75 characters — the top of the range rather than the 66 optimum. Narrowing the column would fix it and shorten the page.
Cards tighten before the grid breaks
In three columns, card text drops to about 34 characters on narrower screens — under the 45 minimum. The grid should fall to two columns sooner.
Nav and footer predate the system
Both were built before the module existed and are not yet aligned to it.
Tell me what you're building. I'll tell you if I can help.
Email me →