# Innovatieplatform — Style Guide

## Design Paradigm: Metro Map + Retro Futurism

The entire platform is a **zoomable metro/transit map**. There is no traditional sidebar or dashboard. Users navigate by exploring a visual map of the innovation landscape.

### Metro Map Levels

| Level | View | Lines | Stations | Zoom trigger |
|-------|------|-------|----------|-------------|
| 1. Strategy | Full map | Strategic themes | Projects | Click station |
| 2. Project | Project map | Innovation lifecycle phases | Milestones / deliverables | Click station |
| 3. Detail | Detail map | Categories (docs, commitments, risks) | Individual items | Click to open |

- **Lines** are color-coded by theme/category
- **Stations** are interactive nodes (hover = preview, click = zoom in)
- **Connections** between stations on different lines show dependencies
- **Scrolling** is vertical (not horizontal)
- Pinch/scroll to zoom between levels
- Breadcrumb trail shows current depth: `Strategy > Theme > Project > Phase > Item`

### AI Interface: C64 CLI Bar

A **Commodore 64-inspired command bar** fixed at the bottom of the screen.

```
┌──────────────────────────────────────────────────────────────────────┐
│ > ask me anything...█                                                │
└──────────────────────────────────────────────────────────────────────┘
```

- Monospace font (e.g., "Press Start 2P", "VT323", or "IBM Plex Mono")
- Blinking block cursor
- Retro color scheme for the bar (dark background, light text, maybe phosphor green or C64 blue)
- Natural language input — type questions, commands, or searches
- Responses appear above the bar in a slide-up panel (same retro style)
- AI-generated content labeled with `[AI]` prefix

### Color Palette — R&D Lab Identity

**Not** Waterschap branding. An independent, bold palette:

| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Background | Deep charcoal | `#1a1a2e` | Canvas background |
| Surface | Dark slate | `#16213e` | Cards, panels |
| Primary | Electric blue | `#0f3460` | Metro lines, primary actions |
| Accent 1 | Vivid cyan | `#00d2ff` | Highlights, active states, CLI cursor |
| Accent 2 | Signal orange | `#e94560` | Warnings, deadlines, attention |
| Accent 3 | Neon green | `#00ff88` | Success, completed, AI responses |
| Accent 4 | Soft purple | `#7b68ee` | Knowledge, documentation |
| Text primary | Off-white | `#e8e8e8` | Main text |
| Text secondary | Muted gray | `#8892b0` | Secondary text, labels |
| Metro line colors | Per theme | Dynamic | Each strategic theme gets a unique metro line color |

### Typography

| Element | Font | Size | Weight |
|---------|------|------|--------|
| Station labels | Monospace (VT323 / IBM Plex Mono) | 14-16px | Regular |
| Line labels / headings | Monospace | 18-24px | Bold |
| Body text (detail views) | Sans-serif (Inter / IBM Plex Sans) | 14px | Regular |
| CLI bar | Monospace (Press Start 2P or VT323) | 14px | Regular |
| Metro map annotations | Monospace | 12px | Regular |

### Design Elements

- **Pixel accents**: Subtle pixel-art decorations for status icons, badges
- **Scanline overlay** (optional, subtle): Very faint scanline effect on the CLI bar area
- **Station dots**: Clean circular nodes on metro lines, filled when active/completed, outlined when pending
- **Connection lines**: Bezier curves for dependencies, straight horizontal/vertical lines for lifecycle phases
- **Hover states**: Glow effect (box-shadow with accent color)
- **Transitions**: Smooth zoom animations between levels (300-500ms ease)
- **Breadcrumbs**: Top-left, monospace, shows zoom path

### Information Density

- **Spacious and minimal** at each level
- Show only station names and status dots on the map
- Detail reveals on hover/zoom — don't clutter the map
- Whitespace is a feature, not wasted space

### Language

- **Bilingual NL/EN**: Dutch as default, English as toggle
- **Tone**: Informal but professional. "Je" not "u". Concise labels.
- **AI tone**: Helpful, direct, slightly playful. Matches the retro-futurism vibe.

### Responsive Behavior

- Desktop: Full canvas with zoom/pan
- Tablet: Simplified canvas, larger touch targets
- Mobile: List fallback with metro line colors preserved (full canvas not practical on small screens)

### Component Library Direction

Given the custom nature of this UI, we'll use:
- **Tailwind CSS** for utility styling
- **Custom Vue components** for the metro map (canvas-based or SVG)
- **No off-the-shelf UI library** (PrimeVue etc. won't match this aesthetic)
- Consider **D3.js** or **Pixi.js** for the zoomable canvas
- **VueUse** for gestures (pinch, zoom, pan)