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

Create brand guidelines for your product

@slashclone/brand-book

Create brand guidelines for your product: one shareable HTML brand book covering logo, colors, type, icons, share images, and voice. It follows your real design tokens in light and dark themes, and a checker confirms contrast in both themes, icon and image sizes, and banned copy such as em dashes. Writes only to brand/ and public/brand/.

SkillContentv0.1.1 (latest)Tested
Use in Claude Save Like Clone Comment
Activity
New: be the first to try it
  1. 1---
  2. 2name: brand-book
  3. 3description: "Build and maintain a product's brand guidelines as one self-contained HTML brand book plus the files people download: logo and wordmark with clear space and misuse, color tokens in light and dark, type, imagery rules, share images, favicon and app icons, and voice and copy rules. Checks contrast in both themes, asset sizes, and banned copy. Use when someone asks for a brand book, brand guidelines, a style guide, a press or media kit, a logo or icon set, favicon and app icons, social share images, or wants the brand docs to match what the product actually ships."
  4. 4---
  5. 5
  6. 6# Brand book
  7. 7
  8. 8Goal: one HTML page that shows the whole brand, works offline, follows the product's real tokens, and links every file a designer, a partner, or an image model needs. It is a living document. Each change is a new edition.
  9. 9
  10. 10## Related kits
  11. 11
  12. 12This kit plans and assembles. These do the specialist parts. Install them when you reach that step.
  13. 13
  14. 14- `@slashclone/two-theme-brand-colors`: find a mark or accent color that keeps contrast in both themes.
  15. 15- `@slashclone/palette-export`: turn the tokens into a swatch sheet, JSON, CSS variables, and a GIMP palette for the Downloads chapter.
  16. 16- `@slashclone/seeded-image-crops`: many covers and headers from a few owned hero images.
  17. 17- `@slashclone/canvas-frame-capture`: check any animated or WebGL chapter when screenshots do not work.
  18. 18
  19. 19## Where things go
  20. 20
  21. 21- `brand/brand.json`: the spec. Tokens, contrast pairs, type, voice rules, and the asset list. Start from `examples/brand.json`.
  22. 22- `brand/brand-book.html`: the book. Start from `templates/brand-book.html`.
  23. 23- `brand/logo/`, `brand/icons/`, `brand/share/`, `brand/palette/`: the downloads.
  24. 24- `public/brand/`: copies the live site serves. Root files such as `favicon.ico` or a web manifest sit outside this kit's write scope, so ask before writing them.
  25. 25
  26. 26## Steps
  27. 27
  28. 281. **Find the source of truth.** Read the product's design tokens (a tokens file, a theme, a Tailwind config, or CSS variables). The book mirrors them. Never pick colors from screenshots. If two sources disagree, ask which wins.
  29. 292. **Write `brand/brand.json`.** Light and dark tokens with the same names, the text and mark pairs that must pass contrast (4.5 to 1 for text, 3 to 1 for marks and icons), the type faces, the voice words, the banned strings, and every asset you will ship with its pixel size.
  30. 303. **Settle open choices first.** For a mark or color still in question, make a small studio page that shows the options side by side in both themes and at real sizes. Record the decision and who made it, then retire the losers. Do not put rejected options in the book.
  31. 314. **Build the chapters.** Copy the template and fill it in. Keep chapters short, one idea each:
  32. 32 - **Foundation:** mission in one sentence, the line people repeat, three to five principles with a do and a don't each.
  33. 33 - **Logo:** the mark, the wordmark, and any lockups. Show real sizes down to the smallest allowed. Name the clear space unit (for example, the width of one stroke). Show misuse by applying the wrong thing to the real mark: stretch, rotate, recolor, add effects, a busy background. Put the mark inline with `currentColor` so the theme recolors it.
  34. 34 - **Color:** every token in both themes, with its use and its contrast. Label which colors are for text and which are only for marks. Show the proportions if the brand has a balance (how much of a frame the accent covers).
  35. 35 - **Type:** each face, its role, its sizes, and a live sample. Use fonts the project has the license to ship, served from the project.
  36. 36 - **Imagery:** what pictures show, the light, the crop, and what never appears. Give a day and a dusk version of a scene when the product has two themes.
  37. 37 - **Share images:** one renderer with a preset per size, so the pack always matches what the site serves. Common sizes: link preview 1200x630, code host preview 1280x640, square post 1080x1080, story 1080x1920, profile header 1500x500, page banner 1584x396, channel art 2560x1440. Note any area a platform covers, such as an avatar over a header.
  38. 38 - **Icons:** a flat favicon SVG (fine detail turns to noise at 16 pixels), app icons at 192 and 512, a maskable 512 with the mark inside the central safe zone (about 14 percent padding per side), and a 180 touch icon.
  39. 39 - **Voice:** tone words, sample lines at every length (button, error, headline, email), and copy rules. Start with: no em dashes; use a period, a comma, or a colon.
  40. 40 - **Downloads:** every file, linked and named by use and size.
  41. 41 - **Sources and changes:** which script makes each file, and a short log per edition. Code paths go here, not in captions.
  42. 425. **Generate, do not hand-make.** Write one script that renders the icons and marks from the tokens and the mark geometry, and one that exports the share pack from the running renderer into `brand/share/` with a README table of file, size, and use. Rerun both after any token or mark change. A PNG needs no image library: Node's `zlib.deflateSync`, a CRC32, and the IHDR, IDAT, and IEND chunks are enough.
  43. 436. **Make it self-contained.** Inline CSS and JS, link images by relative path, no CDN scripts. Default to the reader's color scheme, add a theme toggle, and render swatches from the CSS variables so the book cannot drift from itself.
  44. 447. **Check it:**
  45. 45 `node scripts/check-brand.mjs --dir brand --out brand/check.json`
  46. 46 It confirms light and dark share token names, every contrast pair passes in both themes, every listed asset exists at its declared size, SVGs have a viewBox, and no copy file uses a banned string. Fix every failure before you call an edition done.
  47. 478. **Look at it.** Open the book in both themes and at phone width. Check the smallest logo size, the favicon in a real tab, and a share image in a link preview tool if one is at hand.
  48. 489. **Ship an edition.** Bump `edition` in `brand.json`, add a line to Sources and changes, regenerate the downloads, rerun the check, and copy what the site serves into `public/brand/`.
  49. 49
  50. 50## Rules
  51. 51
  52. 52- Every color, size, and font in the book comes from the tokens or the generators. No hand-typed duplicates.
  53. 53- Only use images, fonts, and marks the project owns or has the rights to. If an image's source is unknown, leave it out.
  54. 54- Mark colors pass 3 to 1 on every background they sit on, in both themes. Text colors pass 4.5 to 1. Report the worst case.
  55. 55- Keep secrets, private paths, and internal names out of the book. It is meant to be shared.
  56. 56- Do not commit large generated files unless the project already does; say where they are instead.
Sign in to comment on a line

Cookie settings

Cookies that keep you signed in and remember these choices are always on. Everything else is off until you turn it on.