How it works
Set up once. Followed everywhere.
About half an hour from sign-up to the first on-brand screen from your AI tool. Here's every step, who does it, and what happens to your data.
Six steps, about 30 minutes
- 01Design or engineering lead2 minutes
Create your organisation
Sign up with email, GitHub, Google or Microsoft. Name the organisation and invite your team; they get an email and join with one click.
- Roles: owner, admin, member, viewer
- Two-factor sign-in and an audit log from day one
- 02Designer10 minutes
Import your Brand Kit
Bring in your Figma variables (with light and dark modes), a Tokens Studio file or DTCG JSON. Review the diff, check the live preview, fix any contrast warnings, then publish.
- No Figma Enterprise? Use Figma's Export modes ZIP, or colour and text styles
- Add a “when to use it” note per colour: AI tools read it
- 03Front-end lead15 minutes
Register your components
Add the components your apps already have: name, import, which HTML element it replaces, other names people use, and rules like “one primary button per view”. Or start from the Brandrail kit.
- Props are read from TypeScript, so the Checker knows a wrong prop when it sees one
- Set the Angular, Vue, Web Component and HTML usage per component
- 04Each developer2 minutes per repo
Connect each repo and AI tool
Run npx brandrail connect in the repo. It signs in through the browser, detects the framework and writes the rule files and MCP config for Claude Code, Cursor, Copilot and Codex.
- Commit the generated files: they hold no key, so the whole team gets them
- From the next prompt, the AI asks Brandrail for components and tokens before writing UI
- 05Engineering lead5 minutes
Turn on checks
Install the GitHub App on the repos you choose. Every pull request gets a brand score and inline fixes, and every Brand Kit publish opens a sync pull request in each repo.
- Prefer Actions? Add the workflow from the Connect page instead
- Schedule daily scans of staging or production URLs
- 06EveryoneOngoing
Watch drift go down
The dashboard shows each repo's score and kit version, the components people keep reinventing, and how far each migration has come. Print the handover report for leadership.
- Migrating from Material, Bootstrap or MUI? The migration agent works through it file by file
What changes for each person
Designers
Your system, used as designed
Publish once and every new screen starts from your tokens and components, not a guess. See where your kit is used and where it isn't.
Developers
Faster, with fewer review comments
Your AI tool already knows the right component and its props. The Checker flags drift on your machine, before review does.
Leads
Consistency you can measure
A score per repo, a trend over time, and a migration plan for inherited apps. One report for leadership instead of a spreadsheet.
Your data
What leaves your machine
Share this table with your security team. The full details are on the security page.
| What | Runs on | What Brandrail receives |
|---|---|---|
brandrail check / scan | Your machine | Nothing, unless you add --upload (scores and messages, never code) |
Local MCP server (default) | Your machine | Nothing about your code. It downloads the Brand Kit |
MCP with --report | Your machine | Brand scores, never code |
Hosted MCP (--remote) | Brandrail | Snippets sent to validate_snippet are checked and not stored |
GitHub App | Brandrail | Reads changed files in repos you chose to check a pull request; stores only the result |
Brand Kit and components | Brandrail | Stored in your organisation, readable only by its members |