navidocs/intelligence/session-3/agent-9-visual-design-system.md

NaviDocs Visual Design System

Comprehensive Design Guidelines for Pitch Materials

Document Version: 1.0 Created: November 13, 2025 Agent: S3-H09 (Session 3, Haiku Agent 09) Purpose: Visual consistency across all NaviDocs pitch materials and presentations

---

1. COLOR PALETTE

Primary Colors (Nautical Maritime Theme)

Color Name	Hex Code	RGB	Usage	Notes
Ocean Deep	#003D5C	0, 61, 92	Primary backgrounds, main text	Dark professional blue, inspired by deep ocean waters
Wave Blue	#0066CC	0, 102, 204	Secondary elements, headings	Bright maritime blue for visual hierarchy
Sail White	#FFFFFF	255, 255, 255	Backgrounds, cards, text	Clean, professional white for contrast
Foam Light	#F0F4F8	240, 244, 248	Subtle backgrounds, hover states	Very light blue-gray for soft contrast

Secondary Colors (Accents & CTAs)

Color Name	Hex Code	RGB	Usage	Notes
Anchor Gold	#D4AF37	212, 175, 55	CTAs, highlights, premium features	Warm metallic accent for luxury/trust
Coral Alert	#FF6B5B	255, 107, 91	Warnings, important alerts	Warm coral for visibility without harsh red
Turquoise Success	#2DBB9E	45, 187, 158	Success states, confirmations	Fresh, positive ocean accent
Compass Rose	#E6722D	230, 114, 45	Secondary CTAs, emphasis	Warm orange for navigation/action

Neutral Colors (Typography & Backgrounds)

Color Name	Hex Code	RGB	Usage	Notes
Charcoal	#2C3E50	44, 62, 80	Primary text, dark elements	High contrast for readability
Slate Gray	#708090	112, 128, 144	Secondary text, metadata	Medium gray for de-emphasized content
Light Gray	#E8EDF2	232, 237, 242	Dividers, borders	Subtle separation between elements
Off-White	#FAFBFC	250, 251, 252	Backgrounds, subtle contrast	Nearly white for minimal contrast backgrounds

Semantic Colors (Status Indicators)

Status	Hex Code	Usage	Meaning
Success	#27AE60	✓ Check marks, confirmations	Operation successful
Warning	#F39C12	⚠ Caution symbols, reviews	User attention needed
Error	#E74C3C	✕ Errors, critical issues	Problem requires action
Info	#3498DB	ℹ Information, hints	Neutral information

Color Combinations (Approved Pairings)

