From 7d14ca7b3b094ab7db68c4271ae72797ff4b0972 Mon Sep 17 00:00:00 2001 From: znetsixe Date: Wed, 1 Apr 2026 13:37:55 +0200 Subject: [PATCH] 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) --- STYLE_GUIDE.md | 102 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 STYLE_GUIDE.md diff --git a/STYLE_GUIDE.md b/STYLE_GUIDE.md new file mode 100644 index 0000000..d17fbd3 --- /dev/null +++ b/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)