# 🎨 MorseQuest Brand Guidelines

## Visual Identity Overview

**MorseQuest** uses an adventure / quest theme that balances authenticity with modern educational design principles. The brand conveys exploration, learning, and technical mastery through a quest-driven aesthetic with gentle gaming elements.

## Color Palette

### Primary Colors
- **Quest Gold**: `#D4AF37` - Primary brand color, represents brass telegraph equipment and treasure
- **Adventure Blue**: `#4169E1` - Secondary brand color, represents quest gems and the open horizon
- **Brass**: `#CD7F32` - Accent color, represents authentic equipment and forged tools

### Secondary Colors
- **Aged Parchment**: `#F5E6D3` - Background color, represents quest scrolls
- **Deep Forest**: `#3C2415` - UI elements, represents night-camp and adventurer gear
- **Signal Gold**: `#FFD700` - Highlights and active states
- **Quest Red**: `#CC0000` - Error states and urgent CTAs

### Supporting Colors
- **Brass Dust**: `#B8860B` - Muted accent
- **Telegraph Wire**: `#654321` - Border and line elements
- **Gem Sky**: `#87CEEB` - Success states and achievements
- **Midnight**: `#191970` - Adventure-blue depth and emphasis

## Typography

### Primary Font Stack
**Headers**: `"Cinzel", "MedievalSharp", serif`
- Adventure-ready serif for main headings
- Conveys quest narrative and heroic tone
- Available via Google Fonts

**Body Text**: `"Open Sans", sans-serif`
- Clean, readable sans-serif for content
- Excellent cross-platform compatibility
- Accessible at all sizes

**Code/Morse**: `"Source Code Pro", monospace`
- Technical content and Morse code display
- Clear distinction between dots and dashes
- Professional development feel

### Typography Scale
- **Hero Text**: 48px - Main landing page titles
- **Page Headers**: 32px - Section titles
- **Subheaders**: 24px - Component headers
- **Body Text**: 16px - Standard reading content
- **Caption Text**: 14px - Secondary information
- **Small Text**: 12px - Legal/disclaimer text

## Logo Usage

### Primary Logo
**File**: `primary-logo.svg`
- Full horizontal logo with telegraph key and quest gem
- Use for main branding, headers, marketing materials
- Minimum width: 300px
- Clear space: 1x logo height on all sides

### Horizontal Logo
**File**: `logo-horizontal.svg`
- Compact version for headers and wide spaces
- Use when vertical space is limited
- Minimum width: 200px
- Clear space: 0.5x logo height on all sides

### Icon Logo
**File**: `logo-icon.svg`
- Icon-only version for favicons and app icons
- Use at 32px and larger
- Square format with telegraph key focus
- Minimum size: 16px

## Iconography

### UI Icons
All icons follow the brass/telegraph theme with quest accents:

**Telegraph Key**: `telegraph-key.svg`
- Primary interaction icon
- Represents Morse code input/practice
- Use at 24px, 32px, or 48px

**Morse Dot**: `morse-dot.svg`
- Represents short Morse signals
- Consistent with audio/visual learning
- Use at 16px, 24px

**Morse Dash**: `morse-dash.svg`
- Represents long Morse signals
- 2:1 aspect ratio maintains proper Morse timing
- Use at 32x16px, 48x24px

### Achievement Badges
**Novice Badge**: `badge-novice.svg`
- Bronze-colored for beginning ranks
- Adventure crest for the first steps of the quest
- 80x80px standard size

**Expert Badge**: `badge-expert.svg`
- Gold-colored for advanced ranks
- Star shape with gems for mastery
- 80x80px standard size

## Voice & Tone

### Brand Personality
- **Educational**: Clearly instructional but never condescending
- **Adventurous**: Quest theme with gentle humor
- **Encouraging**: Positive reinforcement, no penalties for mistakes
- **Authentic**: Historically accurate telegraph references
- **Inclusive**: Accessible to all ages and skill levels

### Writing Guidelines
- Use quest terminology naturally (adventurer, quest, level, achievement)
- Include "STOP" in telegraph messages for authenticity
- Keep humor gentle and family-friendly
- Write in active voice for clarity
- Avoid technical jargon without explanation

### Example Voice
```
✓ "Great work, adventurer! You've mastered that signal."
✓ "Telegraph line connected! Ready for your next quest."
✓ "Time to upgrade your equipment, expert operator!"

✗ "Incorrect response detected."
✗ "User failed validation check."
✗ "Error in Morse code processing."
```

