Major Updates: - Implement Meilisearch-inspired design system (purple/pink gradients) - Complete frontend polish for all views (Home, Search, Document, Jobs) - Add PDF.js document viewer with full page navigation - Create real-time Jobs dashboard with auto-refresh - Fix Meilisearch authentication (generated secure master key) - Configure Vite for WSL2 → Windows browser access (host: 0.0.0.0) Frontend Components: - HomeView: Hero section, gradient search bar, feature cards, footer - SearchView: Real-time search, highlighted matches, result cards - DocumentView: PDF.js viewer, dark theme, page controls - JobsView: NEW - Real-time job tracking, progress bars, status badges Design System: - Colors: Purple (#d946ef) & Pink (#f43f5e) gradients - Typography: Inter font family (300-900 weights) - Components: Gradient buttons, backdrop blur, smooth animations - Responsive: Mobile-friendly layouts with Tailwind CSS Infrastructure: - Service management scripts (start-all.sh, stop-all.sh) - Comprehensive documentation in docs/handover/ - Frontend quickstart guide for WSL2 users - Master roadmap with verticals & horizontals strategy Documentation: - Complete handover documentation - Frontend polish summary with all changes - Branding creative brief for designers - Yacht management features roadmap - Platform strategy (4 verticals, 17 horizontals) Build Status: - Clean build with no errors - Bundle size: 150KB gzipped - Dev server on port 8080 (accessible from Windows) - Production ready 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
542 lines
17 KiB
Markdown
542 lines
17 KiB
Markdown
# NaviDocs - Creative Brief for Logo & Branding
|
|
|
|
**Date:** 2025-10-19
|
|
**Project:** NaviDocs Brand Identity & Logo Design
|
|
**Audience:** Graphics Artist / Brand Designer
|
|
**Status:** Initial Brief
|
|
|
|
---
|
|
|
|
## 1. Project Overview
|
|
|
|
### What is NaviDocs?
|
|
|
|
**NaviDocs** is a professional marine documentation management platform that helps boat owners, marina managers, and yacht brokers organize, search, and access boat manuals, maintenance records, and equipment documentation.
|
|
|
|
**The Core Problem:**
|
|
Boat owners have dozens of manuals (engine, electronics, safety equipment) scattered across physical files, email attachments, and USB drives. When their engine fails 20 miles offshore, they can't find the troubleshooting section they need.
|
|
|
|
**Our Solution:**
|
|
Upload → OCR → Intelligent Search → Offline Access
|
|
|
|
Users upload PDFs, our system automatically extracts and indexes the text, and provides lightning-fast search with boat terminology understanding (e.g., searching "bilge" also finds "sump pump").
|
|
|
|
### Key Differentiators
|
|
|
|
1. **Offline-First PWA** - Works without cell signal (critical for boating)
|
|
2. **Intelligent Search** - Understands boat terminology and technical jargon
|
|
3. **Multi-Vertical** - Expandable from boats → marinas → properties
|
|
4. **Professional Tool** - Not a consumer app, a serious business tool
|
|
|
|
---
|
|
|
|
## 2. Target Audience
|
|
|
|
### Primary Users
|
|
|
|
**Boat Owners (Individual)**
|
|
- Age: 35-65
|
|
- Demographics: Upper-middle class, technical proficiency varies
|
|
- Values: Reliability, safety, organization, preparedness
|
|
- Pain Point: "Where's that manual?" during emergencies
|
|
|
|
**Marina Managers**
|
|
- Age: 40-60
|
|
- Demographics: Professional, manages 50-200 boats/slips
|
|
- Values: Efficiency, compliance, documentation for insurance
|
|
- Pain Point: Managing manuals for shared equipment across multiple boats
|
|
|
|
**Yacht Brokers / Marine Surveyors**
|
|
- Age: 35-55
|
|
- Demographics: Professional, sales/technical hybrid
|
|
- Values: Complete documentation = higher resale value
|
|
- Pain Point: Need proof of maintenance and equipment specs during sales
|
|
|
|
### Secondary Users
|
|
|
|
- Property managers (future vertical expansion)
|
|
- HOA boards (document management for common areas)
|
|
- Equipment technicians (service history tracking)
|
|
|
|
---
|
|
|
|
## 3. Brand Personality
|
|
|
|
### Brand Attributes (Ranked by Importance)
|
|
|
|
1. **Professional** (90%) - This is a serious tool, not a toy
|
|
2. **Trustworthy** (90%) - Stores critical safety documentation
|
|
3. **Reliable** (85%) - Works when you need it (offline)
|
|
4. **Technical** (70%) - Appeals to engineers and technical users
|
|
5. **Accessible** (65%) - But not intimidating to non-technical boat owners
|
|
6. **Nautical** (50%) - Marine connection without being cliché
|
|
7. **Modern** (70%) - Contemporary tech, not legacy software
|
|
|
|
### Brand Voice
|
|
|
|
**We ARE:**
|
|
- Clear and concise
|
|
- Confident without arrogance
|
|
- Technical without jargon
|
|
- Helpful and solution-oriented
|
|
|
|
**We ARE NOT:**
|
|
- Playful or whimsical
|
|
- Emoji-heavy or casual
|
|
- Consumer-app-style "delightful"
|
|
- Nautical kitsch (no anchors, ship wheels, or pirates)
|
|
|
|
### Design Philosophy
|
|
|
|
**Inspired by:** [Meilisearch.com](https://www.meilisearch.com/)
|
|
|
|
**Visual Language:**
|
|
- Clean, spacious layouts with generous whitespace
|
|
- Professional SVG icons (no emoji, no illustrations)
|
|
- Muted color palette (grays, blues, whites)
|
|
- Typography: SF Pro / Inter / Roboto (system fonts)
|
|
- **"Expensive, grown-up aesthetic"** - feels like enterprise software, not a startup
|
|
|
|
**Think:** GitHub, Linear, Notion (professional tools)
|
|
**NOT:** Duolingo, Mailchimp, Slack (playful consumer apps)
|
|
|
|
---
|
|
|
|
## 4. Visual Direction
|
|
|
|
### Color Palette Suggestions
|
|
|
|
**Primary Colors:**
|
|
|
|
**Navy Blue (#0F172A to #1E3A8A)**
|
|
- Represents: Ocean, depth, professionalism, trust
|
|
- Use: Primary brand color, headers, CTAs
|
|
- Psychology: Reliable, stable, technical
|
|
|
|
**Ocean Blue (#3B82F6 to #60A5FA)**
|
|
- Represents: Water, clarity, search/discovery
|
|
- Use: Accents, interactive elements, links
|
|
- Psychology: Clear, accessible, modern
|
|
|
|
**Neutral Grays (#F1F5F9 to #475569)**
|
|
- Represents: Professionalism, sophistication
|
|
- Use: Backgrounds, text, borders
|
|
- Psychology: Clean, uncluttered, focused
|
|
|
|
**Accent Options:**
|
|
- **Teal/Cyan (#06B6D4)** - Search highlights, success states
|
|
- **Amber (#F59E0B)** - Warnings, attention (e.g., "Manual expired")
|
|
- **White (#FFFFFF)** - Backgrounds, breathing room
|
|
|
|
**Avoid:**
|
|
- Bright reds (emergency connotations)
|
|
- Lime greens (consumer-app feel)
|
|
- Purple/pink (wrong industry association)
|
|
- Overly saturated colors
|
|
|
|
### Typography Suggestions
|
|
|
|
**Headings:**
|
|
- **SF Pro Display** (Apple-style, clean)
|
|
- **Inter** (geometric, modern, excellent at all sizes)
|
|
- **Poppins** (slightly rounded, friendly but professional)
|
|
|
|
**Body Text:**
|
|
- **Inter** (excellent readability)
|
|
- **Roboto** (neutral, technical)
|
|
- **System fonts** (performance + native feel)
|
|
|
|
**Code/Technical:**
|
|
- **JetBrains Mono** (if displaying file names or technical specs)
|
|
|
|
### Iconography Style
|
|
|
|
**Style:** Outlined icons with 2px stroke weight (not filled)
|
|
|
|
**Examples:**
|
|
- Document icon (page with folded corner)
|
|
- Search icon (magnifying glass)
|
|
- Upload icon (cloud with up arrow or page with up arrow)
|
|
- Boat/vessel icon (simple side profile, not detailed)
|
|
|
|
**References:**
|
|
- Heroicons (outline style)
|
|
- Feather Icons
|
|
- Phosphor Icons
|
|
|
|
---
|
|
|
|
## 5. Logo Requirements
|
|
|
|
### Core Concept Ideas
|
|
|
|
**Option A: "Navi" Compass Rose**
|
|
- Stylized compass rose or navigation icon
|
|
- Represents: Navigation, direction, marine context
|
|
- Modern interpretation: Geometric, minimal, not detailed
|
|
- Could work as: Single icon or icon + wordmark
|
|
|
|
**Option B: Document + Wave**
|
|
- Abstract representation of a document with a wave element
|
|
- Represents: Documentation (pages) + marine (water)
|
|
- Style: Clean lines, geometric, modern
|
|
- Could work as: Icon that sits next to "NaviDocs" wordmark
|
|
|
|
**Option C: Search Beacon**
|
|
- Stylized search icon (magnifying glass) integrated with a navigation beacon/lighthouse
|
|
- Represents: Finding information, guidance, reliability
|
|
- Style: Geometric, symmetrical, strong
|
|
- Could work as: Standalone icon or integrated mark
|
|
|
|
**Option D: "ND" Monogram**
|
|
- Lettermark using N and D
|
|
- Geometric, interlocking letters
|
|
- Represents: Professional, scalable, timeless
|
|
- Could work as: App icon, favicon, minimal contexts
|
|
|
|
**Option E: Abstract Boat + Pages**
|
|
- Very abstract boat silhouette created from document/page shapes
|
|
- Represents: Core function (boats + documentation)
|
|
- Style: Clever negative space, geometric
|
|
- Could work as: Memorable mark, storytelling element
|
|
|
|
### Logo Variants Needed
|
|
|
|
1. **Primary Logo** - Full wordmark with icon (horizontal layout)
|
|
2. **Stacked Logo** - Icon above wordmark (vertical, for square spaces)
|
|
3. **Icon Only** - Standalone mark (app icon, favicon)
|
|
4. **Wordmark Only** - Text-only version (for tight spaces)
|
|
5. **Monochrome** - Single color version (for print, watermarks)
|
|
6. **Reversed** - Light version for dark backgrounds
|
|
|
|
### Technical Specifications
|
|
|
|
**File Formats Required:**
|
|
- SVG (vector, primary format)
|
|
- PNG (transparent background, multiple sizes: 512x512, 256x256, 128x128, 64x64, 32x32, 16x16)
|
|
- PDF (for print)
|
|
- Favicon formats (16x16, 32x32, .ico)
|
|
|
|
**Use Cases:**
|
|
- **Web header** (horizontal logo, ~40px height)
|
|
- **App icon** (iOS/Android, 512x512, rounded square)
|
|
- **Favicon** (16x16, must be recognizable at tiny size)
|
|
- **PWA splash screen** (various sizes)
|
|
- **Email signature** (horizontal logo, ~150px width)
|
|
- **Social media** (profile picture 400x400, cover image 1500x500)
|
|
- **Print materials** (business cards, letterhead - if needed)
|
|
|
|
**Safe Area:**
|
|
- Minimum clear space around logo: 25% of logo height
|
|
- Must be readable at 16x16 pixels (favicon test)
|
|
- Works in full color, grayscale, and monochrome
|
|
|
|
**Accessibility:**
|
|
- Sufficient contrast ratio (WCAG AA: 4.5:1 for text)
|
|
- Recognizable in black & white (for fax, photocopies)
|
|
- Distinct silhouette (identifiable without color)
|
|
|
|
---
|
|
|
|
## 6. Naming & Wordmark
|
|
|
|
### Product Name
|
|
|
|
**NaviDocs**
|
|
- Pronunciation: "NAVVY-docs" (rhymes with "savvy")
|
|
- Breakdown: "Navi" (navigation) + "Docs" (documents)
|
|
- Capitalization: **NaviDocs** (camelCase preferred) or **NAVIDOCS** (all caps acceptable)
|
|
|
|
### Tagline Options (for consideration)
|
|
|
|
1. "Professional Marine Documentation Management"
|
|
2. "Your Boat Manuals, Organized"
|
|
3. "Documentation at Your Fingertips"
|
|
4. "Marine Documentation, Simplified"
|
|
5. "Manuals That Work Offshore"
|
|
|
|
(Tagline may or may not be part of logo - designer's choice)
|
|
|
|
### Wordmark Typography Considerations
|
|
|
|
- **Modern sans-serif** (geometric or humanist)
|
|
- **Weight:** Medium to Bold (readable at small sizes)
|
|
- **Spacing:** Generous letter-spacing for clarity
|
|
- **Case:** Prefer mixed case "NaviDocs" over all caps
|
|
- **Customization:** Consider custom letterforms for "N" or "D" if creating unique mark
|
|
|
|
---
|
|
|
|
## 7. Competitive Context
|
|
|
|
### Direct Competitors (Inspiration - NOT to Copy)
|
|
|
|
**What They Do Right:**
|
|
- **Notion** - Clean, minimal, professional icon
|
|
- **Linear** - Geometric precision, modern feel
|
|
- **GitHub** - Instantly recognizable silhouette
|
|
- **Meilisearch** - Spacious layouts, professional aesthetic
|
|
|
|
**What They Do Wrong (for our context):**
|
|
- **Evernote** - Elephant is too playful
|
|
- **Dropbox** - Open box feels consumer-grade
|
|
- **Boat-specific apps** - Often too nautical-kitschy (anchors, ropes, wheels)
|
|
|
|
### Differentiation
|
|
|
|
**How NaviDocs Should Feel Different:**
|
|
|
|
1. **More Professional** than consumer file storage (Dropbox, Google Drive)
|
|
2. **More Accessible** than enterprise document management (SharePoint, Confluence)
|
|
3. **More Modern** than legacy marine software (often outdated UI)
|
|
4. **More Focused** than general-purpose tools (we're specialists)
|
|
|
|
**Brand Positioning Statement:**
|
|
"NaviDocs is the professional-grade documentation platform for marine professionals and serious boat owners who demand reliability when it matters most."
|
|
|
|
---
|
|
|
|
## 8. Design Constraints & Considerations
|
|
|
|
### Must-Haves
|
|
|
|
1. **Scalability** - Must work from 16x16 favicon to billboard
|
|
2. **Simplicity** - No more than 3 colors in primary logo
|
|
3. **Memorability** - Recognizable after seeing once
|
|
4. **Versatility** - Works on light/dark backgrounds
|
|
5. **Timelessness** - Should feel relevant in 10 years
|
|
|
|
### Avoid
|
|
|
|
1. **Nautical Clichés** - No anchors, ropes, ship wheels, sailors, pirates
|
|
2. **Literal Interpretations** - No realistic boat illustrations
|
|
3. **Trendy Effects** - No gradients, shadows, 3D effects
|
|
4. **Complex Details** - Nothing that disappears at small sizes
|
|
5. **Generic Stock Icons** - Should feel unique and custom
|
|
|
|
### Cultural Considerations
|
|
|
|
- **International Appeal** - Will be used globally (avoid US-specific nautical symbols)
|
|
- **Professional Context** - Will appear in business communications
|
|
- **Marine Industry** - Users include engineers, surveyors, brokers (technical audience)
|
|
|
|
---
|
|
|
|
## 9. Brand Extensions (Future Considerations)
|
|
|
|
### Potential Sub-Brands
|
|
|
|
If NaviDocs expands to other verticals, logo system should support:
|
|
|
|
- **NaviDocs Marina** (marina management)
|
|
- **NaviDocs Property** (property documentation)
|
|
- **NaviDocs Fleet** (commercial vessel fleets)
|
|
|
|
**Logo System Considerations:**
|
|
- Could the icon remain consistent with wordmark variants?
|
|
- Should there be a color-coding system for verticals?
|
|
- How does the brand scale across product lines?
|
|
|
|
---
|
|
|
|
## 10. Deliverables Checklist
|
|
|
|
### Phase 1: Concept Exploration
|
|
|
|
- [ ] 3-5 initial logo concepts (different directions)
|
|
- [ ] Each concept shown in:
|
|
- Primary lockup (icon + wordmark)
|
|
- Icon only
|
|
- Monochrome version
|
|
- [ ] Brief rationale for each concept
|
|
|
|
### Phase 2: Refinement
|
|
|
|
- [ ] 2-3 refined concepts based on feedback
|
|
- [ ] Shown in realistic contexts (web header, app icon, business card)
|
|
- [ ] Color palette exploration (2-3 options per concept)
|
|
|
|
### Phase 3: Final Delivery
|
|
|
|
- [ ] Complete logo family (all variants)
|
|
- [ ] All file formats (SVG, PNG, PDF, ICO)
|
|
- [ ] Color palette (hex codes, RGB, CMYK)
|
|
- [ ] Typography specifications
|
|
- [ ] Logo usage guidelines (minimum sizes, clear space, do's and don'ts)
|
|
- [ ] Brand style guide (1-2 page PDF)
|
|
|
|
---
|
|
|
|
## 11. Budget & Timeline
|
|
|
|
(To be discussed with designer)
|
|
|
|
**Typical Timeline:**
|
|
- Concept Phase: 3-5 days
|
|
- Refinement: 2-3 days
|
|
- Finalization: 1-2 days
|
|
- **Total:** 1-2 weeks
|
|
|
|
**Budget Range:**
|
|
- Entry-level designer: $300-$800
|
|
- Mid-level designer: $800-$2,500
|
|
- Senior/agency: $2,500-$10,000+
|
|
|
|
---
|
|
|
|
## 12. Success Metrics
|
|
|
|
### A Great NaviDocs Logo Will:
|
|
|
|
1. **Pass the Favicon Test** - Recognizable at 16x16 pixels
|
|
2. **Pass the Squint Test** - Identifiable when blurred
|
|
3. **Pass the Black & White Test** - Works without color
|
|
4. **Pass the Upside-Down Test** - Still looks intentional when rotated
|
|
5. **Pass the Memory Test** - Someone can sketch it after seeing once
|
|
6. **Pass the Context Test** - Looks professional next to GitHub, Linear, Notion logos
|
|
|
|
### Questions to Validate Design
|
|
|
|
- Could this logo work for a company with $100M revenue? (professional enough)
|
|
- Would a 60-year-old boat owner trust this brand? (accessible enough)
|
|
- Would a 30-year-old engineer respect this brand? (modern enough)
|
|
- Does it feel marine without being cliché? (balanced)
|
|
- Will it still look good in 2030? (timeless)
|
|
|
|
---
|
|
|
|
## 13. Inspirational References
|
|
|
|
### Logo Design Inspiration
|
|
|
|
**Geometric & Modern:**
|
|
- Linear (linear.app)
|
|
- Stripe (stripe.com)
|
|
- Vercel (vercel.com)
|
|
|
|
**Professional & Technical:**
|
|
- GitHub (github.com)
|
|
- Meilisearch (meilisearch.com)
|
|
- DigitalOcean (digitalocean.com)
|
|
|
|
**Marine-Adjacent (done right):**
|
|
- Maersk (shipping - simple geometric)
|
|
- North Sails (abstract sails, not literal)
|
|
- Navionics (marine charts - professional)
|
|
|
|
### Design Blogs & Resources
|
|
|
|
- [Logo Design Love](https://www.logodesignlove.com/)
|
|
- [Brand New (UnderConsideration)](https://www.underconsideration.com/brandnew/)
|
|
- [Logopond](https://logopond.com/)
|
|
|
|
---
|
|
|
|
## 14. Contact & Feedback
|
|
|
|
**Project Owner:** [Your Name]
|
|
**Project Repository:** [GitHub/Gitea URL]
|
|
**Questions/Clarifications:** [Contact Method]
|
|
|
|
**Feedback Process:**
|
|
1. Designer submits concepts via [method]
|
|
2. Review meeting within 2 business days
|
|
3. Written feedback provided
|
|
4. Refinement rounds (max 3 included)
|
|
|
|
---
|
|
|
|
## 15. Additional Context
|
|
|
|
### Project Status
|
|
|
|
**Current State:**
|
|
- MVP: 65% complete
|
|
- Backend: Functional with 3 OCR options
|
|
- Database: Initialized with production schema
|
|
- Frontend: In development
|
|
|
|
**Launch Timeline:**
|
|
- Beta: 2-3 weeks
|
|
- Public Launch: 4-6 weeks
|
|
|
|
**Branding Urgency:**
|
|
- Needed for: Beta launch, app stores, PWA manifest
|
|
- Deadline: [Ideally within 1-2 weeks]
|
|
|
|
### Strategic Vision
|
|
|
|
**Year 1 Goals:**
|
|
- 100-500 active users (boat owners)
|
|
- Expansion to 2-3 marinas
|
|
- Establish brand in marine industry
|
|
|
|
**5-Year Vision:**
|
|
- Multi-vertical platform (boats, marinas, properties)
|
|
- 10,000+ users
|
|
- Recognized brand in professional marine management
|
|
|
|
**Brand Must Support:**
|
|
- Credibility with marine insurance companies
|
|
- Trust from yacht brokers and surveyors
|
|
- Upsell to enterprise marina contracts
|
|
|
|
---
|
|
|
|
## 16. Creative Freedom
|
|
|
|
### Where Designer Has Freedom
|
|
|
|
- **Icon concept** - Full creative freedom within guidelines
|
|
- **Color palette specifics** - Exact shades of blue/gray
|
|
- **Typography** - Font selection and customization
|
|
- **Layout** - Lockup arrangements and proportions
|
|
- **Graphic elements** - Supporting visuals, patterns
|
|
|
|
### Where We Need Consistency
|
|
|
|
- **Professional tone** - Non-negotiable
|
|
- **Modern aesthetic** - No vintage/retro styles
|
|
- **Scalability** - Must work at all sizes
|
|
- **No nautical clichés** - Anchors, ropes, ships wheels are off-limits
|
|
|
|
---
|
|
|
|
## 17. Final Notes
|
|
|
|
### What Makes This Project Unique
|
|
|
|
**The Challenge:**
|
|
Create a logo that feels:
|
|
- Professional enough for a $100k yacht
|
|
- Accessible enough for a weekend sailor
|
|
- Technical enough for marine engineers
|
|
- Modern enough for 2025
|
|
- Timeless enough for 2035
|
|
|
|
**The Opportunity:**
|
|
Most marine software has terrible branding (dated, cliché, or overly corporate). There's a huge opportunity to create something that feels like "the GitHub of marine documentation" - professional, modern, and trustworthy.
|
|
|
|
### Designer's Questions to Consider
|
|
|
|
1. How can we suggest "marine" without anchors or waves?
|
|
2. How can we suggest "documentation" without boring file folder icons?
|
|
3. What makes a logo feel "trustworthy" for critical safety information?
|
|
4. How do we balance "technical precision" with "accessible to all"?
|
|
|
|
---
|
|
|
|
## Thank You
|
|
|
|
We're excited to see your creative interpretation of NaviDocs. This is a rare opportunity to create a brand identity for a product that could genuinely improve maritime safety by ensuring critical documentation is accessible during emergencies.
|
|
|
|
**Your logo could be on the phone of someone 20 miles offshore whose engine just failed. Make it count.**
|
|
|
|
---
|
|
|
|
**End of Creative Brief**
|
|
|
|
**Document Version:** 1.0
|
|
**Last Updated:** 2025-10-19
|
|
**Status:** Ready for Designer Review
|
|
**Feedback Welcome:** [Contact Method]
|