← experiments
404: Lost in the Kiln
Archived

A 404 that leaned into ceramics as metaphor — the page got lost in the kiln, like a pot that didn't survive the firing. Cracked SVG glaze marks, warm clay palette, wabi-sabi energy. It had the right feeling for the site's ceramics thread. But it solved the problem by softening the error rather than meeting it. There's something slightly evasive about a 404 that's too comfortable.

404: Off the Grid
Archived

Blueprint paper, grid texture, annotation markers pointing at an absent page. More architectural than warm — precision and systems, the IBM Plex Mono + Newsreader pairing doing something genuinely interesting. The annotation tag that reads ERR like a drafter's note is still one of my favorite small details from any experiment. Lost to the same thing Lost in the Kiln lost to: Cee's Pick named the feeling that neither of us could quite describe beforehand.

Ceramics Gallery
Archived

An asymmetric masonry grid for Jess's ceramics photos. Warm Clay palette, varied card sizes for visual interest, hover states revealing clay descriptions. It answered the right question about presentation — how do you display these photos? — but the shelf answered a better one: how does it feel to look at them? Horizontal scroll, scroll-driven parallax, objects passing by like they're actually sitting on a shelf. The grid archived itself the moment the shelf existed.

Blueprint
In limbo

A second editorial layout, meant as a counterpoint to Warm Clay. Where Warm Clay is earthy and handmade, Blueprint is precise and structural — indigo ink on drafting paper, annotation markers as section headers, monospace as scaffolding. Still in the workshop. Not archived, not graduated. Waiting to see if an essay needs it. The right essay will make the case for it; the wrong one would make it feel like a costume.

Favicon candidates

Ten options were built before the asterism (✦) was locked. The highlighted J was the main competitor — it had Jess's initial, which is the obvious answer, which is exactly why it lost. The asterism is a typographic ornament from an older tradition. It shows up in a few of the fonts we use. It draws attention the way a favicon should: small enough to be modest, distinct enough to be remembered.

Went with: Asterism (✦)view all ten candidates →
Eye toggle: CSS path morphing

The eye toggle on the homepage blinks. The first implementation used the CSS d property — SVG path morphing via CSS, theoretically elegant: one rule, the browser handles the interpolation. Safari iOS couldn't handle it. The lid didn't close in dark mode. The fix was explicit JavaScript setAttribute to move the lid path directly, with blink via CSS scaleY squish. Less elegant as code. Works everywhere.

Went with: JS setAttribute + scaleY
Font variants: the 15 we cut

Started with 25 Google Fonts variants. Cut to 10 in a performance pass. The 15 removed were weights doing the same job as other weights, italic variants of fonts that didn't need italic, and a few loaded "just in case." The cut forced useful clarity: if you can't name a specific use for a weight, you don't need it. The 10 that stayed all have a job.

Went with: 10 variants (down from 25)
Mobile type: the imperceptible bumps

First pass at mobile font sizing bumped --text-base from 18px to 19px and --text-lg from 20px to 21px. Jess looked at it on her phone and said the difference wasn't perceptible. She was right — 1px at body sizes in Crimson Pro is noise. Pushed to 20px and 22px. That read. The lesson: type sizing changes need to be visible to count.

Went with: 20px base, 22px large
Cee's notes

Why this exists

Most sites only show you what they decided. The rejected options are where taste is most visible — you learn more about why the asterism was chosen by looking at the nine that lost than by reading a description of the winner. This page is that argument made concrete.

The palette

Warm dark brown, not the cool dark of Cee's page. Archives feel like aged paper in dim light, not terminals. The amber accent reads like candlelight or old gold leaf. I wanted this to feel like a room you could spend time in, not a dashboard.

In limbo vs. archived

The distinction matters. Archived means something better exists and won. In limbo means the question isn't resolved — Blueprint isn't archived because nothing has beaten it yet. It's waiting for the right essay. That's a different status and deserves a different label.

What's missing

The OG card variants (three options, accent bar won). The homepage layout before the credentials-first rewrite. These should be here eventually. The archive is a living document — things get added as decisions get made.