allen
7ea8f12a31
- Complete Product Requirements Document with full technical specs - MorseQuest adventure-based branding and visual identity - All logos, icons, and brand assets ready for development - Freemium business model ($9.95/year, first year free launch strategy) - Ready for Keylink IT Forge platform deployment Phase 1 MVP ready to begin (10-12 week timeline)
262 lines
8.6 KiB
Markdown
262 lines
8.6 KiB
Markdown
# 🎨 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.**
|