Quick start

About 30 minutes from sign-up to Claude Code, Cursor, Copilot or Codex building with your tokens and components.

You'll end with a published Brand Kit, a component registry, an AI tool that uses them, and a check on every pull request.

1. Create your organisation

Sign up with email, GitHub, Google or Microsoft, and name your organisation.
Settings → Members: invite teammates as admin, member or viewer. They get an email and join when they sign in with that address.

2. Import your Brand Kit

Brand Kit → Import, then choose a Figma file link (with a personal access token that can read file content), Figma's Export modes ZIP, or a DTCG / Tokens Studio JSON file. Review the diff, check the light and dark preview, fix any contrast warnings, then Publish.

Give each colour a one-line “when to use it” note. AI tools read those notes when they pick a colour.

3. Register your components

In Components, add the components your codebase already has: name, import path, the HTML element it replaces, other names people use, usage rules and a short example. That's what find_component returns and what the Checker suggests instead of a raw <button>.

4. Connect your AI tool

In each repo, run:

npx brandrail connect

It shows a code and opens the browser. Sign in, check the code matches, approve. It then writes brandrail.config.json, your tokens as CSS variables, rule files for each AI tool and the MCP config. Commit those files: they hold no key. Restart your AI tool and ask it for a screen.

Details in Connect AI tools.

5. Check every pull request

Install the GitHub App from Repos and pick the repos to check. Each pull request gets a brand score, inline annotations and one comment with fixes; only changed lines are judged. Prefer GitHub Actions? See Checks.

Locally, any time:

npx brandrail check --changed          # only what you changed vs origin/main
npx brandrail scan http://localhost:3000 --pages 3   # a running app