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

Brand guide builder

@brandkit/brand-guide-builder

Build a one-page brand guide (brand.md) through a short interview, pulling the colors and fonts your site already uses. Covers colors, type, logo rules, voice, and spacing, plus a machine-readable tokens block the other brandkit kits use.

SkillContentv1.0.0 (latest)
Use in Claude Save Like Clone Comment
Activity
New: be the first to try it
  1. 1---
  2. 2name: brand-guide-builder
  3. 3description: Create or update a one-page brand guide, brand.md, by interviewing the user and reading the colors, fonts, and logos the project already uses. Produces color roles, type, logo rules, voice with words to avoid, spacing, and a tokens block other tools can read. Use when the user says "make a brand guide", "we need a style guide", "write down our brand", "set up brand.md", or when another brand task finds no brand guide.
  4. 4license: MIT
  5. 5---
  6. 6
  7. 7# Brand guide builder
  8. 8
  9. 9Writes `brand.md`: one page a person can read in three minutes and a tool can parse. It starts from what already exists (the site's CSS, logo files, the user's own words) so the guide describes the real brand, not a wish list.
  10. 10
  11. 11## When to use
  12. 12
  13. 13- No brand guide yet, or it lives in a PDF nobody opens.
  14. 14- `/brand`, `on-brand-check`, `brand-tokens-export`, or `social-image-templates` could not find `brand.md`.
  15. 15- Updating the guide after a refresh: "we changed our accent color", "add our new logo".
  16. 16
  17. 17## Steps
  18. 18
  19. 191. **Check for an existing guide** (`brand.md`, `docs/brand.md`). If one exists, ask whether to update it or start fresh. Updating keeps every section the user does not mention.
  20. 202. **Look before asking.** Scan what the project already uses, quietly and quickly:
  21. 21 - Colors: the most frequent hex values in CSS files and the `colors` in `tailwind.config.*`. Ignore pure grays used once.
  22. 22 - Fonts: `font-family` values and font imports.
  23. 23 - Logos: files named like `logo*` in `assets/`, `public/`, or `brand/`.
  24. 24 Show what you found as a short list and ask the user to confirm roles ("Is #1F7A5C your main brand color?").
  25. 253. **Interview**, one question at a time, at most eight. Skip any the scan already answered.
  26. 26 1. In one sentence, what do you make and for whom?
  27. 27 2. Three words for how you want to come across (for example warm, plain, expert).
  28. 28 3. Three words you never want to sound like (for example corporate, hype, cute).
  29. 29 4. Main brand color, and one accent color, if any.
  30. 30 5. Heading and body fonts. Suggest a safe pair if they have none (a characterful heading font plus a highly readable body font, both free).
  31. 31 6. Logo files and any rules you already follow (white background only, minimum size).
  32. 32 7. Words or phrases to avoid, and words you like.
  33. 33 8. A sentence of copy you love that sounds like you.
  34. 344. **Fill gaps with good defaults** and mark each one `(default, change me)`: ink `#1B1F23`, paper `#FFFFFF`, a muted gray with 4.5:1 contrast on white, a type scale of 14, 16, 20, 28, 44 px, spacing of 4, 8, 16, 24, 40 px, radius 4 and 10 px.
  35. 355. **Check contrast** of text colors on their backgrounds. Body text must reach 4.5:1. If the primary color fails as a background for white text, say so and note "large text only" in the guide.
  36. 366. **Write `brand.md`** using the template below. Keep it to one screen per section. Show the user the color roles and voice section and ask "anything to change?" before you finish.
  37. 377. **Suggest next steps:** `brand-tokens-export` for CSS and Tailwind, `/brand` to apply it to a page.
  38. 38
  39. 39## Template
  40. 40
  41. 41`examples/brand.md` is a complete example. The structure, in order:
  42. 42
  43. 43````markdown
  44. 44# <Name> brand guide
  45. 45
  46. 46<One sentence: what you make and for whom.>
  47. 47
  48. 48## Tokens
  49. 49
  50. 50```yaml tokens
  51. 51name: <Name>
  52. 52color:
  53. 53 primary: "#......"
  54. 54 accent: "#......"
  55. 55 ink: "#1B1F23"
  56. 56 paper: "#FFFFFF"
  57. 57 muted: "#......"
  58. 58font:
  59. 59 heading: [<Heading font>, Georgia, serif]
  60. 60 body: [<Body font>, system-ui, sans-serif]
  61. 61text: { sm: 14px, base: 16px, lg: 20px, xl: 28px, display: 44px }
  62. 62space: { "1": 4px, "2": 8px, "3": 16px, "4": 24px, "5": 40px }
  63. 63radius: { sm: 4px, md: 10px }
  64. 64logo:
  65. 65 primary: assets/logo.svg
  66. 66 min-width: 96px
  67. 67voice:
  68. 68 avoid: [<word>, <word>]
  69. 69```
  70. 70
  71. 71## Colors (role of each color, and what never to do)
  72. 72## Type (where each font goes, casing, one display size)
  73. 73## Logo (versions, clear space, minimum size, never list)
  74. 74## Voice (three words, do and do not, two example lines)
  75. 75## Spacing (the scale and how to use it)
  76. 76````
  77. 77
  78. 78Either style works in the tokens block: one key per line (as in `examples/brand.md`) or short `{ inline: maps }` like above. Use spaces, never tabs.
  79. 79
  80. 80## Guardrails
  81. 81
  82. 82- Never invent brand facts. A default is fine only when labeled `(default, change me)`.
  83. 83- Hex values in the tokens block must be quoted (`"#1F7A5C"`), or YAML reads them as comments.
  84. 84- Do not touch logo files or stylesheets. This kit only writes `brand.md`.
  85. 85- Ask before overwriting an existing `brand.md`; show what will change.
Sign in to comment on a line