Brand Guidelines Generator
Create and maintain brand style guides for consistent visual identity
Install
npx skills add https://github.com/claude-office-skills/skills --skill brand-guidelines-generatorSKILL.md
Brand Guidelines Generator
Create comprehensive brand guidelines to ensure consistent visual and verbal identity.
Overview
This skill helps you:
- Create brand style guides from scratch
- Document existing brand elements
- Define usage rules and examples
- Maintain brand consistency
How to Use
Create New Guidelines
"Create brand guidelines for [Company Name]"
"Help me document our brand identity"
"Generate a style guide based on our logo and colors"
Update Existing
"Add social media guidelines to our brand guide"
"Update our color palette documentation"
"Define voice and tone guidelines"
Brand Guidelines Structure
Complete Guide Template
# [Brand Name] Brand Guidelines
## Table of Contents
1. Brand Overview
2. Logo Usage
3. Color Palette
4. Typography
5. Imagery
6. Voice & Tone
7. Applications
8. Do's and Don'ts
---
## 1. Brand Overview
### Mission
[One sentence: Why does the brand exist?]
### Vision
[One sentence: What future does the brand aspire to?]
### Values
- [Value 1]: [Brief description]
- [Value 2]: [Brief description]
- [Value 3]: [Brief description]
### Brand Personality
[3-5 adjectives that describe the brand]
Example: Innovative, Approachable, Trustworthy
### Target Audience
[Primary and secondary audience descriptions]
---
## 2. Logo Usage
### Primary Logo
[Logo image placeholder]
### Logo Variations
- **Primary**: Full color, horizontal
- **Secondary**: Stacked/vertical
- **Icon/Mark**: Symbol only
- **Wordmark**: Text only
### Clear Space
Minimum clear space around logo: [X] times the height of [element]
### Minimum Sizes
- Print: [X] inches / [Y] mm
- Digital: [X] pixels
### Logo Colors
| Version | Use Case |
|---------|----------|
| Full Color | Primary use on white/light backgrounds |
| Reversed | On dark backgrounds |
| Monochrome | Single-color printing |
### Logo Don'ts
- ❌ Don't stretch or distort
- ❌ Don't rotate
- ❌ Don't change colors
- ❌ Don't add effects (shadows, gradients)
- ❌ Don't place on busy backgrounds
---
## 3. Color Palette
### Primary Colors
| Color | Hex | RGB | CMYK | Pantone |
|-------|-----|-----|------|---------|
| [Name] | #XXXXXX | R, G, B | C, M, Y, K | XXXX C |
### Secondary Colors
[Same format as above]
### Accent Colors
[Same format as above]
### Color Usage
- **Primary Blue**: Headlines, CTAs, primary elements
- **Secondary Gray**: Body text, borders
- **Accent Green**: Success states, highlights
### Accessibility
All text must meet WCAG 2.1 AA contrast requirements:
- Normal text: 4.5:1 minimum
- Large text: 3:1 minimum
---
## 4. Typography
### Primary Font
**[Font Name]** - [Source/License]
| Style | Weight | Use |
|-------|--------|-----|
| Heading 1 | Bold (700) | Page titles |
| Heading 2 | Semi-bold (600) | Section headers |
| Body | Regular (400) | Paragraph text |
| Caption | Light (300) | Small text, captions |
### Secondary Font
**[Font Name]** - [When to use]
### Font Sizes
| Element | Desktop | Mobile |
|---------|---------|--------|
| H1 | 48px | 32px |
| H2 | 36px | 24px |
| H3 | 24px | 20px |
| Body | 16px | 16px |
| Small | 14px | 14px |
### Line Heights
- Headings: 1.2
- Body text: 1.5
- Small text: 1.4
---
## 5. Imagery
### Photography Style
- [Lighting]: Natural, bright
- [Composition]: Clean, minimal
- [Subjects]: Real people, authentic moments
- [Mood]: [Aspirational/Professional/Friendly]
### Illustration Style
[If applicable - describe style, colors, line weights]
### Iconography
- Style: [Outline/Filled/Duotone]
- Stroke width: [X]px
- Corner radius: [X]px
- Grid size: [24x24, 16x16]
### Image Don'ts
- ❌ No stock photos that look staged
- ❌ No outdated technology
- ❌ No images that conflict with brand values
---
## 6. Voice & Tone
### Brand Voice
Our voice is: [Adjective], [Adjective], [Adjective]
| We Are | We Are Not |
|--------|------------|
| Friendly | Casual |
| Confident | Arrogant |
| Clear | Simplistic |
| Helpful | Pushy |
### Tone by Context
| Context | Tone | Example |
|---------|------|---------|
| Marketing | Inspiring | "Transform your workflow" |
| Support | Empathetic | "We understand this is frustrating" |
| Error Messages | Helpful | "Let's fix this together" |
| Legal | Clear | "Your data is protected" |
### Writing Guidelines
- Use active voice
- Keep sentences short (15-20 words)
- Avoid jargon unless necessary
- Address the reader directly ("you")
---
## 7. Applications
### Business Cards
[Specifications and layout]
### Email Signature
[Name] [Title] [Company] [Phone] | [Email] [Website]
### Social Media
| Platform | Profile Image | Cover Size |
|----------|---------------|------------|
| LinkedIn | 400x400px | 1128x191px |
| Twitter | 400x400px | 1500x500px |
| Facebook | 170x170px | 820x312px |
### Presentation Templates
[Slide specifications and examples]
---
## 8. Do's and Don'ts
### Do's ✅
- Use approved color combinations
- Maintain clear space around logo
- Follow typography hierarchy
- Use high-quality images
- Stay consistent across channels
### Don'ts ❌
- Alter logo proportions
- Use off-brand colors
- Mix too many fonts
- Use low-resolution assets
- Deviate without approval
Quick Reference Card
# [Brand] Quick Reference
## Colors
🔵 Primary: #XXXXXX
⚪ Secondary: #XXXXXX
🟢 Accent: #XXXXXX
## Fonts
Headlines: [Font] Bold
Body: [Font] Regular
## Logo
- Minimum size: XXpx
- Clear space: Xpx
- File formats: SVG, PNG, PDF
## Voice
[3 key adjectives]
Limitations
- Cannot create visual assets (logos, images)
- Color specifications should be verified
- Typography licensing is user's responsibility
- Legal review recommended for usage rights
Related skills
frontend-designanthropics932KGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.prototypemattpocock852KBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.hyperframes-animationheygen-com569KAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreographyhyperframes-creativeheygen-com539KNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.
