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: