Front End · CSS · Brand Sites

The Day a Brand Site Turned the Wrong Shade of Orange

Nothing was broken. Every page loaded. The site was just a little bit the wrong orange, and on a brand site, that counts as an outage.

Nothing was broken, technically

Every page loaded. The logs were clean. No errors, no alerts, no angry monitors.

The brand's orange was just off.

If you've never worked with a brand team, this sounds like a non-issue. If you have, you already winced. A brand's color isn't decoration. It's the brand. People notice, even when they can't tell you what they noticed.

Two oranges walk into a stylesheet

There were two oranges in play. Side by side, most people would call them the same color. They are not the same color.

I'm not going to tell you which one is correct. The brand team knows. The brand team always knows.

#ff5a00   ← one of these is the brand
#f26b21   ← one of these is an impostor
(not the real values, but you get the idea)

How a theme overwrites your homework

Our sites run on Sitecore SXA, which has a feature called Creative Exchange. You export a theme, a designer works on it, and you import it back.

The catch is that an import replaces what's there. If the theme changed between the export and the import, those changes don't get merged. They get overwritten. Our import brought an older orange right back to life, like a horror movie villain you were sure was gone.

This is the part I find interesting. Nobody wrote a bug. Nobody typed the wrong color. A normal, routine process quietly undid someone's work.

The fix

The fix itself was satisfying and boring, which is how fixes should be. Find every instance of the wrong value, replace it with the right one, and upload the corrected theme file directly to the media library, where SXA themes live.

A find-and-replace like this is a one-liner. The hard part was knowing exactly what to replace and making sure nothing else changed with it.

# Illustrative: swap every instance of the wrong color
sed -i 's/<wrong-orange>/<right-orange>/gI' theme.css

What I took away from it

  • A page that loads is not the same as a page that's right.
  • A theme import is a deploy. Treat it like one.
  • Know what an import replaces before you run it.
  • Brand colors are requirements, not preferences.