diff --git a/claude-skills/brand-guidelines.md b/claude-skills/brand-guidelines.md new file mode 100644 index 0000000..0d5dce8 --- /dev/null +++ b/claude-skills/brand-guidelines.md @@ -0,0 +1,54 @@ +--- +name: brand-guidelines +description: Audit and enforce brand consistency across UI, copy, and assets. Use when reviewing designs, copy, or code for brand alignment. +--- + +# Brand Guidelines Skill + +Use when: reviewing a new feature's UI, writing copy, creating assets, or checking that output matches the brand. + +## Before Starting +Ask the user for (or check the repo for): +- Brand colors (primary, secondary, accent, neutrals) +- Typography (heading font, body font, sizes) +- Logo usage rules (clearspace, minimum size, forbidden treatments) +- Voice & tone guidelines +- Approved imagery style + +## Audit Checklist + +### Color +- [ ] Only approved brand colors used? +- [ ] No off-brand gradients or tints? +- [ ] Interactive states still use brand palette? + +### Typography +- [ ] Correct font families loaded and applied? +- [ ] Heading hierarchy matches brand spec? +- [ ] No unauthorized font weights or styles? + +### Logo & Marks +- [ ] Correct logo file (SVG preferred)? +- [ ] Minimum clearspace respected? +- [ ] Not stretched, recolored, or modified? + +### Voice & Tone +- [ ] Formal vs casual matches brand persona? +- [ ] Industry jargon level appropriate for audience? +- [ ] Consistent terminology (don't mix "sign in"/"log in")? +- [ ] Active voice, second person ("you"), present tense? + +### Imagery & Icons +- [ ] Icon style consistent (line vs filled, weight, corner radius)? +- [ ] Photography style matches brand (candid vs staged, diversity)? +- [ ] Illustrations match brand style guide? + +### Spacing & Layout +- [ ] Grid system consistent with brand templates? +- [ ] White space usage matches brand's density preference? + +## Output +List violations by category with: +- Location (component/page/file) +- What's wrong +- What it should be per guidelines