Brand consistency board for all your web properties

Build me a brand consistency board. I am the brand and design lead at a company that owns a lot of web properties, and I need one screen that tells me whether they all still look like the same company. The properties are things like our main marketing site, our docs, our blog, our careers page, one off campaign microsites, and the sites of brands we have acquired. A different team owns each of them, so fonts drift, palettes drift, and old logos linger for months before anyone notices.

Start with a House standard page where I set our rules once and they persist. I enter our approved brand colors as hex values, each with a friendly name like Primary, Ink or Signal Yellow. I enter our approved typefaces by family name, marking each as heading, body or either. I set our official logo by uploading an image or pasting its URL. I also set the color tolerance here, described further down. Every scan is judged against whatever is saved on this page.

Then a way to add each property. For each one I give a bare domain with no protocol and no www, such as careers.example.com, a display label such as Careers, and optionally a specific page path when the page I care about is not the homepage, which matters for campaign microsites. I can edit or remove a property later. Store the bare domain as the property key, because the brand lookup requires that form, and build the full https:// URL from the domain plus path when calling the scraping operations, because those require the protocol.

Pressing Rescan on a property runs three Context.dev operations against it and saves the results together as one dated scan record. Scrape Styleguide returns the design system actually in use on the page: colors, typography, spacing and shadows. Scrape Screenshot captures a full page image. Retrieve Brand Data by Domain returns the brand record for the bare domain, including the logos and brand colors Context.dev detects, which is a useful outside-in view of what the world currently thinks our brand looks like.

Compare each scan against the house standard and produce a drift list plus a score out of 100 that starts at 100 and loses points for every unapproved item. Detect three things: off palette colors, meaning a color in use that does not match any approved hex within tolerance; unapproved fonts, meaning a typeface in use that is not on the approved list; and logo drift, meaning the logo returned for the domain does not match our official logo. Also compare the detected brand colors against the house palette, because those can be stale even when the live styling is correct. Weight the deductions so a wrong logo costs the most, an unapproved font next, and an off palette color least, and scale the color and font deductions by how heavily the item is used on the page, so one stray hex in a footer does not score the same as the body text being wrong. Capture spacing and shadows as well, but present them as an informational comparison rather than a scored violation, with a setting to fold them into the score if I want.

The color tolerance matters a lot, so please get it right. Convert both hex values to RGB and compute the straight line distance between them, then treat the colors as matching when that distance is under the tolerance. Default the tolerance to roughly 12 on the scale where pure black to pure white is 441, and expose it as a Strict, Normal, Loose control. A near miss inside tolerance should still be visible, listed quietly as a close match with both swatches shown side by side, but it must not count as a violation and must not reduce the score. I do not want a single shade difference treated as a brand breach.

The main board lists every property sorted worst drift first. Each row shows the label and domain, the score, a count of drifts broken out by type, the date it was last scanned, and a Rescan button. Show the change in score since the previous scan as a small up or down indicator, so I can tell whether a property is improving or sliding. If a property has never been scanned, say so plainly instead of showing it as a zero score at the top of the list. Include a Rescan all button that works through the properties one at a time with visible progress.

Clicking a property opens its detail view: the full page screenshot, the extracted colors as a swatch grid with each swatch marked approved, close match or off palette, the typefaces in use marked the same way, the spacing and shadow values, the detected logo shown next to our official logo, and the full drift list. Every drift row carries an Approve exception action.

Approving an exception asks for a short note explaining why, then records who approved it and when. From that point the drift still appears in the list, greyed out and labeled Approved with the note visible, but it no longer counts against the score. Key each exception to the property plus the drift type plus the specific value, so it survives a rescan and keeps applying to that same off palette hex or that same font rather than to a row position. Give me an Exceptions view listing every approved exception across all properties with its note, approver and date, and a Revoke action on each.

A Send to Slack button posts the current drift list to our design channel using the Slack Bot Send a Message operation. Let me pick the channel from the workspace channel list and remember my choice. Keep the message compact: the date, how many properties were checked, the overall average score, then the worst few properties with their top drifts listed under each, and a closing line noting how many approved exceptions were excluded from the numbers.

Persist everything: the house standard, the properties, every scan result and every exception. The board must load instantly from the most recent saved scan and must never re-scrape on page load, because screenshots cost 5 credits per call and brand lookups cost 10. Scanning happens only when I press Rescan or Rescan all. Show the last scanned date prominently on every property so I always know how fresh the picture is.