When you build fast, colours breed. You need a purple for a button, so you type a hex code. You need it again two screens over, so you type it again — maybe slightly different, because you're working from memory. Multiply that across a home screen, a game screen, sixteen puzzle renderers, a shop, a profile, a leaderboard, and settings, and you end up with what I had: an app that looked roughly consistent and was, under the hood, a complete free-for-all. There was even a stray fuchsia from an early experiment haunting a few corners.
None of it was broken. It just wasn't a system. And a calm, premium app lives or dies on whether it feels like one considered thing or forty improvised ones.
ONE DAY, ONE BLAST RADIUS
So I gave the look a name — Obsidian Cathedral, dark and quiet and a bit dramatic, which is the mood I wanted — and did the migration in one sitting, in deliberate phases so I could never break more than one screen at a time.
Phase 0 was the foundation: a single set of design tokens — named colours like the dark base, the text shades, the accent — that everything else would point at. Then I marched through the app one region at a time: the home screen, then the game screen and every one of the sixteen puzzle renderers, then review, library, profile, the bazaar, the leaderboard, settings. Each phase swapped that screen's hardcoded hex codes for token references. By the end of the day the last phase was pure cleanup: hunting down the final stray fuchsia and auditing every token for contrast so the whole thing actually passes accessibility standards, not just my eyeballs.
THE RULE THAT CAME OUT OF IT
The migration left behind one ironclad rule, the kind I now enforce with an automated check that fails the build: no screen is ever allowed to hardcode a colour again. Not one hex code, not one rgba. If a component needs a colour, it asks the palette for a token. If the token doesn't exist yet, you add it to the palette first — you never just type a hex and move on.
It sounds fussy. It is fussy. It's also the single best house-keeping decision I made, because of what it unlocked next.
WHY YOU GET FOUR THEMES INSTEAD OF ONE
Here's the payoff. Once every colour in the app is a token and no screen hardcodes anything, a whole theme is just a different set of token values. Change the numbers, and every screen, every renderer, every button re-paints itself — for free, all at once, with zero risk of one stubborn screen staying the old colour.
That's the entire reason GridJoy ships with four accent themes — Specter, Phantom, Revenant, and Wraith — instead of one. They aren't four reskins I maintain separately; they're four sets of token values riding on the exact same screens. Pick one and the whole app shifts mood instantly. None of that would be remotely safe to offer if a single screen still had a purple typed into it by hand.
THE BORING WORK IS THE PRODUCT
Re-theming a finished app in a day is the least glamorous thing I've ever written about. No new feature shipped. From the outside, the app looked almost identical the next morning. But the discipline underneath it — one system, no exceptions — is exactly why GridJoy can feel composed instead of cobbled together, and why I can hand you a choice of moods without fear.
Want to see the system in the wild? Every one of the eighteen puzzle types wears it, and the ghost sits at the centre of it. Go have a look — it's all the same Cathedral underneath.
— the (one-hex-code-at-a-time) dev behind GridJoy 👻