7d14ca7b3b
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>
4.8 KiB
4.8 KiB
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)