morsequest/docs/BRAND_GUIDELINES.md

🎨 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.