# Brand consistency board for all your web properties

> See whether your main site, docs, blog, careers page and microsites still look like the same company, ranked worst drift first.

- Workflow type: app
- Services: Context.dev, Slack Bot
- Categories: Marketing, Operations
- Published: 2026-08-17

## What it does

- Keep your house standard in one place: approved brand colors, approved typefaces and the official logo
- Check any site you own and see the colors, fonts, spacing and shadows actually live on it today, next to a full page screenshot
- Score every property and list each drift it finds, like an off palette color, an unapproved font or an old logo, sorted worst first
- Approve the exceptions you are happy with so they stop counting against the score, and post the current list to your design channel in Slack

## What you'll need

- A Context.dev account, which is what reads the live design of each site and looks up brand details by domain
- A Slack workspace and the channel your design team works in
- The list of domains you want on the board: main site, docs, blog, careers, microsites and any acquired brand sites
- Your brand basics to hand: approved hex colors, typeface names and the current official logo

## Prompt

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.

## How to customize

- Tighten or loosen how close a color has to be before it counts as a match, so near miss shades are not treated as violations
- Change how much each kind of drift costs the score, and choose whether spacing and shadows count or stay informational
- Point a property at a specific page instead of the homepage, which is handy for campaign microsites
- Pick which Slack channel the drift list posts to

## FAQ

### Do I need to install anything on my websites?

No. It reads each page the way an ordinary visitor would, so there are no logins to share, no plugins to install and no code changes on any of your sites. You only need the domain.

### Will a slightly different shade get flagged as a mistake?

No. You set a tolerance for how close a color has to be, and anything inside it is shown as a close match rather than a violation, so a single shade difference never counts against the score. You can make that tolerance stricter or looser at any time.

### What if one of our properties is supposed to look different?

Mark that specific drift as an approved exception and add a note explaining why, for example a recruiting sub brand on the careers page. It stays visible on the board, greyed out with your note, but stops counting against the score, and it survives future rescans.

### How often does it check the sites?

It checks when you press Rescan on a property, or Rescan all to work through the whole list. Results are saved, so the board opens instantly and shows the date each property was last scanned rather than re-checking every time you look at it.

### Can an agency use this to watch client sites?

Yes. The setup is the same, you just fill the house standard with the client's brand guidelines instead of your own, and add that client's properties. Use a separate copy of the app per client so each one has its own standard and score.

### What counts as drift?

Colors in use that are not on your approved palette, typefaces that are not on your approved list, and a logo that no longer matches the official one. It also compares the brand colors and logo that outside services detect for the domain, which catches a stale logo even when the site's own styling is correct.

Use this prompt in General Input: https://www.generalinput.com/prompts/brand-consistency-board-for-all-your-web-properties