Brandsys reads the colors, type, icons, components and motion in your code, publishes them as one living page, and keeps it current with every push. Your team and your AI agents build from the same source, so prototypes come out on brand and ready to ship.
Design systems used to be a project. With Brandsys, they're a side effect of shipping.
Brandsys doesn't ask you to maintain anything new. It follows the code you already ship and turns it into something your whole team, and every agent, can use.
Brandsys finds your tokens, type scale, spacing, icons, components and animations the way they actually ship. No design file to keep in sync, nothing to export.
Everything becomes one searchable page: light and dark, desktop and phone, with copy-ready code for every color, icon and component.
Change a color and push. Minutes later the page is current, with a dated changelog showing exactly what changed, before and after.
Claude, Cursor and ChatGPT read your design.md, so first drafts use your real tokens and components instead of guessing at hex codes.
Because agents reuse your tokens and components, what you prototype on Friday is code you can merge on Monday. On brand, by default.
A made-up company, Acme. Every few seconds a push lands, and their design system updates itself, changelog included.
Every color in light and dark. Click to copy.
The same system shows up wherever work happens: in code, in chat, in reviews, and soon in your browser and your coding agents.
Link one stylesheet and every color, radius, shadow and font is there, in light and dark, always the latest.
Copy one prompt or open a chat with the whole system loaded, so what AI builds looks like you.
Step back through every version like Time Machine, and see exactly what changed and when.
Keep it private with a password, or let in anyone with a Google account on your company's domain.
A browser extension that applies your system to any page, so you can see your brand on it before building anything.
A built-in connection (MCP) so Claude Code and Cursor can look up tokens and components while they work.
Every token with both values, grouped by meaning. Click to copy the variable.
Font weights, the sizes you actually use, your spacing scale and breakpoints.
Every SVG, searchable, copyable, and recolored to follow the text.
Your real components with your real CSS, in light, dark, desktop and phone.
Every animation at its real speed and curve, plus the easings you use most.
A dated, visual record of every change, from the push that made it.
Copy the install prompt and paste it into Claude Code, Cursor or ChatGPT. Your agent follows a written setup guide, asks you three questions, and adds everything to your repo in clearly named files. Nothing in your app changes.
Your CSS custom properties (the tokens), your stylesheets for type, spacing, radii and animations, your icon and font folders, and the component examples you choose to show. Plain CSS today; Tailwind config support is planned.
Only the brand: tokens, styles, icons, fonts and the examples you pick. Your app code and your commit messages stay private, except lines you start with "Brand:", which become notes in the changelog.
You choose: anyone with the link, a password, or people signing in with Google on the domains you list.
Installing it with your agent is free: it runs in your repo and on your own hosting. A hosted version that runs the page, the updates and the sign-in for you is coming.
Rather not host it yourself? A hosted version with Google sign-in is opening soon.
