Add style guide: metro map UI with retro-futurism aesthetic

Design interview completed. Core decisions:
- Zoomable metro map as primary navigation (strategy > project > detail)
- C64-style CLI bar for AI assistant at bottom
- Independent R&D color palette (dark theme, electric blues, neon accents)
- Full retro-futurism: monospace fonts, pixel accents, glow effects
- Bilingual NL/EN, informal tone
- Custom components (no off-the-shelf UI library)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

STYLE_GUIDE.md

@@ -0,0 +1,102 @@
+# 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)