Colophon — how this site is built
A tour of the Signal Path design behind this site: the Copper & Carbon palette, the Canvas service-mesh hero, and the small details underneath.
I like reading the colophon on other people’s sites, so here’s mine. The design has a name, Signal Path, and the idea behind it is a page that behaves like a circuit diagram: signals routed along clean paths, nothing on screen that isn’t also doing a job.
The stack
Still static Astro, still zero JavaScript shipped by
default. Pages are plain .astro; this writing lives in MDX through typed
content collections, so a post with broken frontmatter fails the build instead
of shipping.
Color and type
Styling is Tailwind CSS v4, configured CSS-first. There’s no config file;
the tokens live in an @theme block in global.css.
The palette is called Copper & Carbon. Carbon (#0C1014) is the ground.
Copper (#DE8B52) is the one accent that means “active” or “interactive,” and
verdigris (#5FB8A3) is the second signal, reserved for “steady” status.
Dark is the canonical mode. There’s a light “datasheet” mode too, but the whole
site was designed dark-first, and the light theme reads like a printed spec
sheet.
Type does real work here. Archivo (variable) is the display face, and its width axis actually animates. IBM Plex Sans carries the body copy. JetBrains Mono is the machine voice: labels, timestamps, anything the site says in its own robotic register.
The hero
The hero is a Canvas 2D service mesh. Nodes and packets drift around, pulled toward your cursor like it has a bit of gravity. As you scroll, the mesh collapses along a line I call the Seam, which folds down into the fixed rail on the left. A scattered network becoming one clean path is the whole Signal Path idea in a single gesture.
The name
My name doesn’t just fade in, it decodes. The glyphs flicker through random characters, then settle, while Archivo’s width axis widens them into place. There’s a subtle shimmer over the top, drawn in WebGL with OGL, just enough to catch the light.
The command palette
Hit ⌘K (or Ctrl+K) for a terminal-style command palette: jump around, flip the theme, copy my email, find the easter egg. It’s the fastest way through the site if you’d rather keep your hands on the keyboard.
Moving between pages uses Astro’s View Transitions, so navigation animates instead of blinking white.
The parts you don’t see
Every animation checks prefers-reduced-motion first. If you’ve asked your OS
to calm things down, or JavaScript never runs, you still get the whole page,
finished, with nothing hidden. And the color tokens run through a build-time
contrast check: if any text-and-background pair drops below WCAG AA, the build
fails. Accessibility that only holds when someone remembers to check it isn’t
accessibility.
That’s the tour. Thanks for reading the colophon.