# Design System - Navigation

## Overview
Top navigation bar component with logo, current strategy indicator, navigation links, and user icon. The "Current Strategy" element uses the same design pattern as the Strategy Mode Header for consistency.

---

## Navigation Bar

| Property | Value |
|----------|-------|
| Width | 990px |
| Height | 24px |
| Background | #ffffff |
| Padding | 0 16px |
| Border Radius | 4px |
| Layout | Flexbox, space-between |

---

## Sub-Components

### Logo

| Property | Value |
|----------|-------|
| Font | Space Grotesk |
| Font Size | 14px |
| Font Weight | 700 |
| Color | #1a1a1a |

---

### Current Strategy Indicator
Styled to match Strategy Mode Header component for design consistency.

| Property | Value |
|----------|-------|
| Background | #ffffff |
| Padding | 4px 12px (in nav) / 8px 16px (standalone) |
| Border Radius | 20px |
| Box Shadow | 0 1px 3px rgba(0, 0, 0, 0.1) |
| Layout | Flexbox, center aligned |
| Gap | 8px |

**Label:**
| Property | Value |
|----------|-------|
| Text | "Current Strategy:" |
| Font Size | 14px (in nav) / 16px (standalone) |
| Font Weight | 400 |
| Color | #383737 |

**Badge:**
| Property | Value |
|----------|-------|
| Background | #1a1a2e |
| Text Color | #ffffff |
| Font Size | 12px |
| Font Weight | 500 |
| Padding | 2px 10px |
| Border Radius | 4px |

**Hover State:**
Uses the signature Orange→Pink→Blue ripple effect animation.

---

### Nav Links

| Property | Value |
|----------|-------|
| Font | Space Grotesk |
| Font Size | 14px |
| Font Weight | 300 |
| Color | #383737 |
| Hover Color | #1a1a2e |
| Gap | 24px |

**Links:**
- Your To Dos
- Research
- Strategy
- Prototype
- Marketplace

---

### User Icon

| Property | Value |
|----------|-------|
| Width | 12px |
| Height | 15px |
| Stroke Color | #575461 |
| Stroke Width | 1px |
| Fill | none |

---

## Interaction States

### Current Strategy Hover
Ripple effect animation matching Strategy Mode Header.

**Ripple Animation:**
- Grid: 20 columns × 3 rows
- Animation: Radiates outward from cursor position
- Duration: 0.6s per cell
- Easing: ease-out

**Color Sequence:**
```
0%   → Orange: rgba(251, 146, 60, 0.5)
40%  → Pink: rgba(244, 114, 182, 0.4)
70%  → Blue: rgba(147, 197, 253, 0.3)
100% → Transparent
```

### Nav Link Hover
- Color transition: #383737 → #1a1a2e
- Transition: 0.2s ease

---

## Code Reference

### HTML Structure
```html
<nav class="navigation">
    <div class="nav-left">
        <span class="logo">Logo</span>
        <div class="current-strategy">
            <div class="ripple-grid"></div>
            <div class="content-overlay">
                <span class="strategy-label">Current Strategy:</span>
                <span class="strategy-badge">SkinTracker</span>
            </div>
        </div>
    </div>
    <div class="nav-links">
        <a href="#" class="nav-link">Your To Dos</a>
        <a href="#" class="nav-link">Research</a>
        <a href="#" class="nav-link">Strategy</a>
        <a href="#" class="nav-link">Prototype</a>
        <a href="#" class="nav-link">Marketplace</a>
        <svg class="user-icon">...</svg>
    </div>
</nav>
```

### CSS Classes
| Class | Description |
|-------|-------------|
| `.navigation` | Main navigation container |
| `.nav-left` | Left section (logo + strategy) |
| `.logo` | Logo text |
| `.current-strategy` | Strategy indicator with ripple |
| `.strategy-label` | "Current Strategy:" text |
| `.strategy-badge` | Strategy name badge |
| `.nav-links` | Right section navigation links |
| `.nav-link` | Individual navigation link |
| `.user-icon` | User profile icon |

---

## Design Tokens

### Colors
| Token | Value | Usage |
|-------|-------|-------|
| Logo Text | #1a1a1a | Logo |
| Nav Text | #383737 | Links, strategy label |
| Nav Hover | #1a1a2e | Link hover state |
| Badge Background | #1a1a2e | Strategy badge |
| Badge Text | #ffffff | Strategy badge text |
| Icon Stroke | #575461 | User icon |

### Typography
| Element | Font Size | Weight |
|---------|-----------|--------|
| Logo | 14px | 700 |
| Strategy Label | 14px / 16px | 400 |
| Strategy Badge | 12px | 500 |
| Nav Links | 14px | 300 |

### Spacing
| Token | Value |
|-------|-------|
| Nav Padding | 0 16px |
| Link Gap | 24px |
| Logo to Strategy Gap | 24px |
| Strategy Internal Gap | 8px |

---

## Design Consistency

The Current Strategy indicator shares design patterns with:
- **Strategy Mode Header** (chat panel) - Same ripple effect, similar label:badge structure
- **Buttons** - Badge uses same #1a1a2e background as Primary Button

---

## Prototype
`navigation-prototype/index.html` - localhost:8083