brand-guidelines

# Brand Guidelines Skill Create comprehensive, platform-agnostic brand guidelines using Jungian archetypes and color psychology. ## Purpose Define brand IDENTITY that works across ALL platforms: - Web (any framework) - Mobile (iOS, Android, Flutter) - Print (marketing materials) - Social media Output: HEX colors and font names, NOT framework-specific code. ## The 12 Brand Archetypes | Archetype | Core Desire | Brand Voice | Color Direction | |-----------|-------------|-------------|-----------------| | **Innocent** | Safety, happiness | Optimistic, simple, honest | Soft pastels, white, sky blue | | **Sage** | Knowledge, truth | Expert, clear, trustworthy | Deep blues, greens, gray | | **Explorer** | Freedom, discovery | Adventurous, independent | Earth tones, rust, forest | | **Outlaw** | Revolution, liberation | Bold, rebellious, provocative | Black, red, orange | | **Magician** | Transformation | Visionary, inspiring, mysterious | Purple, deep blue, gold | | **Hero** | Mastery, courage | Empowering, confident, direct | Red, blue, gold | | **Lover** | Intimacy, experience | Passionate, sensual, elegant | Red, pink, burgundy | | **Jester** | Joy, fun | Playful, irreverent, entertaining | Bright, varied, yellow | | **Everyman** | Belonging | Relatable, honest, friendly | Neutral, warm brown, earth | | **Caregiver** | Service, nurturing | Compassionate, supportive, warm | Soft blue, green, white | | **Ruler** | Control, power | Authoritative, refined, premium | Navy, gold, burgundy | | **Creator** | Innovation, expression | Imaginative, artistic, expressive | Varied, artistic, bold | ## Archetype Selection by Product Type | Product Type | Primary | Secondary | Why | |--------------|---------|-----------|-----| | B2B SaaS | Sage | Magician | Trust + transformation | | Developer Tools | Sage | Creator | Knowledge + innovation | | E-commerce | Everyman | Caregiver | Accessible + supportive | | Fintech | Ruler | Sage | Authority + expertise | | Health/Wellness | Caregiver | Innocent | Care + purity | | Creative Tools | Creator | Magician | Expression + transformation | | Enterprise | Hero | Ruler | Achievement + authority | | Consumer App | Jester | Everyman | Fun + relatable | | Luxury | Ruler | Lover | Premium + desire | ## Color Palette Creation ### Step 1: Choose Primary Color Based on archetype, select a primary hue: | Archetype | Recommended Hues | Psychology | |-----------|------------------|------------| | Sage | Blue (200-240) | Trust, expertise, calm | | Magician | Purple (260-290) | Mystery, transformation | | Hero | Red (0-15) or Blue (210-230) | Energy, confidence | | Ruler | Navy (220-240) or Gold (40-50) | Authority, premium | | Creator | Any bold color | Creativity, uniqueness | ### Step 2: Generate 9-Shade Scale Use HSL to create shades from a base color: | Shade | Lightness | Saturation Adjust | Usage | |-------|-----------|-------------------|-------| | 50 | 97% | -5% | Lightest backgrounds | | 100 | 94% | -5% | Light backgrounds | | 200 | 86% | -3% | Light accents | | 300 | 74% | 0% | Borders | | 400 | 60% | 0% | Disabled states | | 500 | 50% | Base | Primary (base) | | 600 | 42% | +3% | Hover states | | 700 | 34% | +5% | Active/pressed | | 800 | 26% | +5% | Dark accents | | 900 | 18% | +5% | Darkest | ### Step 3: Add Semantic Colors | Role | HEX Example | Usage | |------|-------------|-------| | Success | #10B981 | Confirmations, positive feedback | | Warning | #F59E0B | Caution, attention needed | | Error | #EF4444 | Errors, destructive actions | | Info | #3B82F6 | Neutral information | ### Step 4: Create Neutral Grays Add brand tint to neutral grays: - **Cool tint** (blue): Professional, tech - **Warm tint** (yellow/brown): Friendly, approachable ## Typography Guidelines ### Font Pairing by Archetype | Archetype | Heading Style | Body Style | Examples | |-----------|---------------|------------|----------| | Sage | Geometric sans or serif | Clean sans | Inter, Source Sans Pro | | Magician | Modern sans | System stack | Manrope, Plus Jakarta Sans | | Hero | Bold sans | Clean sans | Montserrat, Roboto | | Ruler | Elegant serif | Refined sans | Playfair Display, Lora | | Creator | Display/artistic | Readable sans | Space Grotesk, Poppins | | Everyman | Friendly sans | System stack | Nunito, Open Sans | | Jester | Playful/rounded | Friendly sans | Nunito, Quicksand | ### Type Scale (4px Baseline) | Name | Size | Weight | Line Height | Usage | |------|------|--------|-------------|-------| | xs | 12px | 400 | 16px | Captions, footnotes | | sm | 14px | 400 | 20px | Labels, metadata | | base | 16px | 400 | 24px | Body text | | lg | 18px | 400 | 28px | Lead paragraphs | | xl | 20px | 600 | 28px | Small headings | | 2xl | 24px | 600 | 32px | Section headings | | 3xl | 30px | 700 | 36px | Page titles | | 4xl | 36px | 700 | 40px | Hero headings | | 5xl | 48px | 700 | 48px | Display | ## Voice & Tone by Archetype ### Sage Voice - **Tone**: Expert but accessible - **Do**: Explain complex topics simply, cite evidence, be precise - **Don't**: Be condescending, use jargon without explanation ### Magician Voice - **Tone**: Visionary and inspiring - **Do**: Paint possibilities, use transformative language - **Don't**: Over-promise, be vague about how ### Hero Voice - **Tone**: Empowering and confident - **Do**: Challenge and motivate, celebrate achievement - **Don't**: Be aggressive, diminish struggles ### Ruler Voice - **Tone**: Authoritative and refined - **Do**: Be confident, use premium language - **Don't**: Be elitist, talk down to users ### Creator Voice - **Tone**: Imaginative and expressive - **Do**: Inspire creativity, celebrate uniqueness - **Don't**: Be pretentious, dismiss simplicity ### Everyman Voice - **Tone**: Relatable and honest - **Do**: Use everyday language, be authentic - **Don't**: Try too hard to be cool, be generic ## brand.md Output Format ```markdown # Brand Guidelines > [Project Name] Brand Identity ## Brand Personality **Primary Archetype**: [Name] (70%) [Brief description] **Secondary Archetype**: [Name] (30%) [Brief description] ## Core Values 1. **[Value]**: [What it means] 2. **[Value]**: [What it means] 3. **[Value]**: [What it means] ## Color Palette ### Primary Colors | Name | HEX | Usage | |------|-----|-------| | Primary | #XXXXXX | CTAs, key elements | | Secondary | #XXXXXX | Supporting elements | | Accent | #XXXXXX | Highlights | ### Primary Scale | Shade | HEX | Usage | |-------|-----|-------| | 50 | #XXXXXX | Lightest backgrounds | | ... | ... | ... | | 900 | #XXXXXX | Darkest | ### Semantic Colors | Role | HEX | Usage | |------|-----|-------| | Success | #XXXXXX | Confirmations | | Warning | #XXXXXX | Cautions | | Error | #XXXXXX | Errors | | Info | #XXXXXX | Information | ## Typography ### Font Stack - **Headings**: [Font Name] - **Body**: [Font Name] - **Monospace**: [Font Name] ### Type Scale [Type scale table] ## Voice & Tone ### Brand Voice - [Attribute]: [Description] ### Tone by Context | Context | Tone | Example | |---------|------|---------| | Marketing | [Tone] | "[Example]" | | UI | [Tone] | "[Example]" | | Errors | [Tone] | "[Example]" | ### Writing Guidelines **Do:** - [Guideline] **Don't:** - [Anti-pattern] ``` ## Color Accessibility Ensure WCAG AA compliance: - **Normal text**: 4.5:1 contrast ratio - **Large text**: 3:1 contrast ratio - **UI elements**: 3:1 contrast ratio Test combinations: - Light text on dark backgrounds - Dark text on light backgrounds - Buttons and interactive elements ## References For detailed archetype color palettes and examples: - [references/brand-archetypes.md](references/brand-archetypes.md)