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.