Product
The design system your AI tools actually follow
One Brand Kit, one component registry, and the plumbing that puts them inside every AI tool, every pull request and every repo.
Brand Kit
Your brand, as tokens a machine can follow
- Import Figma variables with modes, Tokens Studio, DTCG, or Figma's Export modes ZIP
- Quality checks block unreadable kits: text, muted and status contrast, missing colours
- A one-line "when to use it" note per colour, which AI tools read
- Publish creates a version; every tool and check uses the latest
Colours
- accent.default#1f883dAA 4.5:1
- accent.emphasis#1a7f37AA 5.1:1
- danger.default#cf222eAA 5.4:1
- fg.default#1f2328AA 15.8:1
- fg.muted#59636eAA 6.1:1
- canvas.subtle#f6f8fa
Type
Display 32
Heading 20
Body 14 · line 1.5
Spacing
Radius
AI guardrails
One command and every AI tool knows your design system
npx brandrail connect signs in through the browser, detects the framework and writes the rule files and MCP config for every tool in the repo. No key is copied by hand.- MCP tools: get_guidelines, get_design_tokens, find_component, get_component_docs, get_template, get_migration_map, validate_snippet
- Rule files for Claude Code, Codex, Cursor, Copilot, Windsurf and Gemini
- Local MCP server by default: code is checked on the machine and never sent
- Rule and MCP files hold no key, so the whole team can commit them
Checker
A brand score for every change
- Hard-coded colours, Tailwind palette classes, off-scale spacing and radius, foreign fonts
- Raw <button>, <select> and checkboxes where your component exists
- Unknown or missing props, read from your components' TypeScript
- Only changed lines are judged on pull requests; legacy code never blocks a merge
1export function OrderSummary({ total }) {2 return (3 <div style={{ padding: "13px", borderRadius: 6 }}>4 <h3 style={{ color: "#3b82f6" }}>Total</h3>5 <p>{total}</p>6 <button className="bg-blue-500">Pay</button>7 <img src="/visa.svg" />8 </div>9 );10}Repo sync
Change it once. Every app follows.
Publish a new Brand Kit and Brandrail opens a pull request in every connected repo, whatever it's built with. AI tools pick up the new version on their next request. Nobody hunts for hex codes again.
Try it: pick a Brand Kit
KILN-204
Hazard report
Site induction
Ironbark · accent #1f883d · radius 8px
Reviewed, not pushed
Changes arrive as one pull request per repo, updated on every publish. A person approves the merge.
Least access
The GitHub App asks for contents, pull requests and checks on the repos you pick. Nothing organisation-wide.
No workflow secrets
Pull request checks come from the app itself: no YAML to copy and no API key in each repo.
Any framework
React today. Angular, Vue and PHP too.
- Each registry entry stores its React, Angular, Vue, Web Component and HTML usage
- Rule files and the MCP server answer in the repo's own framework
- Works in Angular 14+, React 18+, Vue 3 and server templates
- One source, so a fix ships to every framework at once
import { Button, DatePicker } from "@acme/ui"; <DatePicker label="Service date" onChange={setDate} /><Button variant="primary" onClick={book}>Book service</Button>Migration
Absorb the apps you inherited
- npx brandrail migrate: usages left per library and per file
- A migration skill and agent for Claude Code, working in small batches
- Maps Material, MUI, Bootstrap, Ant Design, Chakra and PrimeNG to your components
- A handover report per repo or across the organisation, ready to print
kiln-dashboard · migration
0%
brandrail-migrator · batch 7 of 9 · checks passing
Teams
Ready for the whole organisation
Roles
Owner, admin, member and viewer, per organisation.
Sign-in
Email, GitHub, Google and Microsoft Entra ID, with two-factor.
Invites
By email, with seats managed in billing.
Audit log
Sign-ins, keys, roles and publishes, all recorded.
API keys
Scoped, hashed, expiring, revoked instantly.
Scheduled scans
Staging or production, daily or weekly.
Dashboard
Brand score per repo and the trend over time.
Reports
A handover report leadership can read.