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. Did we actually have a solid foundation for fonts, colours and widths? The audit answer was “partially”. Newer sections were clean, older ones were drifting, with 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. We mapped every stray colour to a named brand token, 92 replacements across 18 files, and swapped every literal font declaration for one of the two brand font tokens, another 46 across 10 files. All 106 sections got the same layout controls, so width and spacing are now picked from one scale in the theme editor rather than typed into code. And a validator runs before every push to block the kind of drift it had just cleaned up.
The result
A brand colour now changes in one line instead of ninety-two places, and sections stopped disagreeing with each other about fonts and spacing. Every polish pass since has been faster and safer, because the 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 the new sections will look like. The real one is, when we change the brand colour, how many places does it change? If the answer is more than one, you are paying full price for every future change, forever. A foundation day feels like the slow option the week you spend it, right up until the first change you make afterwards costs almost nothing.
