Design tokens before paint
Willie’s Remedy came to us for a full reskin, on a live, trading store, so every change ships to real customers the moment it lands. Partway in, the question came up: do we actually have a solid foundation for fonts, colours and widths? The audit answer was “partially”. New sections were clean; older ones were drifting. Around 30 stray colour values, 46 hard-coded font declarations, and the page width defined in raw pixels about 30 different ways.
What we did
One pass, one day. Every stray colour mapped to a named brand token: 92 replacements across 18 files. Every literal font declaration replaced with the two brand font tokens: 46 replacements across 10 files. All 106 sections given the same layout controls, so width and spacing are picked from one scale in the theme editor instead of typed into code. And a validator that runs before every push and blocks the kind of drift it had just cleaned up.
The result
A brand colour now changes in one line instead of ninety-two places. Sections stopped disagreeing with each other about fonts and spacing. And every polish pass since has been faster and safer, because changes land on one system instead of many, which matters double on a live store, where the blast radius of any change is the thing you manage hardest.
What to take from it
If you’re planning a redesign, the first question isn’t “what will the new sections look like”. It’s: when we change the brand colour, how many places does it change? If the answer is more than one, you’re paying full price for every future change, forever. A foundation day feels slow the week you do it, and pays for itself the first week you use it.
