A Tour of Rosebud, This Site's Theme
A look at the hand-rolled Hugo theme behind this site — palette, type, and the cozy little components that make it up.
This whole site runs on a small hand-rolled Hugo theme I’ve been calling Rosebud — warm pastels, rounded corners, a little bit of pixel-plant whimsy. I have a theory that warm, cozy working environments function as an accessibility improvement, and truly enhance my work and creativity. As with most projects here so far, this was AI-assisted, so I will let Claude explain:
The palette
Rosebud sits in Catppuccin Latte-adjacent territory — warm, paper-toned surfaces with soft accent colors layered on top. Everything in the site (links, tags, pills, chips, buttons) pulls from this same set of named tokens, so nothing ever clashes by accident.
--bg, --rose, --mauve, and so on — referenced by name throughout the stylesheet instead of hardcoded hex values.The first five are surfaces and overlay tones — the “paper” the rest of the site sits on. The next three are text colors, each a step lighter for de-emphasis (text → subtext1 → subtext0). Everything after that is an accent: ten soft, desaturated colors that get reused as link colors, tag backgrounds, pill fills, and chip highlights, so the same handful of hues echo across every page.
--accent, --link, and friends are just semantic aliases pointing back at specific entries in that list — --accent is --mauve, --link is --teal. That indirection means I can re-theme the whole site by changing a handful of token values rather than hunting through selectors.
Type
Two typefaces, used consistently:
- Pacifico (
--font-display) — the cursive script for headings, figure captions, and anything that wants a handwritten, cozy feel - Nunito (
--font-body) — a rounded sans-serif for body copy, tables, and UI chrome
Both are pulled from Google Fonts in a single @import at the top of the stylesheet, and nothing else gets near the page.
The little components
Beyond color and type, Rosebud is really a kit of small reusable pieces — most of which you’ve probably already scrolled past on this very site. Rather than just naming them, here’s each one live.
cute-table-wrap
The rounded, dashed-border frame around the network log table in Don’t Let FaceTime Become Literal, complete with little chip “tabs” up top:
| Time | Device | Status |
|---|---|---|
| 11:40 AM | 📱 Phone | ↗ Outbound |
| 11:39 AM | 💻 Laptop | ↗ Outbound |
cute-pill and cute-chip
Small pastel badges for inline status markers — an outbound flow, an “on” indicator, an “AI-assisted” tag:
↗ Outbound 🌿 On ✨ AI-assisted Default
cute-diagram-wrap
The same rounded card treatment, but for hand-drawn SVG diagrams instead of tables — like the peer-to-peer traffic diagram in the FaceTime post. Here’s a small one made just for this demo:
profile-link-*
The colorful button row on the homepage, one variant per accent color:
Pixel plant sprites
Tiny box-shadow pixel art, no images involved, arranged in a .plant-bar to decorate section breaks:
left to right: .plant-fern, .plant-flower, .plant-mushroom, .plant-succulent
The pattern across all of them is the same: a surface0 background, a surface1 border, generous border-radius, and an accent color doing exactly one job. Nothing fights for attention, which is the whole point — Rosebud is meant to feel like a quiet room you’d actually want to sit in and read.
Stay cozy. 🌷