Redesigning This Site: From Terminal Goth to Editorial Cream

This site used to look like a hacker movie prop. Now it looks like a magazine that codes. Here's the design system behind the switch — and how an AI agent shipped it in one session.

The Before Times

Until this morning, this site was pure terminal cosplay: black background, Space Mono everywhere, headings like 099 SUPPLY // QUANG_, buttons labeled READ_BLOG. I liked it. It also read like a ransom note and had the visual warmth of a BIOS screen.

Meanwhile, the marketing sites I kept admiring — Cursor's in particular — had quietly gone the other way: editorial calm. Cream paper, quiet type, one loud color used almost never. Developer tools dressed like design magazines.

So I stole the recipe. Openly. This post documents it.

The System

Color: cream, ink, and exactly one voltage

  • Canvas #f7f7f4 — warm cream, not white. The whole page floor.
  • Ink #26251e — warm near-black for display and emphasis. Not #000.
  • Orange #f54e00 — the only action color, used scarcely: the header CTA, one button in the footer band, and a single dot on my current job in the resume timeline. That's the entire orange budget.

The restraint is the design. When one color means "act here," every use of it lands.

Type: display at weight 400

The counterintuitive rule I now swear by: headlines are not bold. Display type runs at weight 400 with negative letter-spacing (the hero sits at 72px / −2.16px). Bold headlines shout; regular-weight-but-huge headlines state. It's the difference between a tech landing page and a magazine spread.

Body is Inter; every code surface — inline code, blocks, the fake IDE on the homepage — switches to JetBrains Mono. Code gets a font that means code, prose gets a font that means prose, and neither borrows the other's clothes.

Depth: hairlines only

No drop shadows anywhere on the site. Zero. Cards are white surfaces on the cream canvas with a 1px #e6e5e0 hairline. That tiny white-on-cream contrast plus a border turns out to be all the "elevation" a page needs, and everything instantly looks calmer.

Rhythm

80px between sections, 4px spacing grid, 8px radius on buttons, 12px on cards, content capped at 1200px. Boring numbers, applied everywhere, no exceptions — which is exactly what makes it feel designed instead of assembled.

The Signature Piece

The one flourish: the homepage hero holds a fake IDE window — file tree, editor pane in JetBrains Mono, and an agent timeline panel showing five pastel pills: Thinking, Grep, Read, Edit, Done. Peach, mint, blue, lavender, gold.

It's a nod to how this site actually gets built these days: I describe, an agent greps, reads, edits. The pills are scoped to that one illustration — the design rule is that pastels never leak into real UI controls. They're decoration with a strict passport.

How It Shipped

Full disclosure: an AI agent (Claude Code) did the implementation in a single session. My input was the design spec and two words of project management ("continue" and, later, "just merge and deploy").

The workflow that's become my default:

  1. Spec as prompt — a written design system (tokens, components, do's-and-don'ts) goes in. The more opinionated the spec, the less generic the output.
  2. Agent rewrites the token layer first (global.css), then every page against those tokens — home, blog index, article template, resume.
  3. Agent runs the type checks, boots the dev server, screenshots its own work, catches its own layout bugs, then builds and deploys to Cloudflare Pages.

Elapsed time from "redesign to this design" to live in production: one coffee.

What I Learned

  • A design system is compression. Eight tokens and three rules produced four consistent pages. The old site had thirty ad-hoc spacing values and looked it.
  • Cream is a cheat code. Swapping #000/#fff for #f7f7f4/#26251e upgrades any page from "default" to "considered" before you touch anything else.
  • Constraints transfer well to agents. "Orange is scarce, display is never bold, no shadows ever" are exactly the kind of falsifiable rules an AI can hold itself to across an entire codebase. Vibes don't transfer; budgets do.

The terminal aesthetic had a good run. But it turns out my blog about quiet automation reads better on paper that whispers.

← Back to blog