### Quest Messaging
- **Success**: "Adventure complete!" / "Quest cleared!"
- **Encouragement on miss**: "Try again, adventurer!"
- **Connection issue**: "Quest interrupted — reconnecting telegraph lines..."
- **Level-up**: "Continue your adventure — new quest unlocked!"

## UI Design Principles

### Layout
- **Adventure Theme**: UI should feel like an evolving quest log and telegraph station
- **Progressive Enhancement**: Equipment "upgrades" as the player advances
- **Clear Hierarchy**: Important elements use primary colors
- **Breathing Room**: Generous white space prevents clutter

### Interactive Elements
- **Brass Styling**: Buttons and controls use metallic gradients
- **Quest Accents**: Adventure-blue gems mark critical actions
- **Telegraph Animations**: Key presses and signal sending
- **Scroll Effects**: Results appear as printed quest messages

### Accessibility
- **High Contrast**: All text meets WCAG AA standards
- **Color Independence**: Never rely solely on color for meaning
- **Touch Targets**: Minimum 44px touch targets on mobile
- **Screen Readers**: Proper ARIA labels and semantic HTML

## Animation & Motion

### Micro-Interactions
- **Telegraph Key Press**: 200ms spring animation
- **Signal Flash**: Synchronized with audio timing
- **Quest Scroll**: 500ms slide-in effect for results
- **Points Animation**: Satisfying score increment with sound

### Timing Standards
- **Morse Dot**: 300ms duration (visual and audio)
- **Morse Dash**: 900ms duration (3:1 ratio to dot)
- **Element Gap**: 300ms between elements
- **Character Gap**: 900ms between characters
- **Word Gap**: 2100ms between words

## Asset Specifications

### File Formats
- **Logos**: SVG (vector), PNG fallbacks
- **Icons**: SVG preferred, 24x24px minimum
- **Badges**: SVG, 80x80px standard
- **Backgrounds**: SVG patterns, CSS gradients

### Naming Convention
```
primary-logo.svg          - Main brand logo
logo-horizontal.svg       - Wide format logo
logo-icon.svg             - Icon/favicon version
telegraph-key.svg         - UI icon for telegraph key
morse-dot.svg             - Morse code dot symbol
morse-dash.svg            - Morse code dash symbol
badge-{rank}.svg          - Achievement badges
color-{name}.svg          - Color swatches
```

### Export Settings
- **SVG**: Optimized, remove unnecessary metadata
- **PNG**: 2x and 3x retina versions for fallbacks
- **Favicon**: 16x16, 32x32, 48x48 ICO format
- **Web**: Optimized for fast loading

## Brand Applications

### Website Header
- Use horizontal logo at 300px width
- Quest gold (#D4AF37) on aged parchment background
- Include tagline: "Learn Morse Code • Master Amateur Radio • Adventure Awaits"

### Mobile App Icon
- Use icon logo version
- Ensure visibility at 16px for favicons
- Include proper iOS and Android format exports

### Educational Materials
- Primary logo for official documents
- Consistent color usage throughout
- Professional typography for credibility

### Social Media
- Square icon version for profile images
- Horizontal logo for cover images
- Consistent messaging and visual style

## Brand Don'ts

### Visual
- ❌ Don't distort logo proportions
- ❌ Don't use colors outside the defined palette
- ❌ Don't add drop shadows to logos
- ❌ Don't use the logo smaller than minimum sizes
- ❌ Don't place logos on busy backgrounds

### Voice
- ❌ Don't use overly complex fantasy slang
- ❌ Don't make jokes about failure or mistakes
- ❌ Don't use technical jargon without explanation
- ❌ Don't break the fourth wall unnecessarily

### Theme
- ❌ Don't lean into specific historical periods (no Wild West, no medieval-only)
- ❌ Don't use violent or aggressive imagery
- ❌ Don't stereotype or caricature cultures
- ❌ Don't sacrifice accessibility for aesthetic

## Implementation Checklist

### Development
- [ ] All colors defined as CSS custom properties
- [ ] Logo SVGs properly optimized and embedded
- [ ] Icon system implemented consistently
- [ ] Typography loaded with fallback fonts
- [ ] Brand voice implemented in all copy

### Quality Assurance
- [ ] Brand consistency across all pages
- [ ] Accessibility standards met (WCAG AA)
- [ ] Mobile responsiveness maintained
- [ ] Loading performance optimized
- [ ] Cross-browser compatibility verified

---

**This brand system creates a cohesive, educational, and engaging experience that honors the heritage of amateur radio while making it accessible and fun for modern adventurers.**