The Soft Machine
I have rebuilt this site three times. The first two versions are gone, and I want to write down why, because both of them failed in ways that felt like progress at the time.
The thing running now is called The Soft Machine. It is a set of eight rules, about two hundred lines of CSS, and one long argument with myself about ornament.
What went in the bin
The first system was a studio site. Blue accent on bone, three typefaces, a lot of cards. It was competent and it was anonymous — the kind of thing that looks like a template because every decision in it was the decision everyone else had already made. Nothing was wrong with it. That was the problem.
The second was more interesting and worse. I built a personal operating system: designation bands across the top of every page, serial numbers, registration marks in the corners, barcodes, film grain, four fixed instruments pinned to the edges of the viewport. Eight pages of it. It looked like a prop from a film about a machine far more complicated than the one it was actually attached to.
That is the useful failure. The furniture was making promises the content could not keep. A serial number implies a catalogue. A registration mark implies something being printed. Corner instruments imply readings worth taking. I had none of that — I had a portfolio and a reading list, dressed as a mainframe.
Ornament is not a style problem. It is a truth problem.
So the rule that came out of it is the strictest one I have:
This is why the mode switch says LIGHT and DARK instead of being an unlabelled square. It is also why 仕事 on a navigation row is fine where a barcode is not — 仕事 is a word. It says “work”. A barcode says “I would like to seem like a machine”.
Tone, not outline
The first real rule of the new system: a shape is separated from the page by tone, never by an outline.
A panel is a slightly lighter field. A raised panel is lighter still. A control is a filled capsule. Nothing has a border. When you need division, you change the surface rather than drawing round the shape.
The reason is that a border describes an element’s own edges back to you, which is information you already had — you can see where it ends. Four borders meeting at corners is a box, and a page of boxes is a form. Nobody has ever felt warmly about a form.
The version of this I like best is the spec table. A table wants rules; the system had none. So the rows sit on raised fields with two pixels of page showing between them, and the container clips the corners so the stack reads as one object. The division is the canvas itself, not a line drawn on it.
There is exactly one colour in the whole thing — a single orange-red taken off a watch dial — and it is allowed to mark one thing: audio that is genuinely playing, right now. If it ever appears twice on a screen it has stopped meaning anything.
Ma, and the courage to leave a hole
間 — ma — is usually translated as negative space, which makes it sound like the stuff left over. It is not left over. It is the material.
The practical version: emptiness is never centred padding. Weight sits against one edge and the void opens opposite it. A composition that is balanced on both sides has not made a decision.
The place this bit hardest was the work page. Each record has a name, a picture, a paragraph and a link. Packed to the top of its column, that is a list. Push the link to the floor of the column and leave the whole height of the picture open between them, and the same four elements become a page.
Same content. Same order. The gap is doing the work.
Mono no aware
物の哀れ — a gentle awareness that things pass.
In interface terms this is mostly about honesty. Things fade rather than arrive. Nothing pulses, nothing blinks, nothing demands. And a readout is allowed to admit that the moment it describes is over.
The music indicator on this site says how long ago a song finished. It does not pretend the song is still playing, and it does not animate to cover the gap. It is a small thing, but it is the difference between an interface that reports and an interface that performs.
Three faces, three jobs
Geist Sans writes — prose, description, any title that is a sentence. Geist Mono reports — labels, readouts, counts, timestamps. WDXL Lubrifont JP N declares — the wordmark, the statement, the numerals, the designations.
The display face is never given a sentence. A project called VESPER takes it; an essay called On the Tenderness of Design does not.
That third face used to be a pixel font, and swapping it was the most consequential change I made. A pixel face cannot set kanji at all — so every kana on the site was handed off to whatever gothic the operating system supplied, and arrived lighter and narrower than the Latin sitting next to it. The bilingual labelling read like a fallback rather than a decision.
One family that holds both scripts fixes that in a single line of CSS. 仕事 now lands at the same weight as the wordmark, which is what lets a single enormous kana work as a mark rather than as a caption in a foreign language.
Three layers, and they are not close
Every screen gets exactly three levels of importance. A statement, the support around it, and the reporting layer.
The mistake I made for years is putting everything in the middle one. Evenly-sized elements at even spacing read as a wireframe — technically correct and completely dead. The distance between the loudest thing and the quietest thing is the hierarchy, so the statement wants to be almost embarrassingly large and the labels almost too small.
The ratio on the front page is about nine to one. It felt wrong while I was building it and correct the moment I stopped looking at the two things separately.
The monotony this produces — same corners, same tones, three faces, one line weight — is a budget. It buys exactly one expressive moment per screen. On the cover it is the disc, the only circle among rectangles and the only thing in colour. Two breaks is not twice as good; it is noise, and it spends the restraint that made the first one land.
Letting the line back in
Here is where I changed my mind.
The original first rule said: no frames, no hairlines, no rules. Absolute. And for a year that was right — it forced me to solve division with tone and space, which is a much better habit than reaching for a border.
Then I spent a while with technical manuals and record sleeves — the Prophet-73 operator’s manual, Detroit Underground’s covers — and the thing I kept wanting was the drawn line. A rule under a name. A rule between two channels. A hatched field standing in for the diagram a manual would print there.
So I loosened it, but only after working out what the prohibition had actually been protecting:
A line that divides is in. A line that closes is out.
The test is whether the line has an end you can point at. A rule under the machine’s name has two ends and divides two named things. An outline traced round a card has no ends — it just describes the card. The first is drawing; the second is packaging.
That distinction let in the head strip, the ruled specification table, the section heads with a rule running out to the column edge, and the diagonal hatch. It did not let in a single serial number. The prohibition that mattered was always the box, not the line.
What it is actually for
The name is stolen from Burroughs, but I mean it more literally than he did: a machine you would not mind touching.
Interfaces I like behave like instruments. They have a small number of controls, the controls do what they look like they do, and they tell you the truth about their own state. What they do not do is perform competence — no loading theatre, no confidence where there is none, no motion that exists to prove the thing is alive.
Softness is not the opposite of that. Rounded corners, warm paper instead of white, tone instead of edges — those are what stop precision from turning cold. Japanese restraint over cyberpunk bones. The machine is exact. It is just not shouting about it.
The whole thing is written up as a portable document, if you want the tokens rather than the reasoning.
Footnotes
- Designing Design — Kenya Hara. Where I got ma as a material rather than an absence.
- Emil Kowalski’s writing on interface motion, which is where every duration and easing curve in this system comes from.
- The Prophet-73 manual and Detroit Underground’s sleeve work, which are why the line came back.