Checks and the GitHub App

The same rules in your terminal, your AI tool, every pull request and your live site.

What's checked

RuleFlags
no-hardcoded-colorHex, rgb or hsl colours in code instead of a token
no-raw-palette-classTailwind palette classes like bg-blue-500 instead of your tokens
spacing-scalePadding, margin or gap values that aren't on your spacing scale
radius-scaleBorder radius values that aren't on your scale
font-familyFonts that aren't in the Brand Kit
prefer-official-componentRaw <button>, <select>, checkboxes and similar where your component exists
forbidden-importImports from UI libraries you've ruled out
legacy-libraryUsages of a library you're migrating away from
deprecated-tokenTokens being retired, with the replacement and removal date (warning)
deprecated-componentComponents being retired, with the replacement and removal date (warning)
component-propsUnknown, misspelt or missing required props on your components
img-altImages 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)

  1. In the dashboard, open Repos → Connect GitHub and install the app on the repos you choose.
  2. 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.
  3. 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.json are 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.

On the Free plan one repo can be connected, with sync but without pull request checks. Team removes both limits.

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).

  1. Below that score the Brandrail check fails, with the fix for each line.
  2. 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 install

Each 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 mode

The 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 error

Live 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