Checks and the GitHub App
The same rules in your terminal, your AI tool, every pull request and your live site.
What's checked
| Rule | Flags |
|---|---|
no-hardcoded-color | Hex, rgb or hsl colours in code instead of a token |
no-raw-palette-class | Tailwind palette classes like bg-blue-500 instead of your tokens |
spacing-scale | Padding, margin or gap values that aren't on your spacing scale |
radius-scale | Border radius values that aren't on your scale |
font-family | Fonts that aren't in the Brand Kit |
prefer-official-component | Raw <button>, <select>, checkboxes and similar where your component exists |
forbidden-import | Imports from UI libraries you've ruled out |
legacy-library | Usages of a library you're migrating away from |
deprecated-token | Tokens being retired, with the replacement and removal date (warning) |
deprecated-component | Components being retired, with the replacement and removal date (warning) |
component-props | Unknown, misspelt or missing required props on your components |
img-alt | Images without alternative text |
Files checked: JSX and TSX, Angular templates (including inline templates, [ngStyle] and [style.x]), Vue, Svelte, HTML, CSS, and server templates (PHP, Twig, Mustache, Handlebars, Nunjucks, Liquid). Each file gets a brand score out of 100. Turn rules off or ignore paths in brandrail.config.json.
GitHub App (recommended)
- In the dashboard, open Repos → Connect GitHub and install the app on the repos you choose.
- Turn on Pull request checks per repo. Each PR gets a check run with a brand score, inline annotations on changed lines and one comment with the fixes.
- Keep Brand Kit sync on: every publish opens (or updates) one pull request that brings the repo's config, tokens CSS and rule files up to date. Your own settings in
brandrail.config.jsonare kept.
Permissions: contents and pull requests (write), checks (write), metadata (read), only on the repos you pick. No secrets or workflow files in your repos.
Merge gates
Each repo is advisory by default: the Brandrail check reports the score, and a low score shows as neutral, never blocking anyone. When a repo's score is steady, turn on a gate in Repos → the repo's settings → Merge gate → Block merges below 80 (pick your number).
- Below that score the Brandrail check fails, with the fix for each line.
- In GitHub, open the repo's Settings → Branches (the Repos page links straight to it), add a branch protection rule for your main branch, tick Require status checks to pass and choose Brandrail. A failing check now blocks the merge.
Only changed lines are scored, so existing code never blocks a pull request. Every gate change is recorded in the activity log.
Before every commit
Catch problems before they reach a pull request. In the repo, once per developer:
npx brandrail hook installEach commit then checks the staged lines on the developer's machine: errors stop the commit with the fix shown, warnings don't. Nothing is sent anywhere. It works alongside Husky and existing hooks. Skip it once with git commit --no-verify; remove it with npx brandrail hook uninstall.
GitHub Action
If you'd rather run checks in your own CI, create an API key in Connect → API keys, save it as the BRANDRAIL_KEY secret and add:
name: Brandrail
on: [pull_request]
permissions:
contents: read
pull-requests: write
jobs:
brand-check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: ThiBaptistella/brandrail/packages/github-action@main
with:
api-key: ${{ secrets.BRANDRAIL_KEY }}
api-url: https://www.brandrail.com.au
fail-below: 80 # remove for advisory modeThe source line isn't uploaded unless you set upload-snippets: true, so code stays in your runner.
From the terminal
npx brandrail check # whole project
npx brandrail check --changed # only lines changed vs origin/main
npx brandrail check --format markdown # for a PR comment
npx brandrail check --fail-below 80 # exit 1 under 80
npx brandrail check --staged --strict # staged lines only, fail on any errorLive URL scans
Checks → Scan a URL renders a page in a real browser and checks the colours, fonts, spacing and elements it actually uses. On Team, schedule any URL daily or weekly and the results land in Checks. For pages behind a login or on localhost, use the CLI:
npx brandrail scan https://staging.acme.com --pages 3 --storage-state auth.json