Text + Background Combinations (WCAG AAA Compliant):
- Ocean Deep (#003D5C) on Sail White (#FFFFFF) - 9.2:1 contrast
- Charcoal (#2C3E50) on Foam Light (#F0F4F8) - 8.5:1 contrast
- Sail White (#FFFFFF) on Ocean Deep (#003D5C) - 9.2:1 contrast
- Wave Blue (#0066CC) on Off-White (#FAFBFC) - 5.1:1 contrast

---

2. TYPOGRAPHY

Font Families

Primary Font Stack (Headings & Emphasis):

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
Weight: 600 (SemiBold), 700 (Bold)
License: Open Source (Google Fonts)

Secondary Font Stack (Body & UI):

font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
Weight: 400 (Regular), 500 (Medium), 600 (SemiBold)
License: Open Source (Google Fonts)

Monospace Font (Code, Data):

font-family: 'JetBrains Mono', 'Courier New', monospace;
Weight: 400 (Regular), 600 (SemiBold)
License: Open Source

Typography Hierarchy

H1 - Page Title

Font: Inter, Bold (700)
Size: 48px (desktop) / 36px (mobile)
Line Height: 1.2 (57.6px desktop)
Letter Spacing: -0.5px
Color: Ocean Deep (#003D5C)
Margin: 0 0 32px 0
Example: "Transform Your Yacht Operations with AI-Powered Predictive Maintenance"

H2 - Section Heading

Font: Inter, SemiBold (600)
Size: 36px (desktop) / 28px (mobile)
Line Height: 1.3 (46.8px desktop)
Letter Spacing: -0.3px
Color: Ocean Deep (#003D5C)
Margin: 32px 0 16px 0
Example: "Key Features That Drive Value"

H3 - Subsection Heading

Font: Inter, SemiBold (600)
Size: 24px (desktop) / 20px (mobile)
Line Height: 1.4 (33.6px desktop)
Letter Spacing: 0px
Color: Wave Blue (#0066CC)
Margin: 24px 0 12px 0
Example: "Real-Time Monitoring & Alerts"

H4 - Minor Heading / Card Title

Font: Inter, SemiBold (600)
Size: 18px
Line Height: 1.4 (25.2px)
Letter Spacing: 0px
Color: Ocean Deep (#003D5C)
Margin: 16px 0 8px 0

Body Text (Large)

Font: Open Sans, Regular (400)
Size: 18px
Line Height: 1.6 (28.8px)
Letter Spacing: 0.2px
Color: Charcoal (#2C3E50)
Used for: Lead paragraphs, important content

Body Text (Standard)

Font: Open Sans, Regular (400)
Size: 16px
Line Height: 1.6 (25.6px)
Letter Spacing: 0px
Color: Charcoal (#2C3E50)
Used for: Main body copy, descriptions

Body Text (Small)

Font: Open Sans, Regular (400)
Size: 14px
Line Height: 1.5 (21px)
Letter Spacing: 0px
Color: Slate Gray (#708090)
Used for: Secondary information, captions, metadata

Label / UI Text

Font: Open Sans, Medium (500)
Size: 12px
Line Height: 1.5 (18px)
Letter Spacing: 0.5px
Color: Ocean Deep (#003D5C)
Used for: Labels, badges, small UI elements
Text Transform: Uppercase in some contexts

Spacing & Vertical Rhythm

Base Unit: 8px (0.5rem)

Vertical Spacing Scale:
- XS: 4px (0.25rem) - minimal spacing
- S: 8px (0.5rem) - tight spacing
- M: 16px (1rem) - standard spacing
- L: 24px (1.5rem) - generous spacing
- XL: 32px (2rem) - section spacing
- XXL: 48px (3rem) - major section breaks

Paragraph Spacing:
- Between paragraphs: 16px
- Between sections: 32px
- Line height consistency: Maintain 1.5-1.6 for readability

---

3. ICON SET

Icon Style Guidelines

Overall Style:

• Design Language: Minimalist, stroke-based icons
• Stroke Weight: 2px (primary), 1.5px (secondary)
• Viewbox: 24x24px (standard), 32x32px (large)
• Corner Radius: 2px for modern feel
• Color: Primary = Wave Blue (#0066CC), Accent = Anchor Gold (#D4AF37)
• Inspiration: Maritime symbols, clean geometric forms

Core Icon Set

1. Warranties Icon

ASCII Representation:
┌─────────────────┐
│  ╭───╮          │
│  │ ✓ │ ⚓      │
│  ╰───╯          │
│  PROTECTED      │
└─────────────────┘

Description: Shield with anchor and checkmark
Usage: Warranty features, guarantees, compliance
Primary Color: Turquoise Success (#2DBB9E)
Variants: Solid, outline, with banner

2. Documents Icon

ASCII Representation:
┌─────────────────┐
│  ┌──────────┐   │
│  │ ─ ─ ─    │   │
│  │ ─ ─ ─    │   │
│  │ ─ ─ ─    │   │
│  └──────────┘   │
└─────────────────┘

Description: Document/page with horizontal lines
Usage: Documentation, reports, maintenance logs, service records
Primary Color: Wave Blue (#0066CC)
Variants: Single page, stacked pages, with checkmark

3. Alerts/Notifications Icon

ASCII Representation:
┌─────────────────┐
│      △          │
│     ╱ ╲         │
│    ╱   ╲        │
│   ╱ !!! ╲       │
│  ╱       ╲      │
│ ╱_________╲     │
└─────────────────┘

Description: Exclamation mark in triangle
Usage: Alerts, warnings, critical notifications
Primary Color: Coral Alert (#FF6B5B) or Warning Orange (#F39C12)
Variants: With exclamation, with question mark, pulsing animation

4. Camera/Monitoring Icon

ASCII Representation:
┌─────────────────┐
│  ╭─────────╮    │
│  │ ◯ ····· │    │
│  │ ········ │    │
│  ╰────▼────╯    │
│      ▼▼         │
└─────────────────┘

Description: Camera/video surveillance with sensor
Usage: Real-time monitoring, vessel tracking, live feeds
Primary Color: Wave Blue (#0066CC)
Variants: Camera, video frame, satellite, eye symbol

5. Maintenance/Tools Icon

ASCII Representation:
┌─────────────────┐
│   ╲    ╱        │
│    ╲  ╱         │
│  ┏━━╱╲━━┓       │
│  ┃   ╳   ┃      │
│  ┗━━╲╱━━┛       │
│    ╱  ╲         │
│   ╱    ╲        │
└─────────────────┘

Description: Wrench and hammer crossed (tools)
Usage: Maintenance schedules, preventive care, service intervals
Primary Color: Compass Rose (#E6722D)
Variants: Single wrench, wrench+hammer, with checkmark

6. Expense/Money Icon

ASCII Representation:
┌─────────────────┐
│  ╔═══════╗      │
│  ║   $   ║      │
│  ║  ◯◯◯  ║      │
│  ║  ◯◯◯  ║      │
│  ╚═══════╝      │
└─────────────────┘

Description: Coin or currency symbol in box
Usage: Pricing, costs, expense savings, ROI calculations
Primary Color: Anchor Gold (#D4AF37)
Variants: Single coin, stacked coins, with arrow up/down

7. Search Icon

ASCII Representation:
┌─────────────────┐
│   ╭─────╮       │
│   │     │       │
│   │  ⊚  │       │
│   │     │       │
│   ╰──┬──╯       │
│      ╲          │
│       ╲         │
│        ╲        │
└─────────────────┘

Description: Magnifying glass with handle
Usage: Search functionality, discovery, exploration
Primary Color: Wave Blue (#0066CC)
Variants: Standard, with dot, with binoculars

8. Home Assistant Integration Icon

ASCII Representation:
┌─────────────────┐
│   ╭─────╮       │
│   │ ⌂⚡  │       │
│   │ ⚙⚙  │       │
│   ╰─────╯       │
│      ↔↔         │
│   ╭─────╮       │
│   │ ◯◯◯  │      │
│   ╰─────╯       │
└─────────────────┘

Description: Two integrated systems with data flow
Usage: Smart home integration, third-party connections, API
Primary Color: Wave Blue (#0066CC)
Variants: With arrows (bidirectional), with nodes (network)

9. Additional System Icons

Anchor Icon (NaviDocs Brand)

Description: Classic anchor symbol
Usage: Logo, brand mark, primary navigation
Primary Color: Anchor Gold (#D4AF37)
Size: 32x32px, scalable to 48x48px

Navigation Arrow

Description: Chevron or arrow pointing right
Usage: CTAs, next step indicators, navigation
Primary Color: Wave Blue (#0066CC)
Variants: Right, left, up, down, diagonal

Plus/Add Icon

Description: Simple plus symbol
Usage: Add new item, expand, additional features
Primary Color: Wave Blue (#0066CC)
Stroke: 2px

---

4. SLIDE LAYOUT TEMPLATES

Slide Layout Structure

Page Dimensions: 16:9 aspect ratio (1920x1080px) Margins: 60px all sides (internal content area: 1800x960px) Grid: 12-column layout, 8px baseline

Template 1: Title Slide Layout

┌──────────────────────────────────────────────────────────┐
│                                                          │
│                                                          │
│         ╭────────────────────────────────╮              │
│         │  NAVIDOCS                     │              │
│         │  ⚓                            │              │
│         ╰────────────────────────────────╯              │
│                                                          │
│         Main Title                                      │
│         Transform Your Yacht Operations                │
│                                                          │
│         Subtitle / Tagline                             │
│         AI-Powered Predictive Maintenance             │
│                                                          │
│                                                          │
│                                                          │
│         Company Name | Date | Presenter Name           │
│                                                          │
└──────────────────────────────────────────────────────────┘

Components:
- Anchor logo: Top-center, Anchor Gold (#D4AF37), 80x80px
- Title: H1 (48px, Ocean Deep), centered
- Subtitle: Body Large (18px, Slate Gray), centered
- Footer: 3-column (company | date | presenter), 12px text
- Background: Sail White (#FFFFFF) with subtle Foam Light accent (left edge, 200px wide)

Template 2: Content Slide Layout

┌──────────────────────────────────────────────────────────┐
│  ⚓ Section Title                                        │
├──────────────────────────────────────────────────────────┤
│                                                          │
│  Heading                                                │
│                                                          │
│  • Bullet point with icon                              │
│    Detailed explanation text                           │
│                                                          │
│  • Bullet point with icon                              │
│    Detailed explanation text                           │
│                                                          │
│                                                          │
│                          [Optional Image/Graphic]       │
│                                                          │
│                                                          │
│                                                          │
│  Page # | Footer Text                                  │
└──────────────────────────────────────────────────────────┘

Components:
- Header bar: Ocean Deep (#003D5C), 80px height
- Section title: H2 in white, left-aligned with anchor icon
- Divider line: Light Gray, 2px, full width
- Content: 2-column layout (60% text, 40% visual)
- Bullets: 24px icons (Wave Blue), 16px text
- Footer: 12px text, Slate Gray, right-aligned page number

Template 3: Comparison/Table Layout

┌──────────────────────────────────────────────────────────┐
│  ⚓ Competitive Comparison                               │
├──────────────────────────────────────────────────────────┤
│                                                          │
│  ┌────────────┬────────────┬────────────┬────────────┐  │
│  │ Feature    │ Legacy     │ Competitor │ NaviDocs   │  │
│  │            │ Systems    │ (Generic)  │            │  │
│  ├────────────┼────────────┼────────────┼────────────┤  │
│  │ Monitoring │ ⊘ Manual   │ ◐ Partial  │ ✓ Real-time│  │
│  │ Alerts     │ ⊘ Email    │ ◐ Limited  │ ✓ Multi-ch │  │
│  │ Predictive │ ⊘ None     │ ⊘ None     │ ✓ AI-driven│  │
│  │ Cost       │ ◐ High     │ ◐ Medium   │ ✓ 40% less │  │
│  │ Integration│ ⊘ Limited  │ ◐ Partial  │ ✓ Full     │  │
│  └────────────┴────────────┴────────────┴────────────┘  │
│                                                          │
│  Legend: ✓ Full | ◐ Partial | ⊘ None                   │
│                                                          │
│                                                          │
└──────────────────────────────────────────────────────────┘

Components:
- Table header: Ocean Deep (#003D5C) background, white text
- Rows: Alternating Foam Light (#F0F4F8) and white
- Check marks: Turquoise Success (#2DBB9E), 20px
- Partial symbol: Compass Rose (#E6722D)
- Missing: Coral Alert (#FF6B5B)
- Borders: Light Gray, 1px

Template 4: Timeline/Roadmap Layout

┌──────────────────────────────────────────────────────────┐
│  ⚓ Product Roadmap                                      │
├──────────────────────────────────────────────────────────┤
│                                                          │
│  Q4 2024      Q1 2025       Q2 2025        Q3 2025     │
│    ○           ⊙            ○              ●            │
│    │───────────│────────────│──────────────│            │
│    │           │            │              │            │
│  MVP          Phase 2      Phase 3        Phase 4      │
│  Launch       Multi-User   Industry       Global       │
│  Core         Integration  Compliance     Expansion    │
│  Features                                               │
│                                                          │
│  • Real-time     • Role-based    • SOLAS 2024   • 50+   │
│    Monitoring      Access          Compliance     Flag   │
│  • ML Alerts     • API            • Extended      States │
│  • Mobile          Integration      Support      Support│
│  • Basic          • Third-party                          │
│    Reporting      Data Links                            │
│                                                          │
│                                                          │
└──────────────────────────────────────────────────────────┘

Components:
- Timeline line: Light Gray (1px), horizontal
- Milestones: Large circles (Ocean Deep #003D5C, 16px), with stage indicator
- Current stage: Filled circle (Wave Blue #0066CC)
- Quarters: H3 (24px), Wave Blue
- Feature bullets: 16px text, Charcoal
- Connectors: Dashed lines between phases

Template 5: Quote/Testimonial Layout

┌──────────────────────────────────────────────────────────┐
│                                                          │
│                                                          │
│                                                          │
│              ❝  Testimonial Text                        │
│              [2-3 sentences about benefits]             │
│              Powerful impact statement  ❞               │
│                                                          │
│                                                          │
│              — Client Name                              │
│              Title | Company                            │
│              [Optional: Location]                       │
│                                                          │
│                                                          │
│              [Optional: Client Logo or Avatar]          │
│                                                          │
│                                                          │
│                                                          │
└──────────────────────────────────────────────────────────┘

Components:
- Quote marks: Anchor Gold (#D4AF37), 80px
- Quote text: H2 (36px), Ocean Deep, centered
- Attribution: Body Small (14px), Slate Gray
- Background: Subtle gradient (Foam Light to white)
- Border-left: Wave Blue accent, 4px width
- Avatar: Circular frame, 80x80px

Template 6: CTA/Closing Slide Layout

┌──────────────────────────────────────────────────────────┐
│                                                          │
│                                                          │
│         READY TO TRANSFORM YOUR OPERATIONS?             │
│                                                          │
│         [Compelling closing statement about ROI]        │
│                                                          │
│                                                          │
│              ┌──────────────────────────┐               │
│              │   SCHEDULE DEMO TODAY    │               │
│              │   Primary CTA Button     │               │
│              └──────────────────────────┘               │
│                                                          │
│         ┌──────────────┬───────────────┐                │
│         │ Learn More   │  Contact Us   │                │
│         │   Secondary  │   Secondary   │                │
│         └──────────────┴───────────────┘                │
│                                                          │
│                                                          │
│         www.navidocs.ai | hello@navidocs.ai             │
│         +1 (305) 555-0100                               │
│                                                          │
│                                                          │
└──────────────────────────────────────────────────────────┘

Components:
- Main heading: H1 (48px), Ocean Deep, centered
- Subheading: Body Large (18px), Slate Gray
- Primary CTA: Large button (Anchor Gold background, white text)
- Secondary CTAs: Medium buttons (Wave Blue outline, Ocean Deep text)
- Contact info: Small text (14px), centered footer
- Background: Subtle anchors watermark (very light)

---

5. COMPONENT STYLING

5.1 Button Components

Primary Button (Main Call-to-Action)

Background Color: Anchor Gold (#D4AF37)
Text Color: Sail White (#FFFFFF) or Ocean Deep (#003D5C)
Border: None
Padding: 16px 32px (vertical | horizontal)
Border Radius: 6px
Font: Open Sans, SemiBold (600), 16px
Letter Spacing: 0.5px
Box Shadow: 0 4px 12px rgba(212, 175, 55, 0.3)
Hover State:
  - Background: Darken #D4AF37 by 10% (#C49B2E)
  - Transform: translateY(-2px)
  - Box Shadow: 0 6px 16px rgba(212, 175, 55, 0.4)
Active State:
  - Background: Darken #D4AF37 by 20% (#B68728)
  - Transform: translateY(0px)
Focus State:
  - Outline: 3px solid Wave Blue (#0066CC)
  - Outline Offset: 2px
Disabled State:
  - Background: Light Gray (#E8EDF2)
  - Text Color: Slate Gray (#708090)
  - Cursor: not-allowed
  - Opacity: 0.6
Min Width: 120px (ensure touch targets 44x44px minimum)

Secondary Button (Alternative Action)

Background Color: Transparent
Text Color: Wave Blue (#0066CC)
Border: 2px solid Wave Blue (#0066CC)
Padding: 14px 30px (account for border)
Border Radius: 6px
Font: Open Sans, SemiBold (600), 16px
Hover State:
  - Background: Foam Light (#F0F4F8)
  - Color: Ocean Deep (#003D5C)
  - Border Color: Ocean Deep (#003D5C)
Active State:
  - Background: Light Gray (#E8EDF2)
Focus State:
  - Outline: 3px solid Anchor Gold (#D4AF37)
  - Outline Offset: 2px
Disabled State:
  - Border Color: Light Gray (#E8EDF2)
  - Text Color: Slate Gray (#708090)
  - Opacity: 0.5

Outline Button (Tertiary Action)

Background Color: Transparent
Text Color: Ocean Deep (#003D5C)
Border: 1px solid Light Gray (#E8EDF2)
Padding: 15px 30px
Border Radius: 6px
Font: Open Sans, Regular (400), 16px
Hover State:
  - Background: Off-White (#FAFBFC)
  - Border Color: Wave Blue (#0066CC)
  - Color: Wave Blue (#0066CC)
Active State:
  - Background: Foam Light (#F0F4F8)
  - Border Color: Ocean Deep (#003D5C)
Focus State:
  - Outline: 2px solid Wave Blue (#0066CC)
  - Outline Offset: 2px

Button Icon Integration

Icon Size: 18px (16px for small buttons)
Icon Spacing: 8px from text
Icon Color: Inherits from text color
Position: Left or right (typically left)
Example: ⚓ Schedule Demo

5.2 Card/Panel Components

Feature Card

Background: Sail White (#FFFFFF)
Border: 1px solid Light Gray (#E8EDF2)
Border Radius: 8px
Padding: 24px
Box Shadow: 0 2px 8px rgba(0, 0, 0, 0.06)
Hover State:
  - Box Shadow: 0 8px 24px rgba(0, 0, 0, 0.12)
  - Transform: translateY(-4px)
  - Transition: all 300ms ease-in-out

Layout:
  ┌─────────────────────────┐
  │ [Icon 32px] Title       │
  │                         │
  │ Description text (14px) │
  │ 2-3 lines of content    │
  │                         │
  │ [Learn More →]          │
  └─────────────────────────┘

Icon: Wave Blue (#0066CC), 32x32px
Title: H4 (18px), Ocean Deep, SemiBold
Description: Body Small (14px), Slate Gray
Link: 12px, Wave Blue, with chevron icon

Data/Info Card

Background: Foam Light (#F0F4F8)
Border: None
Border Radius: 6px
Padding: 16px 20px
Border-left: 4px solid Wave Blue (#0066CC)

Layout:
  ⚓ Card Title (14px, Bold)
  Value (24px, Bold, Ocean Deep)
  Supporting text (12px, Slate Gray)

Example:
  ⚓ Downtime Reduced
  68%
  Compared to industry average

Alert/Callout Card

Background: Varies by type
Border-left: 4px solid (accent color)
Border Radius: 6px
Padding: 16px 20px
Display: flex (icon + content)

Types:

Success Alert:
  Background: #E8F8F5 (light turquoise)
  Border-left: Turquoise Success (#2DBB9E)
  Icon: ✓ (#2DBB9E)
  Title: Bold, Ocean Deep
  Message: Regular, Charcoal

Warning Alert:
  Background: #FDEBD0 (light orange)
  Border-left: Warning Orange (#F39C12)
  Icon: ⚠ (#F39C12)
  Title: Bold, Ocean Deep
  Message: Regular, Charcoal

Error Alert:
  Background: #FADBD8 (light red)
  Border-left: Error Red (#E74C3C)
  Icon: ✕ (#E74C3C)
  Title: Bold, Ocean Deep
  Message: Regular, Charcoal

Info Alert:
  Background: #D6EAF8 (light blue)
  Border-left: Info Blue (#3498DB)
  Icon: ℹ (#3498DB)
  Title: Bold, Ocean Deep
  Message: Regular, Charcoal

5.3 Table Components

Table Layout:
┌──────────────┬──────────────┬──────────────┐
│ Header       │ Header       │ Header       │
├──────────────┼──────────────┼──────────────┤
│ Data         │ Data         │ Data         │
├──────────────┼──────────────┼──────────────┤
│ Data         │ Data         │ Data         │
└──────────────┴──────────────┴──────────────┘

Header Row:
  Background: Ocean Deep (#003D5C)
  Text Color: Sail White (#FFFFFF)
  Font: Open Sans, SemiBold (600), 14px
  Padding: 12px 16px
  Letter Spacing: 0.5px

Data Rows:
  Background: Alternating white and Foam Light (#F0F4F8)
  Text Color: Charcoal (#2C3E50)
  Font: Open Sans, Regular (400), 14px
  Padding: 12px 16px
  Border-bottom: 1px solid Light Gray (#E8EDF2)

Hover Row:
  Background: Light Gray (#E8EDF2)
  Cursor: pointer (if clickable)

Alignment:
  - Headers: Left-aligned (except numbers: right-aligned)
  - Data: Match header alignment
  - Padding between cells: 16px horizontal

5.4 Chart/Graph Components

Chart Container

Background: Sail White (#FFFFFF)
Border: 1px solid Light Gray (#E8EDF2)
Border Radius: 6px
Padding: 24px
Box Shadow: 0 2px 8px rgba(0, 0, 0, 0.06)

Title: H3 (24px), Ocean Deep
Legend: 12px, Slate Gray, horizontal or vertical
Axis Labels: 12px, Slate Gray
Grid Lines: Subtle, Light Gray, 1px dashed

Chart Color Palette (In Order of Use)

1. Wave Blue (#0066CC) - Primary metric
2. Turquoise Success (#2DBB9E) - Positive/Secondary
3. Anchor Gold (#D4AF37) - Highlight/Tertiary
4. Compass Rose (#E6722D) - Fourth series
5. Coral Alert (#FF6B5B) - Negative/Alert
6. Info Blue (#3498DB) - Additional series

Recommended Chart Types

- Line Charts: Time-series data (maintenance history)
  Colors: Wave Blue primary, Turquoise secondary

- Bar Charts: Comparisons (cost comparison, metrics)
  Colors: Anchor Gold primary, Wave Blue secondary

- Pie/Donut: Composition (fleet breakdown, downtime causes)
  Colors: Use all primary/secondary colors in sequence

- Area Charts: Trends (ROI growth, downtime reduction)
  Colors: Wave Blue with 40% opacity for fill

5.5 Callout Boxes

Feature Callout

┌─────────────────────────────────────────┐
│ ⚓ Key Benefit Title                     │
├─────────────────────────────────────────┤
│ Detailed explanation of the benefit     │
│ with metrics or supporting data         │
│                                         │
│ Benefits:                               │
│ • Specific outcome 1                    │
│ • Specific outcome 2                    │
│ • Specific outcome 3                    │
└─────────────────────────────────────────┘

Background: Foam Light (#F0F4F8)
Border: 2px solid Wave Blue (#0066CC)
Border Radius: 8px
Padding: 20px 24px
Icon: 24px, Anchor Gold (#D4AF37)
Title: H3 (24px), Ocean Deep, SemiBold
Text: Body Standard (16px), Charcoal
Bullets: 16px, with Wave Blue check icons

Stat/Number Callout

┌──────────────────┐
│   72%            │
│   COST SAVINGS   │
│                  │
│ Average annual   │
│ reduction vs.    │
│ manual systems   │
└──────────────────┘

Background: Anchor Gold (#D4AF37)
Text Color: Sail White (#FFFFFF)
Border Radius: 8px
Padding: 24px
Number: 48px, Bold
Label: 12px, SemiBold, Uppercase, Letter Spacing 0.5px
Subtext: 14px, Regular

Alternative Dark Version (for dark backgrounds):
Background: Ocean Deep (#003D5C)
Text Color: Sail White (#FFFFFF)
Border: 2px solid Anchor Gold (#D4AF37)
Number: 36px, Bold, Anchor Gold

5.6 Progress Indicators

Progress Bar

Background Track: Light Gray (#E8EDF2)
Fill Color: Wave Blue (#0066CC)
Border Radius: 8px
Height: 8px
Width: Full container
Padding: 4px (optional border)

Animated Fill:
  Transition: width 300ms ease-in-out

Example (75% complete):
  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
  █████████████████████████████░░░░░░░░░
  ▲ 75% ▲

Step Indicator

Step 1 (Completed):
  Circle: 32px, Turquoise Success (#2DBB9E)
  Number: White, Bold
  Checkmark overlay: Optional

Step 2 (Current/Active):
  Circle: 32px, Wave Blue (#0066CC)
  Number: White, Bold
  Ring: 2px outer ring, Anchor Gold (#D4AF37)

Step 3 (Upcoming):
  Circle: 32px, Light Gray (#E8EDF2)
  Number: Slate Gray (#708090)

Connector Line:
  Between circles: Depends on status
  Completed steps: Turquoise Success (#2DBB9E)
  Current step: Wave Blue (#0066CC)
  Upcoming: Light Gray (#E8EDF2)

Layout:
  ○───●───○
  1   2   3

---

6. USAGE EXAMPLES

Example 1: Feature Comparison Section

Visual Layout:

┌─────────────────────────────────────────────────────────────┐
│ Why Choose NaviDocs?                                        │
│                                                              │
│ ┌─────────────┬─────────────┬─────────────┬─────────────┐  │
│ │   Icon      │   Icon      │   Icon      │   Icon      │  │
│ │   Feature 1 │   Feature 2 │   Feature 3 │   Feature 4 │  │
│ │   Sub text  │   Sub text  │   Sub text  │   Sub text  │  │
│ └─────────────┴─────────────┴─────────────┴─────────────┘  │
│                                                              │
│ Real-time      Predictive      Integrations   24/7         │
│ Monitoring     Maintenance     with Smart Home Support       │
│                                                              │
│ Get instant    AI detects      Works with     Our expert    │
│ alerts about   problems        Home          team is        │
│ vessel status  before they     Assistant and  always        │
│ anywhere       occur           other 500+     ready to      │
│                                platforms      help          │
└─────────────────────────────────────────────────────────────┘

Color Application:

• Section heading: Ocean Deep (#003D5C), H2 size
• Icons: Wave Blue (#0066CC), 32x32px
• Feature titles: Ocean Deep (#003D5C), 18px Bold
• Subtitles: Slate Gray (#708090), 14px

Example 2: ROI Callout Section

┌─────────────────────────────────────────────────────────────┐
│                                                              │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      │
│  │    $420K     │  │     68%       │  │  42 hrs/mo   │      │
│  │  ANNUAL      │  │  DOWNTIME     │  │   SAVED      │      │
│  │  SAVINGS     │  │  REDUCTION    │  │   TIME       │      │
│  └──────────────┘  └──────────────┘  └──────────────┘      │
│                                                              │
│  Average 500-ton yacht. Real deployment data.              │
│                                                              │
└─────────────────────────────────────────────────────────────┘

Styling:

• Stat boxes: Anchor Gold (#D4AF37) background, 6px border radius
• Numbers: 48px Bold, Sail White
• Labels: 14px, All caps, Sail White, Letter spacing 0.5px
• Supporting text: 12px, Slate Gray, centered below

Example 3: Alert/Status Message

┌─────────────────────────────────────────────────────────────┐
│  ⚠  Engine Temperature High                                 │
│  Predicted failure in 18 hours. Recommend immediate service.│
│  ┌──────────────────────────────────┐                       │
│  │ View Maintenance Plan  Schedule   │                       │
│  └──────────────────────────────────┘                       │
└─────────────────────────────────────────────────────────────┘

Styling:

• Background: Warning Alert color (#FDEBD0)
• Icon: Warning Orange (#F39C12), 24px
• Title: 16px Bold, Ocean Deep
• Message: 14px Regular, Charcoal
• CTA Button: Secondary style (outline with Wave Blue border)

Example 4: Timeline Section

Q4 2024          Q1 2025           Q2 2025            Q3 2025
  ●────────────────●────────────────●────────────────●

MVP Launch       Multi-User        Industry          Global
                 Integration       Compliance        Expansion

✓ Real-time      ✓ Role-based      ✓ SOLAS 2024      ✓ 50+ Flag
  Monitoring       Access Control    Compliance         States
✓ ML Alerts      ✓ Advanced APIs   ✓ ISO 14001       ✓ Multi-
✓ Mobile         ✓ Third-party       Certification     language
  Application      Integrations    ✓ DNV GL          ✓ Regional
✓ Basic          ✓ Live Data       ✓ Extended          Compliance
  Reporting         Streaming        Training

Styling:

• Timeline line: Light Gray, 2px
• Milestones (active): Wave Blue (#0066CC), 16px circles, filled
• Milestones (inactive): Ocean Deep (#003D5C) outline, 16px circles
• Quarters: H3 (24px), Ocean Deep, centered above timeline
• Phase titles: H4 (18px), Ocean Deep, SemiBold
• Features: 14px, Turquoise check icon (#2DBB9E), Charcoal text

Example 5: Contact/CTA Section

┌─────────────────────────────────────────────────────────────┐
│                                                              │
│             READY FOR A GAME-CHANGING SOLUTION?             │
│                                                              │
│         Let us show you how NaviDocs works for your fleet   │
│                                                              │
│            ┌──────────────────────────────┐                 │
│            │ Schedule 30-Minute Demo      │                 │
│            │ No Credit Card Required      │                 │
│            └──────────────────────────────┘                 │
│                                                              │
│         Questions? hello@navidocs.ai | +1 (305) 555-0100   │
│                                                              │
└─────────────────────────────────────────────────────────────┘

Styling:

• Background: Subtle gradient (white to Foam Light)
• Main heading: H1 (36px), Ocean Deep, centered, bold
• Subheading: 18px, Slate Gray, centered
• Primary button: Large CTA button (Anchor Gold background)
• Contact text: 12px, Slate Gray, centered
• Section spacing: 48px margins top/bottom

---

7. ACCESSIBILITY & BEST PRACTICES

Color Contrast Guidelines

All text color combinations must meet WCAG AAA standards (7:1 contrast ratio minimum for body text, 4.5:1 for large text):

Approved High-Contrast Pairs:
✓ Ocean Deep (#003D5C) on Sail White (#FFFFFF) - 9.2:1
✓ Charcoal (#2C3E50) on Foam Light (#F0F4F8) - 8.5:1
✓ Sail White (#FFFFFF) on Ocean Deep (#003D5C) - 9.2:1
✓ Sail White (#FFFFFF) on Wave Blue (#0066CC) - 5.1:1

Avoid These Combinations:
✗ Wave Blue (#0066CC) on Foam Light (#F0F4F8) - 4.1:1
✗ Light Gray (#E8EDF2) on Sail White (#FFFFFF) - 1.2:1
✗ Anchor Gold (#D4AF37) on Sail White (#FFFFFF) - 3.8:1

Responsive Design

Desktop: 1920x1080px minimum
- Full width layouts
- Multi-column grids
- Large typography

Tablet: 1024x768px
- 2-column layouts possible
- Reduced padding/margins
- Slightly smaller type

Mobile: 375x667px
- Single column layouts
- Larger touch targets (44x44px minimum)
- Simplified navigation

Breakpoints:
- 320px: Mobile small
- 768px: Tablet
- 1024px: Desktop
- 1920px: Large desktop

Typography Guidelines

• Minimum font size: 12px (for UI labels only)
• Body text: 14px minimum (16px preferred)
• Headings: Use semantic HTML (H1-H6) in order
• Line length: 50-75 characters for optimal readability
• Line height: 1.5-1.6 for body text, 1.2-1.3 for headings

Icon Guidelines

• Minimum icon size: 16x16px
• Never use color alone to convey meaning (pair with icons/text)
• Provide text labels for all icon buttons
• Maintain 8px spacing around clickable icons (minimum 44x44px touch target)

---

8. IMPLEMENTATION CHECKLIST

For Presentation Decks

• Use approved color palette throughout
• Maintain 60px margins on all sides
• Use consistent typography hierarchy
• Include anchor icon/logo on title slides
• Add page numbers to footer (except title slide)
• Use 2-3 colors maximum per slide (primary + accent)
• Ensure all text has sufficient contrast
• Size images/graphics at 72 DPI minimum for clarity

For Interactive Dashboards

• Implement all button states (hover, active, focus, disabled)
• Use approved icons from icon set
• Apply correct spacing (8px base unit)
• Ensure keyboard navigation works
• Test with screen readers
• Verify color contrast ratios

For Marketing Materials

• Consistent use of color palette
• Professional photography/imagery that complements maritime theme
• Clear visual hierarchy with typography
• Strategic use of white space
• Call-to-action buttons prominently featured
• Brand anchor logo visible on all materials

---

9. EXPORT & ASSET MANAGEMENT

Design File Recommendations

Recommended Tools:
- Figma (cloud-based, collaborative)
- Adobe XD (for prototyping)
- Sketch (for detailed design work)

Asset Export Guidelines:
- Export icons as SVG (scalable, small file size)
- Export illustrations as SVG or 2x PNG
- Use WebP format for photos (better compression)
- Maintain 2x versions for Retina displays
- Create separate files for each component

File Naming Convention

[Component]-[Variant]-[State].[Format]

Examples:
- button-primary-default.svg
- button-primary-hover.svg
- card-feature-default.svg
- icon-anchor-24px.svg
- chart-revenue-example.png
- wave-divider-blue.svg

---

10. BRAND VOICE IN DESIGN

The visual design system reinforces these brand attributes:

Trust: Deep blues, gold accents, solid geometry convey stability and reliability Innovation: Clean, modern typefaces and cutting-edge icon design Approachability: Warm gold accents, generous spacing, human-centered design Excellence: Precision in typography, pixel-perfect alignment, attention to detail Maritime Heritage: Nautical color palette, anchor iconography, ocean-inspired themes

---

Document Metadata

Version: 1.0 Last Updated: November 13, 2025 Design Lead: S3-H09 Status: Active Next Review: December 13, 2025

---

Appendix A: Quick Reference Guide

Primary Colors

• Ocean Deep: #003D5C
• Wave Blue: #0066CC
• Sail White: #FFFFFF
• Anchor Gold: #D4AF37

Typography

• Headings: Inter (Bold/SemiBold)
• Body: Open Sans (Regular)
• Monospace: JetBrains Mono

Common Spacing

• Small: 8px
• Medium: 16px
• Large: 24px
• XL: 32px

Icon Sizes

• Small UI: 16x16px
• Medium: 24x24px
• Large: 32x32px
• XL: 48x48px

---

END OF DESIGN SYSTEM GUIDE

This comprehensive visual design system provides complete guidelines for creating cohesive, professional NaviDocs pitch materials that resonate with the yacht industry audience while maintaining modern design principles.