Brand

/brand

Takes something the user made and makes it look and sound like the brand. It changes only what the brand guide covers, and it shows every change so nothing is a surprise.

When to use

• /brand, /brand src/pages/pricing.tsx, /brand with a pasted email or post.
• "Make this on brand", "use our colors", "rewrite this in our voice".
• To review without changing anything, use on-brand-check instead.

Step 1: find the brand guide

1. Look for brand.md, then docs/brand.md, then any brand/*.md.

2. None found: stop and say so. Offer two paths:

   • "Want me to build one now?" Use the brand-guide-builder skill if it is installed. If not, run its short version: scan the project's CSS for the main colors and fonts, ask the user five questions (what you make and for whom, three voice words, main and accent color, fonts, words to avoid), and write brand.md with a yaml tokens block. Show it and get a yes before using it.
   • Or the user points you at their guide (a PDF or doc they paste). Summarize it into brand.md the same way.
3. Read the whole guide: tokens (colors, fonts, sizes, spacing, radius, logo, words to avoid) and the prose rules (color roles, casing, logo rules, voice).

Step 2: figure out what to brand

• An argument: that file, folder, or text. A folder: list the files you would touch and ask first.
• No argument: the file or draft currently in focus in this conversation. If unclear, ask one question: "Which file or draft?"
• Name the type, since the rules differ: code (HTML, CSS, JSX, Tailwind), copy (email, post, landing page text), outline (deck or doc outline), or mixed.

Step 3: apply the brand

Work through the checklist. Change only what the guide covers.

1. Colors. Replace hard-coded colors with brand tokens (var(--color-primary) or Tailwind classes like bg-primary if the project has them; otherwise the hex values). Map by role: actions and links use primary, highlights use accent, text uses ink. Keep contrast at 4.5:1 for body text.
2. Type. Heading and body fonts from the guide, sizes snapped to the nearest step of the type scale, casing as the guide says (for example sentence case headings).
3. Logo. Right version for the background and size, minimum size, clear space. Never redraw or recolor it; if the needed version is missing, note it.
4. Spacing and shape. Snap padding, margins, and gaps to the spacing scale, and corners to the radius tokens.
5. Voice. Rewrite copy to match the voice section: swap words the guide avoids, cut hype, make claims specific. Keep every fact, number, price, date, and legal line exactly as written. Keep the length within 10 percent unless asked.
6. Outlines and decks. Apply voice to titles, suggest one idea per slide, and note where brand colors and the logo go. Add a short "design notes" block rather than inventing visuals.

For code, make the smallest edits that do the job. Do not restructure components, rename classes, or reformat files.

Step 4: show what changed

End with this list, every time:

## Brand changes: pricing.tsx

Guide: brand.md

| # | What | Before | After | Rule |
| --- | --- | --- | --- | --- |
| 1 | Button color | #1e7b5d | var(--color-primary) | Colors: primary for actions |
| 2 | Headline font | Playfair Display | Fraunces (font.heading) | Type |
| 3 | Headline copy | "Revolutionary scheduling" | "Fill your calendar, not your inbox" | Voice: avoid hype |

Left alone: legal footer, prices, product names.
Needs you: no white logo version for the dark header. Add assets/logo-white.svg.

Guardrails

• Ask before editing more than one file, and before any edit to shared config (tailwind.config.*, global CSS).
• Never change facts, numbers, prices, names, quotes, or legal text while fixing voice.
• Never invent brand rules. If the guide is silent on something, leave it and mention it under "Needs you".
• Never fetch fonts, images, or logos from the internet. Use only files in the project.
• Pasted text: return the branded version in chat and do not create files unless asked.

/brand

Type /brand and whatever you are working on gets your colors, fonts, logo rules, voice, and spacing, with a clear list of every change. Works on web pages, CSS and Tailwind, emails, social posts, and deck outlines.

Who it is for: anyone who makes things faster than a designer can review them. Founders, marketers, and developers building landing pages.

Example

You are editing a pricing page and type /brand.

Before:

.cta { background: #1e7b5d; font-family: "Playfair Display"; padding: 18px; }

Revolutionary scheduling that leverages AI.

After, with this change list:

No brand guide yet? /brand notices and offers to write brand.md with you first.

What it can access

• Reads your brand guide (brand.md, docs/brand.md, or brand/).
• Writes brand.md only if you ask it to create one.
• Edits the file you point it at. Those edits go through Claude Code's normal approval, and it asks before touching more than one file.
• No scripts, no network.

Setup

Install it and type /brand. Pairs well with brand-guide-builder, on-brand-check, and brand-tokens-export.