Skip to content
SlashClone
DiscoverUse in ClaudeSubmit a link
Sign in
Made by@brandkit

Brand

@brandkit/brand

The /brand command: make whatever you are working on match your brand. It finds your brand guide (or helps you write one), then fixes colors, fonts, logo use, voice, and spacing in a page, CSS, deck outline, email, or social post, and lists every change it made.

CommandContentv1.0.0 (latest)
Use in Claude Save Like Clone Comment
Activity
New: be the first to try it
  1. 1---
  2. 2name: brand
  3. 3description: Make anything on-brand. Finds the project's brand guide (brand.md) and applies it to what the user is working on (a web page, CSS or Tailwind classes, a component, a deck outline, an email, a social post) by fixing colors, fonts, logo use, voice, and spacing, then lists every change. Use for /brand, "make this on brand", "brand this", "apply our brand", "use our colors and voice", or "this does not look like us".
  4. 4license: MIT
  5. 5---
  6. 6
  7. 7# /brand
  8. 8
  9. 9Takes 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.
  10. 10
  11. 11## When to use
  12. 12
  13. 13- `/brand`, `/brand src/pages/pricing.tsx`, `/brand` with a pasted email or post.
  14. 14- "Make this on brand", "use our colors", "rewrite this in our voice".
  15. 15- To review without changing anything, use `on-brand-check` instead.
  16. 16
  17. 17## Step 1: find the brand guide
  18. 18
  19. 191. Look for `brand.md`, then `docs/brand.md`, then any `brand/*.md`.
  20. 202. **None found:** stop and say so. Offer two paths:
  21. 21 - "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.
  22. 22 - Or the user points you at their guide (a PDF or doc they paste). Summarize it into `brand.md` the same way.
  23. 233. Read the whole guide: tokens (colors, fonts, sizes, spacing, radius, logo, words to avoid) and the prose rules (color roles, casing, logo rules, voice).
  24. 24
  25. 25## Step 2: figure out what to brand
  26. 26
  27. 27- An argument: that file, folder, or text. A folder: list the files you would touch and ask first.
  28. 28- No argument: the file or draft currently in focus in this conversation. If unclear, ask one question: "Which file or draft?"
  29. 29- 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**.
  30. 30
  31. 31## Step 3: apply the brand
  32. 32
  33. 33Work through the checklist. Change only what the guide covers.
  34. 34
  35. 351. **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.
  36. 362. **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).
  37. 373. **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.
  38. 384. **Spacing and shape.** Snap padding, margins, and gaps to the spacing scale, and corners to the radius tokens.
  39. 395. **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.
  40. 406. **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.
  41. 41
  42. 42For code, make the smallest edits that do the job. Do not restructure components, rename classes, or reformat files.
  43. 43
  44. 44## Step 4: show what changed
  45. 45
  46. 46End with this list, every time:
  47. 47
  48. 48```markdown
  49. 49## Brand changes: pricing.tsx
  50. 50
  51. 51Guide: brand.md
  52. 52
  53. 53| # | What | Before | After | Rule |
  54. 54| --- | --- | --- | --- | --- |
  55. 55| 1 | Button color | #1e7b5d | var(--color-primary) | Colors: primary for actions |
  56. 56| 2 | Headline font | Playfair Display | Fraunces (font.heading) | Type |
  57. 57| 3 | Headline copy | "Revolutionary scheduling" | "Fill your calendar, not your inbox" | Voice: avoid hype |
  58. 58
  59. 59Left alone: legal footer, prices, product names.
  60. 60Needs you: no white logo version for the dark header. Add assets/logo-white.svg.
  61. 61```
  62. 62
  63. 63## Guardrails
  64. 64
  65. 65- Ask before editing more than one file, and before any edit to shared config (`tailwind.config.*`, global CSS).
  66. 66- Never change facts, numbers, prices, names, quotes, or legal text while fixing voice.
  67. 67- Never invent brand rules. If the guide is silent on something, leave it and mention it under "Needs you".
  68. 68- Never fetch fonts, images, or logos from the internet. Use only files in the project.
  69. 69- Pasted text: return the branded version in chat and do not create files unless asked.
Sign in to comment on a line