A field journal.

This redesign comes from Melbourne. Not literally — the bytes live wherever Vercel decides — but in feel. The city the writing comes from sets the tone of every choice in the palette.

Melbourne is not a glossy city. It's a city of wet bluestone laneways, brick warehouses in Collingwood, faded Fitzroy terraces under terracotta roofs. The dominant colour is brown, not blue. The dominant feeling is warm despite the weather — sodium streetlights, wool jumpers, paperback library covers, coffee that takes itself seriously.

The page background is warm soot, not black. The light-mode background is cream paper, not white. Both modes carry the same warmth; only the polarity flips — same room, different time of day.

The accent is clay — iron-oxide rust on a wrought-iron fence; the brick of a Fitzroy wall; the rooftops you see from Punt Road on a clear afternoon. A colour that has been around long enough to oxidise. It carries every link, every active state, every § anchor.

The spotlight is signal yellow — the slightly buttery yellow of the green-and-yellow trams that ran the city for half a century. It appears only for things that genuinely matter: a pinned essay, a code string, a single sentence asking to be read first.

Every neutral is steel-warm— brown-grey, never blue-grey. Bourke Street pavement is brown after rain. San Francisco grey is blue. We don't do San Francisco grey here.

Everything that follows — the principles, the type scale, the motion tokens — is in service of that one idea. The site should read as if it came from a city that knows what a wool jumper is for.

Five principles govern every decision in this system. When tokens conflict, the principle wins.

1. 01
   Type does the work. A strong typographic system carries the brand. The serif body is the identity.
2. 02
   The figure frame holds everything. Code, video, tweet, math, canvas — same numbered, mono-captioned frame. Sibling content reads as siblings.
3. 03
   Warm Melbourne, not SF gloss. Every neutral is brown-grey, every accent biased warm. No cool slates, no terminal greens.
4. 04
   Hook first, hero second. The article opening rewards a strong first sentence over a giant image. Hero figures are optional.
5. 05
   Dark-first, light first-class. Both modes are designed simultaneously. Same warmth across both.

Small recurring patterns that give the publication its rhythm. Always mono, always with the leading slash, almost always with one element coloured clay.

• // 13SOFTWARE · MELBOURNE

  Article kicker.The article number is in clay; tags follow in mono uppercase separated by middle dots.

• FIG. 04An artificial gravity lab

  Figure caption.Numbered per article. Source attribution sits below the caption in smaller mono.

• EQ. 02a = v² / r

  Equation label.Separate counter from figures. KaTeX block in the wide tier.

• // ARCHIVEall essays, by year

  Section label.First word after the slash is in clay; tail copy in soft text.

• A one-sentence orientation for readers who need more context before committing.

  Italic deck.Serif italic, ≤25 words. Sits under every H1.

• §Linkable heading

  Anchor mark.Every H2 and H3 carries an id. Hovering reveals a clay § to the left — a copy-link target.

Motion is sparing. Hover and focus get 150ms; theme switches and drawers get 250ms. Easing is out-expo so transitions decelerate gracefully. Anything triggered by scroll position is forbidden — no fade-ins on viewport entry.

• // motion-fast
  150ms

  Hover, focus, link colour, border tints.

• // motion-slow
  250ms

  Theme switch cross-fade, drawer open/close.

Users with prefers-reduced-motion: reduce see no transitions at all — both tokens drop to 0ms.