Your brand is only as consistent as your least-watched page. A designer ships a new landing page, an agency updates a template, a plugin restyles a button, and slowly the site drifts off the colours, fonts and shapes you agreed. Brand consistency scores each page against a brand kit you define, gives it an on-brand score out of 100, and alerts you when a page drifts.
What it is
Read more
Why it matters
Read more
What a brand kit contains
A brand kit is your rulebook. You create one per brand (an agency can hold many, one per client) and assign it to the domains it governs. A kit holds:
- Approved fonts. The font families your brand uses, for example
InterandBricolage Grotesque. Anything else rendered on the page counts against the font score. Generic fallbacks such assans-seriforsystem-uiare never penalised. - Approved colours. Your palette as hex values. The check measures how far each colour actually used on the page sits from the nearest approved colour, so a near-miss shade is caught, not just an exact clash.
- A spacing scale. The pixel steps your layout should snap to (for example 4, 8, 16, 24, 32). Spacing that lands off the scale, beyond a leeway you set, is flagged.
- Logo usage notes. Written rules about how your logo should and should not be used. Logo presence and placement are judged by the vision pass.
- Imagery guidance. A plain-language description of the photographic or illustration style your brand expects.
- Learned baselines (optional). If you point the kit at your own site with Learn from your main site, it captures that site's corner radii, button variety and image spacing rhythm, and scores other pages relative to those, rather than against an absolute ideal.
Three fast ways to fill a kit
The dimensions it scores
Each page is scored on several dimensions, and you control which ones count and how much:
- Fonts. The share of on-page text set in an approved family. Off-brand families are listed as violations with how much of the page used them.
- Colours. The share of used colours that fall within tolerance of your palette. Trivially rare colours (a single icon, anti-aliased edges) are ignored so a stray pixel never sinks the score.
- Spacing. How closely the page's spacing values match your scale, within the leeway you set.
- Typography hierarchy. Whether headings descend in size sensibly (H1 at least as large as H2, H2 at least as large as H3, body smallest).
- Shapes. Corner radii and button-style variety, compared against your learned baseline. Introducing new radii or extra button styles is flagged.
- Image spacing. Whether images sit on the same spacing rhythm your brand was learned with.
- Logo and imagery. Judged by the vision pass against your usage notes and imagery guidance. Imagery is switched off by default.
Fonts, colours, spacing, logo and imagery can each be switched on or off and given a weight of high, medium or low. Colours have a tolerance percentage (8% by default) and spacing a pixel leeway (4px by default). Typography hierarchy, shapes and image spacing always count, at fixed weights. The individual scores are then blended by weight into a single 0 to 100 figure.
What the score and status mean
The blended score maps to a status using two thresholds you can adjust:
- OK (shown as On brand) when the score is at or above the warning threshold (85 by default). The page is on-brand.
- Warning (shown as Needs attention) when the score is below the warning threshold but at or above the fail threshold. Some drift worth a look.
- Fail (shown as Off brand) when the score is below the fail threshold (70 by default). The page is meaningfully off-brand.
Every check also lists the specific violations behind the number: which font was found where it should not be, which colour is off-palette and what it is closest to, which spacing values missed the scale. So a low score always comes with a to-do list, not just a verdict.
What you need before you start
- A monitored website to assign the kit to. Brand kits attach to your sites. Add the site first if you have not (see Add your first website). Only monitored domains appear in the assign picker.
- Your brand details, or a source to learn them from. Either your fonts, hex colours and spacing to type in, a live URL to Learn from, or a brand-guidelines PDF to import.
- Visual-check credits. Brand checks draw on the same monthly visual allowance as visual monitoring (150 a month on Starter, 600 on Pro, 2,000 on Agency). Each page checked uses one. Visual credits are not sold in packs.
How a check runs
When a check runs, TLDTrack loads the page in a real browser on our infrastructure, records its computed styles into a profile, and scores that profile against the assigned kit. The homepage is always checked; you can add extra paths to check alongside it. Results appear within a minute or two, each with its score, status, the underlying violations and a screenshot of exactly what was captured.
You can run a check on demand, or set the kit to a schedule so it runs by itself. The scheduled options are daily, weekly or monthly (or manual, meaning on-demand only). A schedule is a property of the kit, so it applies to every domain that kit is assigned to.
How alerting works
Brand checks do not nag you every time they run. An alert fires when a page's status
worsens: from OK to Warning or Fail, or from Warning to Fail. The first check of
a page also alerts if it comes back Warning or Fail. This is the brand_drift alert
type.
- A drop to Fail raises a critical alert; a drop to Warning raises a warning alert.
- The alert names the kit and the score, for example "On-brand score dropped to 62/100 (Fail)", and goes to your notification contacts.
- A page that stays at the same status, or improves, does not alert, so you are told about drift, not reminded that a page is fine.
How to set it up, step by step
-
1
Open Brand Consistency from your dashboard and choose New brand. Give it a clear name, for example the client or brand it belongs to.
-
2
Fill in the kit: type your fonts, colours and spacing, or use Capture under Learn from your main site to draft them from your live site, or Import PDF to pull them from a brand-guidelines document. Add your logo usage notes and imagery guidance.
-
3
Tune the sensitivity if you want: switch dimensions on or off, set their weight, and adjust the colour tolerance, spacing leeway and the fail/warning score thresholds.
-
4
Assign the kit to the domains it governs by picking them in the editor, or later from a site's Brand Consistency tab.
-
5
On a site's Brand Consistency tab you can also add extra paths to check beyond the homepage, for example
/pricingor/about. -
6
Choose a schedule for the kit (daily, weekly, monthly, or manual) and save.
-
7
Run a check now to see the first score, or wait for the schedule. Each result shows the score, the violations and a screenshot.
Assign monitored sites, then focus the paths
Where to set this up
Assign a brand kit on a site's Brand Consistency tab.
Learn moreA deeper overview.
Good to know
- Brand checks share the monthly visual-check allowance with visual monitoring, not the security-scan pool. Each page checked uses one visual credit.
- The homepage is always included; extra paths are optional per domain.
- Shape and image-spacing scoring only switch on once you have run Learn to capture a baseline. Until then they stay dormant and never drag the score.
- Generic font fallbacks and one-off rare colours are deliberately ignored, so the score reflects real drift, not noise.
- A schedule belongs to the kit, so changing it affects every domain that kit is assigned to.