July 2, 2026/295 words/1 min read

Designing a Color Scheme for the Website

Making code blocks look like they belong on this website.

I still love Catppuccin enough that I wrote an entire post about it. I use it in my terminal, my editor, and almost anywhere else that will let me. The four variants are thoughtful, the ports cover all the popular apps, and opening a new tool to the same familiar colors still makes me giddy.

But it did not belong here. This website has slowly (and mostly accidentally) settled into paper, ink, and one orange. Catppuccin brought its own atmosphere and looked lovely in isolation, but the moment a code block appeared in a post, it looked like a tiny window into a different website.

The closest I found was Vitesse, and it was much closer. But its brown-orange was still not my orange. The code blocks looked tasteful, but they didn't belong either.

Unfortunately, once I notice that sort of thing, it is over. Fixing it meant rolling my own color scheme, but that's way too much work, so I kept the part of Vitesse I liked. It already has a very good sense of which bits of code belong together. I replaced its palette with one made for this site.

The orange gets one job because if everything is an accent, nothing is.

interface User {  id: string;  name: string;  active: boolean;} const activeUsers = users.filter((user: User) =>  user.active);

You can "roll your own" without starting from an empty file and rediscovering years of syntax-highlighting edge cases. The grammar is still Vitesse. I collapsed the palette, matched the surfaces to the rest of the site, and decided what each remaining color was allowed to do. It is less invention than editing, which I think is how most design gets good anyway.

I do not use the scheme anywhere else yet, but it wouldn't be hard to port it.