Building on-brand with Claude Code

The synced folder turns "make it on-brand" from a prompt-engineering wish into a dependency. This walkthrough goes from nothing to an on-brand Next.js page, then a rebrand.

1. Sync

npm install -g braaand
braaand auth login
braaand sync

Every brand you can access lands in ~/Documents/Braaand (change with braaand sync set-root). Each brand folder is self-describing — open its CLAUDE.md and any agent knows the rules.

2. Preview

In Claude Code:

"Show me Reform Society's colors and type on dark"

The agent runs braaand sync status --json (never guesses paths), reads brand.json, composes swatch grid + type specimens into _shared/shell.html, and opens Previews/preview.html — with the brand's real woff2 fonts and download links per asset.

3. Build

"Build a landing page hero for Reform Society in this Next.js + Tailwind project"

The agent copies the brand into the project — never links:

src/brand/tokens.css          ← copied from <brand>/dist/
src/brand/fonts.css           ← paths rewritten for the project
src/brand/tailwind.tokens.css ← Tailwind v4 @theme
public/fonts/*.woff2          ← copied from <brand>/fonts/

/* app/globals.css */
@import "../src/brand/tokens.css";
@import "../src/brand/fonts.css";
@import "../src/brand/tailwind.tokens.css";

Then it builds with token utilities only — bg-brand-dark, text-brand-accent-on-dark, font-brand-heading, p-brand-lg — no raw hex, no re-declared fonts. Tailwind v3 projects register dist/tailwind.preset.js instead; plain-CSS projects use var(--brand-*) directly. The copied files keep their provenance header:

/* Reform Society · brand v14 · synced 2026-07-17T09:42Z · generated by Braaand — do not edit */

Copying (instead of a live hosted stylesheet) is deliberate: deployed products can't reach your home folder, and a rebrand should never restyle production silently. The copy is the lockfile.

4. Rebrand as a dependency update

When the brand changes in Braaand, its version bumps (v14 → v15). In any project:

"Pick up the latest brand"

The agent runs braaand sync, diffs the project's copy against the synced dist/, and reports before touching anything:

primary #1A4D2E → #16402A · one new accent added · fonts unchanged. Apply?

Confirm, and the copy updates — with an offer to check the places the changed tokens are used.

Where each surface fits

• This flow (synced folder) — products, prototypes, tools, emails: anything you build and own.
• start_workflow / the factory — batch ad creatives: braaand produces, scores, and hands back a review board.
• export_design_system (remote) — same tokens over the wire, for machines without a synced folder.