Brand QA¶
Business plan and above. Declare your project's approved colors and fonts once, and every capture is automatically checked against them — no separate scan step, same as QA Rules.
What it checks¶
- Colors — the background, text, and border colors of your most visually prominent page elements are compared against your declared approved palette. A color within your chosen tolerance still counts as a match (so minor rendering differences don't cause false alarms); a color clearly outside the palette is flagged.
- Fonts — the font actually specified by the page (not whichever fallback happened to render, if the intended font failed to load) is compared against your declared approved font list.
Only the top ~20 most visually significant elements on each page are checked — small decorative elements aren't covered. If you haven't configured any Brand Rules, this check doesn't run at all; there's no cost or noise for projects that don't use it.
Setting up rules¶
From a project's Brand QA tab:
| Field | What it means |
|---|---|
| Type | Approved color or approved font. |
| Value | A color (pick with the color swatch) or a font family name (e.g. Inter). |
| Tolerance | Colors only. How close a captured color must be to count as a match. Defaults to a loose 8% if left blank — we'd rather miss a subtle shade difference than flag normal anti-aliasing noise constantly. |
| Pages | Apply to all pages, or pick specific ones. |
A rule with no pages selected applies everywhere in the project. You can disable a rule temporarily without deleting it, or remove it entirely. To change a rule's color/font/tolerance, delete it and create a new one — there's no in-place edit for those fields yet.
Bulk import from a CSV¶
If you've already collected your brand colours and fonts in a spreadsheet, use Import rules from a CSV below the add-rule form. Save your sheet as CSV and upload it — every row becomes a rule. Download sample CSV gives you a ready-made template with the header row and one example per category.
| Column | Required | Accepted values |
|---|---|---|
type |
Yes | color or font |
category |
Yes | general, buttons, links, h1–h6, p |
color |
For color rules | 6-digit hex, e.g. #1A73E8 |
font |
For font rules | font family name, e.g. Inter |
page |
Yes | all pages, or exact page name(s) separated by a semicolon |
label |
No | a friendly name; one is generated from type/category if omitted |
tolerance |
No | whole number 0–100, color rules only (defaults to 8) |
After the upload you get a summary — how many rules were added, skipped, or failed — with the row number and reason for anything that didn't import. Rows that duplicate a rule you already have (same value, category, and page scope) are skipped, so re-uploading an edited sheet is safe. A single bad row never blocks the rest.
Discovering values from captures¶
Use Scan existing captures to inspect the latest capture for all pages or selected pages. The results are grouped by element category and show how many scanned pages contain each color or font. Values already approved for the same category and scope are marked Already added and cannot be saved twice. Pages captured before style-sample storage was introduced are listed as missing; use Capture and rescan to capture those pages with the production environment, default language, and desktop viewport, then rebuild the suggestions automatically.
Use the chevron on the Suggested brand values panel to fold it away while you work, or the × to dismiss the scan results entirely — running the scan again brings them back.
Where results show up¶
Capture and rescan uses the browser extension, just like ordinary manual capture. Extension 0.1.4 and later exposes the capture bridge on both the project's Captures and Brand QA pages; if the extension is missing or older, use Scan existing captures after taking a normal capture.
Any flagged color/font shows up as an issue on that capture, the same way text overflow or a console error would. The project's General page also shows a Brand Consistency summary — total off-palette colors and off-brand fonts found recently, how many pages are affected, and links through to the affected pages — so you don't have to open every capture individually to see the overall picture.