brand-guidelines

name brand-guidelines description Establish or analyze brand identity guidelines. Creates comprehensive brand documentation that frontend-design, testing, and other skills automatically reference for consistent execution. Brand Guidelines Core Principle Consistent brand identity across all outputs. Establish comprehensive brand guidelines once, then automatically apply them across design, development, and testing workflows. Overview This skill helps you either: Create brand guidelines from scratch by asking strategic questions Analyze existing branding in a project to document current state Update existing guidelines as the brand evolves Once established, these guidelines are automatically referenced by other skills (frontend-design, playwright-frontend-testing, etc.) to ensure brand consistency. When to Use This Skill Starting a new project - Establish brand identity before development Rebranding - Update guidelines for brand refresh Documenting existing brand - Analyze and codify current branding Onboarding projects - Document brand for new team members Brand audit - Review current brand consistency Before design work - Ensure frontend-design has clear guidelines Prerequisites For creating new guidelines: Brand strategy or vision (if available) Target audience understanding Competitive landscape knowledge For analyzing existing brand: Access to existing website/application Marketing materials (if available) Logo files and assets The Iron Laws 1. GUIDELINES BEFORE DESIGN NEVER start design work without brand guidelines established. ❌ FORBIDDEN sequence: Start project → Use frontend-design → Random aesthetic choices ✅ REQUIRED sequence: Start project → brand-guidelines → frontend-design (with guidelines) → consistent output Authority : 70% of brand inconsistencies stem from lack of documented guidelines. 2. STORE IN STANDARD LOCATION Brand guidelines MUST be stored at: .claude/BRAND-GUIDELINES.md (primary file) .claude/brand/ (supporting assets: color swatches, logo files, etc.) Why : Consistent location allows automatic discovery by other skills. 3. KEEP GUIDELINES ACTIONABLE Guidelines must be specific and implementable: ❌ BAD : "Use modern colors" ✅ GOOD : "Primary: #2563EB, Secondary: #7C3AED, Accent: #F59E0B" ❌ BAD : "Professional tone" ✅ GOOD : "Direct and confident. Active voice. Technical accuracy without jargon." Brand Guidelines Protocol Step 1: Announce Usage Template: I'm using the brand-guidelines skill to [establish/analyze/update] brand identity for this project. This will create comprehensive guidelines at .claude/BRAND-GUIDELINES.md that other skills will automatically reference. Step 2: Choose Approach Option A: Create New Guidelines (Interactive Discovery) Ask strategic questions to establish brand identity. Option B: Analyze Existing Brand (Project Analysis) Review existing codebase, website, or materials to document current branding. Option C: Update Existing Guidelines Read .claude/BRAND-GUIDELINES.md and update specific sections. Creating New Guidelines (Interactive Discovery) Discovery Questions Identity & Positioning: 1. Brand Name: What is the product/company name? 2. Tagline: Do you have a tagline or positioning statement? 3. Industry: What industry/category? 4. Target Audience: Who are your primary users/customers? 5. Brand Personality: If your brand was a person, how would you describe them? (Examples: Professional, Playful, Bold, Elegant, Technical, Approachable) 6. Differentiation: What makes you different from competitors? Visual Identity: 7. Color Preferences: Any specific colors that represent your brand? - Primary color (main brand color) - Secondary color (supporting color) - Accent colors (calls-to-action, highlights) - Neutral colors (backgrounds, text) - Color meanings (why these colors?) 8. Typography Direction: - Display/Heading style: (Serif, Sans-serif, Geometric, Humanist, etc.) - Body text style: (Readability priority) - Technical/Monospace needs: (Code, data, technical content) - Character: (Modern, Classic, Playful, Professional, etc.) 9. Visual Style: - Minimal or Maximal? - Flat or Dimensional (shadows, depth)? - Rounded or Angular (border radius style)? - Photography style: (Real, Illustrations, Abstract, 3D)? - Icon style: (Line, Filled, Duotone)? Tone & Voice: 10. Communication Style: - Formal or Casual? - Technical or Accessible? - Emotional or Rational? - Playful or Serious? 11. Brand Values: Top 3-5 values your brand embodies? (Examples: Innovation, Reliability, Transparency, Creativity, Speed) 12. Example Brands: Any brands whose aesthetic you admire? (For inspiration, not copying) Technical Constraints: 13. Accessibility Requirements: WCAG level? (A, AA, AAA) 14. Browser Support: Any specific requirements? 15. Performance Priorities: Speed vs. Visual richness trade-offs? 16. Existing Assets: Logo files, brand book, style guides? Question Flow Use AskUserQuestion tool for efficient gathering: Ask in batches: - Batch 1: Identity (questions 1-6) - Batch 2: Visual Identity (questions 7-9) - Batch 3: Communication (questions 10-12) - Batch 4: Technical (questions 13-16) Analyzing Existing Brand (Project Analysis) Analysis Workflow 1. Scan project structure: - Check for existing brand documents - Look for style guides, design systems - Find logo/asset directories 2. Analyze visual implementation: - Extract colors from CSS/theme files - Identify font families in use - Review component patterns - Check spacing/sizing systems 3. Review content: - Analyze tone in copy - Check messaging consistency - Identify voice patterns 4. Document findings: - Current state documentation - Inconsistencies found - Recommendations for alignment Commands to run: # Find existing brand/design docs find . - type f -name "*brand*" -o -name "*style*guide*" -o -name "*design*system*" # Check CSS for color variables grep -r "color\|#[0-9a-fA-F]" --include= "*.css" --include= "*.scss" # Find font declarations grep -r "font-family" --include= "*.css" --include= "*.scss" --include= "*.js" # Look for design tokens find . -name "*token*" -o -name "*theme*" -o -name "*variables*" Brand Guidelines Document Structure Complete Template Create .claude/BRAND-GUIDELINES.md : # Brand Guidelines: [Project Name] **Version** : 1.0 **Last Updated** : [Date] **Status** : Active --- ## 🎯 Brand Identity ### Name & Positioning - **Brand Name** : [Name] - **Tagline** : [Tagline] - **Industry** : [Industry] - **Target Audience** : [Primary audience description] ### Brand Personality [Describe brand as a person - 2-3 sentences] **Key Traits** : - [Trait 1] - [Trait 2] - [Trait 3] ### Differentiation [What makes this brand unique - 1-2 sentences] --- ## 🎨 Visual Identity ### Color Palette **Primary Colors** : ```css --color-brand-primary: #[HEX]; /* [Usage: Main brand color, CTAs, headers] */ --color-brand-primary-dark: #[HEX]; /* [Usage: Hover states, emphasis] */ --color-brand-primary-light: #[HEX]; /* [Usage: Backgrounds, subtle highlights] */ Secondary Colors : --color-brand-secondary : #[HEX]; /* [Usage: Supporting elements] */ --color-brand-secondary-dark : #[HEX]; /* [Usage: Contrast] */ --color-brand-secondary-light : #[HEX]; /* [Usage: Backgrounds] */ Accent Colors : --color-accent-1 : #[HEX]; /* [Usage: Important CTAs] */ --color-accent-2 : #[HEX]; /* [Usage: Highlights, badges] */ --color-accent-3 : #[HEX]; /* [Usage: Alternative actions] */ Neutral Colors : --color-neutral-black : #[HEX]; /* [Usage: Primary text] */ --color-neutral-900 : #[HEX]; /* [Usage: Headings] */ --color-neutral-700 : #[HEX]; /* [Usage: Body text] */ --color-neutral-500 : #[HEX]; /* [Usage: Secondary text] */ --color-neutral-300 : #[HEX]; /* [Usage: Borders, dividers] */ --color-neutral-100 : #[HEX]; /* [Usage: Backgrounds] */ --color-neutral-white : #[HEX]; /* [Usage: White surfaces] */ Semantic Colors : --color-success : #[HEX]; /* [Usage: Success messages] */ --color-warning : #[HEX]; /* [Usage: Warnings] */ --color-error : #[HEX]; /* [Usage: Errors] */ --color-info : #[HEX]; /* [Usage: Information] */ Color Usage Rules : Primary color: 60% of interface Secondary color: 30% of interface Accent colors: 10% for emphasis Maintain 4.5:1 contrast ratio minimum (WCAG AA) Never use primary on secondary without neutral buffer Typography Display/Heading Font : Family : [Font name] Weights : [List: 700 Bold, 600 Semibold, etc.] Source : [Google Fonts/Adobe Fonts/Self-hosted] Fallback : [Fallback stack] Usage : Headings (H1-H3), Hero text, Prominent UI labels Body Font : Family : [Font name] Weights : [List: 400 Regular, 500 Medium, 700 Bold] Source : [Source] Fallback : [Fallback stack] Usage : Body text, Paragraphs, Form labels, UI text Monospace Font (if applicable): Family : [Font name] Usage : Code blocks, Technical data, Monospaced numbers Typography Scale : --font-size-xs : 0.75rem ; /* 12px - Captions, labels */ --font-size-sm : 0.875rem ; /* 14px - Small text */ --font-size-base : 1rem ; /* 16px - Body text */ --font-size-lg : 1.125rem ; /* 18px - Large body */ --font-size-xl : 1.25rem ; /* 20px - Small headings */ --font-size-2xl : 1.5rem ; /* 24px - H3 */ --font-size-3xl : 1.875rem ; /* 30px - H2 */ --font-size-4xl : 2.25rem ; /* 36px - H1 */ --font-size-5xl : 3rem ; /* 48px - Hero */ Line Heights : Headings: 1.2 Body text: 1.6 Small text: 1.4 Typography Rules : Never use more than 2 font families Headings: [Display font] + [Weight] Body: [Body font] + Regular (400) Emphasis: Same font + Medium/Bold weight (not color change) Spacing System --space-xs : 0.25rem ; /* 4px */ --space-sm : 0.5rem ; /* 8px */ --space-md : 1rem ; /* 16px */ --space-lg : 1.5rem ; /* 24px */ --space-xl : 2rem ; /* 32px */ --space-2xl : 3rem ; /* 48px */ --space-3xl : 4rem ; /* 64px */ Usage : Component padding: --space-md to --space-lg Section spacing: --space-2xl to --space-3xl Element gaps: --space-sm to --space-md Border Radius --radius-sm : 0.25rem ; /* 4px - Subtle rounding */ --radius-md : 0.5rem ; /* 8px - Standard */