Design systems, generated from code

Your frontend is your design system.Now everyone can see it.

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

Open in Claude Open in ChatGPT
Paste intoClaude CodeCursorChatGPT

Design systems used to be a project. With Onbrand, they're a side effect of shipping.

How it works

From code to everyone.One line, five steps.

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

01 · Read

It starts in your code.

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

tokens · type · icons · components · motion
02 · Publish

One page, always current.

Everything becomes one searchable page: light and dark, desktop and phone, with copy-ready code for every color, icon and component.

design.yourco.com
03 · Update

Every push leaves a trail.

Change a color and push. Minutes later the page is current, with a dated changelog showing exactly what changed, before and after.

git push → changelog
04 · Agents

Agents build on brand.

Claude, Cursor and ChatGPT read your design.md, so first drafts use your real tokens and components instead of guessing at hex codes.

design.md → every agent
05 · Ship

Prototypes become production.

Because agents reuse your tokens and components, what you prototype on Friday is code you can merge on Monday. On brand, by default.

var(--primary) · Button · Card
See it update

Change one token.Watch everything follow.

One push changes the primary color from violet to green. Onbrand reads it, the design system updates, and every product built on it follows. No handoff, no export, no stale screenshots.

  1. 01Change one token--primary: #22c55e
  2. 02Onbrand reads the pushgit push
  3. 03The system updateschangelog written
  4. 04Every product followsweb · app · checkout
Where you use it

One source of truth.Everywhere your team builds.

The same system shows up wherever work happens: in code, in chat, in reviews, and soon in your browser and your coding agents.

01

In your code

Link one stylesheet and every color, radius, shadow and font is there, in light and dark, always the latest.

02

In Claude and ChatGPT

Copy one prompt or open a chat with the whole system loaded, so what AI builds looks like you.

03

In design reviews

Step back through every version like Time Machine and see exactly what changed, and when.

04

With your team

Keep it private with a password, or let in anyone with a Google account on your company's domain.

05

On any website Soon

A browser extension that applies your system to any page, so you can see your brand on it first.

06

In coding agents Soon

A built-in connection (MCP) so Claude Code and Cursor look up tokens and components while they work.

What's inside

Everything a design system needs.Measured from your real code.

Colors, light and dark

Every token with both values, grouped by meaning. Click to copy the variable.

Type and spacing

Font weights, the sizes you actually use, your spacing scale and breakpoints.

Icons and logo

Every SVG, searchable, copyable, and recolored to follow the text.

Live components

Your real components with your real CSS, in light, dark, desktop and phone.

Motion

Every animation at its real speed and curve, plus the easings you use most.

Changelog and Time Machine

A dated, visual record of every change, from the push that made it.

Questions

Straight answers.No surprises.

How do I install it?

Copy the install prompt and paste it into Claude Code, Cursor or ChatGPT. Your agent runs the Onbrand tool, asks you three questions, writes your component examples and guidelines, and adds everything to your repo in one design-system folder. Nothing in your app changes.

What does it read from my code?

Your tokens (CSS custom properties, Tailwind 3 and 4 themes, SCSS variables, and the Tailwind colors your markup uses), your stylesheets for type, spacing, radii and animations, your fonts, icons and logo, and the component examples you choose to show.

Does my code leave my repo?

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.

Who can see the page?

You choose: anyone with the link, a password, or people signing in with Google on the domains you list.

What does it cost?

Free on your own hosting: it runs in your repo and deploys to GitHub Pages. Hosting at onbrand.cheloufi.com, with password or Google sign-in, is invite-only for now.

Get started

Start with one prompt.Your agent does the rest.

Open in Claude

Rather not host it yourself? The hosted version is invite-only for now.