design guide

design.md

@@ -0,0 +1,334 @@
+# Cyber-Industrial Node-Based UI Design Reference
+
+## Overall Style
+
+A **high-end professional node-based video processing application** with
+a minimalist industrial aesthetic.
+
+The interface feels like software used in a TV broadcast control room,
+media server, or VJ system rather than consumer software.
+
+### Design Keywords
+
+-   minimal
+-   monochrome
+-   cyber-industrial
+-   engineering UI
+-   futuristic without glowing neon
+-   functional
+-   precision
+-   technical
+-   military HUD inspired
+-   professional AV software
+-   dark command center
+-   node graph editor
+-   data visualization
+-   clean wireframe
+
+There are almost no decorative elements. Everything exists because it
+serves a purpose.
+
+## Color Palette
+
+  Element              Color
+  -------------------- ----------------------
+  Primary background   `#060606`
+  Panels               `#0B0B0B`, `#101010`
+  Borders              `#2A2A2A`, `#353535`
+  Primary text         `#E6E6E6`
+  Secondary text       `#8B8B8B`
+  Muted labels         `#666666`
+  Accent               `#FF4040`
+
+The red accent is reserved only for: - recording indicator - selected
+source - status light
+
+No blue, green, gradients, or unnecessary colors.
+
+## Typography
+
+Suggested fonts: - IBM Plex Mono - JetBrains Mono - Space Mono - Geist
+Mono - SF Mono - Eurostile - DIN
+
+Characteristics: - ALL CAPS - generous letter spacing - thin font
+weight - technical appearance
+
+## Layout
+
+Three-column application layout:
+
+-   **Left:** Sources / Navigation
+-   **Center:** Node graph workspace
+-   **Right:** Inspector
+-   **Bottom:** Preview + system monitors
+-   **Top:** Thin status bar
+
+Everything aligns to a strict grid.
+
+## Panels
+
+-   Rectangular
+-   No rounded corners
+-   No shadows
+-   No blur
+-   Thin 1px borders
+-   Flat appearance
+
+## Grid
+
+Use dotted separators instead of thick dividers.
+
+Background may include subtle engineering-style dot matrices.
+
+## Node Graph
+
+-   Large black canvas
+-   White Bézier connection lines
+-   Thin anti-aliased wires
+-   Circular input/output sockets
+
+### Node Structure
+
+``` text
++----------------------+
+| TEST PATTERN         |
+|                      |
+| VIDEO ○              |
+| AUDIO ○              |
++----------------------+
+```
+
+Each node contains: - title - icon - ports - small ID
+
+## Icons
+
+Wireframe only.
+
+Examples: - camera - folder - network - monitor - mixer - speaker -
+antenna
+
+No filled icons.
+
+## Controls
+
+Text-based buttons:
+
+``` text
+[ RUN ]
+[ STOP ]
+[ DETACH NODE ]
+```
+
+Selection is indicated with a small red dot.
+
+## Navigation
+
+Example sources:
+
+-   TEST PATTERN
+-   NDI INPUT
+-   DECKLINK
+-   MEDIA FILE
+-   CAMERA
+-   COLOR BAR
+-   BLACK
+-   IMAGE SEQ
+-   SCREEN CAPTURE
+-   STREAM INPUT
+
+## Inspector
+
+Displays: - Node name - Type - ID - Resolution - FPS - Pixel format -
+Audio settings - Status
+
+## Preview
+
+Wide cinematic preview panel with thin borders and minimal chrome.
+
+## System Monitor
+
+Shows: - CPU - GPU - Memory - Uptime
+
+Simple monochrome progress bars.
+
+## Spacing
+
+Use a consistent spacing system:
+
+-   8 px
+-   16 px
+-   24 px
+-   32 px
+
+## Borders
+
+-   1px strokes
+-   No shadows
+-   No elevation
+
+## Visual Language
+
+Built from: - lines - boxes - dots - wireframes - text
+
+No decorative artwork.
+
+## Motion
+
+-   subtle fades
+-   smooth cable animation
+-   no bounce
+-   no exaggerated easing
+
+## Inspirations
+
+-   Blackmagic Fusion
+-   TouchDesigner
+-   Resolume Arena
+-   vvvv Gamma
+-   Unreal Blueprint
+-   VizRT
+-   Ross Video
+-   Disguise Media Server
+-   OBS Studio (professional redesign)
+-   CAD software
+-   Sci-fi HUDs (restrained)
+
+## Design Principles
+
+-   Function over decoration
+-   High information density without clutter
+-   Precision and clarity
+-   Minimal color usage
+-   Monochrome-first
+-   Technical engineering aesthetic
+-   Strict grid alignment
+-   Flat 2D design
+-   Every pixel serves a purpose
+
+## Condensed Prompt
+
+> Design a professional node-based broadcast media application with a
+> minimalist cyber-industrial aesthetic. Use an almost entirely
+> monochrome palette: matte black backgrounds (#060606), charcoal panels
+> (#101010), thin gray 1px borders (#2A2A2A), white technical
+> typography, and a single red accent (#FF4040) reserved for status
+> indicators. Organize the interface into a left source browser, central
+> node graph canvas, right inspector panel, top status bar, and bottom
+> preview/system monitors. The node graph uses white wireframe nodes
+> with rounded Bézier cable connections, circular input/output ports,
+> and minimal icons. Typography is uppercase, monospaced, and widely
+> spaced. Panels are flat rectangles with no shadows, no gradients, and
+> no rounded corners. Separate sections with dotted divider lines and
+> subtle engineering-grid patterns. The overall feel should resemble
+> TouchDesigner, Blackmagic Fusion, Unreal Blueprint, and professional
+> TV broadcast control software---precise, understated, highly
+> functional, and engineered rather than decorative.
+
+# Improving the Cyber-Industrial UI
+
+## Executive Summary
+
+The current design is visually excellent: minimal, professional, and
+cohesive. However, it prioritizes aesthetics over operational
+efficiency. The goal should be to preserve the visual identity while
+increasing scanability, reducing interaction cost, and improving
+workflow for power users.
+
+## Strengths
+
+-   Strong visual identity.
+-   Excellent monochrome discipline.
+-   Consistent spacing and alignment.
+-   Professional engineering aesthetic.
+-   Clean node graph.
+-   Low visual noise.
+
+## Opportunities
+
+### 1. Stronger Visual Hierarchy
+
+Increase contrast between: - headings - labels - values - metadata
+
+Important values should be immediately recognizable.
+
+### 2. Better Color Semantics
+
+Keep monochrome, but reserve accent colors consistently:
+
+-   Red = error / recording
+-   Amber = warning
+-   Green = connected / healthy
+-   Blue = selection or active editing
+
+Use colors sparingly.
+
+### 3. Improve Node Readability
+
+-   Larger node titles
+-   Better spacing around ports
+-   Optional node color tags
+-   Display processing state
+
+### 4. Inspector Improvements
+
+Group settings into collapsible sections: - General - Video - Audio -
+Performance - Metadata
+
+### 5. Better Status Feedback
+
+Display: - dropped frames - latency - bitrate - GPU memory - node
+execution time
+
+### 6. Richer Connection Visualization
+
+Differentiate: - video - audio - metadata - control using line styles or
+subtle color accents.
+
+### 7. Faster Navigation
+
+-   searchable node palette
+-   quick actions
+-   command palette
+-   keyboard-first workflow
+
+### 8. Dockable Workspace
+
+Allow panels to: - float - resize - hide - dock
+
+### 9. Better Empty States
+
+Guide users with: - templates - examples - drag-and-drop hints
+
+### 10. Accessibility
+
+-   scalable fonts
+-   colorblind-safe indicators
+-   larger click targets
+-   keyboard navigation
+
+## Micro-Interactions
+
+Keep animations subtle: - smooth node creation - cable routing
+animation - fade transitions - lightweight hover feedback
+
+## Modern Enhancements
+
+Optional: - minimap improvements - graph bookmarks - performance
+overlays - execution profiling - graph search - breadcrumbs - undo
+history visualization
+
+## Design Principles
+
+Maintain: - flat design - monochrome-first palette - thin borders -
+generous whitespace - engineering precision
+
+Avoid: - glassmorphism - excessive shadows - neon lighting - oversized
+icons - decorative animations
+
+## Summary
+
+The design should evolve toward a professional engineering workstation
+rather than a futuristic dashboard. Every improvement should increase
+usability without sacrificing clarity or introducing visual noise. The
+software should feel fast, precise, predictable, and built for experts
+who spend hours inside the application.