“Building My Theme With a SNES Buster Aesthetic”

CSS used to feel like trying to solder in the rain: technically possible, definitely unpleasant, and almost guaranteed to leave the air faintly blue. Yet somehow I blinked and found myself at the end of a weekend with a complete CSS theme, a matching Hugo theme, and a website that looks like it fell out of Mega Man X’s system menu. The weird part is that it was actually fun.

Blame the theming rabbit hole.

The first attempt that absolutely did not work

The first iteration tried to lean into EarthBound. It seemed like a good fit on paper—bright UI panels, quirky text, soft palettes. Then the real-world constraints showed up. I needed the page to show my avatar, a short bio, a block of projects, and a feed of blog entries. EarthBound’s visual language just doesn’t like being dense. Everything wants big margins, conversational pacing, and a kind of cheerful emptiness that fights against layouts with multiple competing sections.

So the first draft wasn’t unusable, but it refused to settle into anything clean.

Then the switch flipped: Mega Man X.

Mega Man X UI is grids and bevels and bold lines. You can graft a lot onto that without breaking the style. Once the idea landed, it felt like clicking the right piece in a sliding puzzle.

Working with the co-pilot

Once I had the seed of the idea, I threw vague descriptions at the AI: “weapon-GET menu but for my projects,” “something that feels like an in-universe system screen,” “faux scanlines but light enough to live under real content.” We iterated like two gremlins tinkering with a CRT.

I’d drop the rough concept, it would return a direction, I’d poke the weak spots, and we kept tightening until the front page felt like an artifact from a lost SNES dev kit. Not magic—just really fast iteration with the world’s most relentlessly patient design partner.

Then came the fun part: turning that one-off front page into an actual Hugo theme.

The front page that set the tone

If you’ve already seen the site, you know the look: the grid, the glowing borders, the fake system overlays. The little system-status readout at the top. The SYSMODE: ARCHIVE whispering to the visitor like they’ve dropped into someone’s dev terminal.

And then the section that made the whole thing sing: my “weapon blocks.”

They’re arranged the same way the X-series ability selection is arranged. Weapons as projects. Icons as letters. Energy bars as little gauges of complexity or absurdity. Each card has the same structural rhythm: icon → title → pseudo-energy bar → description. It shouldn’t work as well as it does, but the X aesthetic is so damn modular that the whole thing just fell into place.

Once that section worked visually, the rest of the page wrapped around it like it had always been meant to.

Turning prototypes into a real theme

Hugo’s templating system was surprisingly smooth. The biggest shift was thinking in terms of partials—reusable chunks that carried the theme across pages so nothing drifted. Once I had the header, the weapon cards, the profile box, and the lore feed templated, the theme basically became a tiny design system.

After the Hugo theme felt solid, I pulled everything back into a standalone CSS file and let the whole domain use it. That let me extend the aesthetic to the Fossil-SCM skin later. It’s not fully transplanted yet, but the same shapes and rules map cleanly to Fossil’s structure. It’s a matter of grafting, not reinventing.

The 404 page — because failure states deserve flair

I couldn’t make a theme like this and leave the default 404 sitting there like a wet paper bag. The error page now goes all-in on the style: STATUS: ERROR // MODE: FAILURE STATE hard-coded right in the header, a bright red bevel frame, and a critical-error banner that looks like the screen you’d get moments before Sigma deletes your save file.

One day I might even automate the mode label so different errors trigger different “system-collapse states,” but for now, the handcrafted absurdity adds charm.

Looking back at this strange little project

I expected annoyance and frustration. Instead, I ended up with a theme that feels like it has a personality: bright, playable, coherently retro without being a parody. And because the theme is built on modular, repeatable shapes, adding new pages or sections now feels like expanding a game rather than wrangling a stylesheet.

There’s still plenty to build: refining the Fossil theme, adding more customization, maybe designing a proper pixel avatar for the profile box. But this is the first time the style layer feels like an instrument instead of an obstacle.

If anything, it reminds me that sometimes the trick to finishing a project is to remove just enough friction to make it fun and in this case AI assistance greased the gears.