berkus
/
wifi-densepose
mirror of https://github.com/ruvnet/wifi-densepose.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: rewrite ADR-053 UI design system with practical terminology 

Replace sci-fi themed language (Asimov Foundation references, Prime Radiant,
Encyclopedia Galactica, Terminus, Seldon Crisis) with clear, practical
terminology that engineers and operators can immediately understand.

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
ruv 2026-03-06 16:11:30 -05:00
parent a5049d3b35
commit df7f9a5e02
1 changed files with 43 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
docs/adr/ADR-053-ui-design-system.md
View File

@ -1,4 +1,4 @@
# ADR-053: UI Design System — Foundation Book + Unity-Inspired Interface
# ADR-053: UI Design System — Dark Professional + Unity-Inspired Interface
| Field | Value |
|-------|-------|
@ -9,52 +9,52 @@
## Context
RuView Desktop (ADR-052) needs a UI design system that communicates authority, precision, and control — befitting a hardware management control plane for embedded sensing infrastructure. The interface must handle dense data (CSI heatmaps, node registries, log streams, mesh topologies) without feeling overwhelming, while remaining usable by both engineers and field operators.
RuView Desktop (ADR-052) needs a UI design system that communicates precision and control — befitting a hardware management control plane for embedded sensing infrastructure. The interface must handle dense data (CSI heatmaps, node registries, log streams, mesh topologies) without feeling overwhelming, while remaining usable by both engineers and field operators.
Two established design languages map to this requirement:
Two design inspirations:
1. **Foundation Book** — clean typographic hierarchy, structured layouts, modular card systems, and professional content presentation. Foundation's grid system and component philosophy prioritize clarity and scanability.
1. **Data-first professional tools** — Dense information displays where data speaks for itself. Clean typography, structured layouts, and deliberate use of color for status. The interface shows what matters and hides what doesn't. Think: network monitoring dashboards, embedded systems IDEs, infrastructure control panels.
2. **Unity Editor** — dockable panel system, inspector/hierarchy/scene separation, property grids, dark professional theme, and dense-but-organized data display. Unity's UI is purpose-built for managing complex real-time systems — exactly what RuView is.
2. **Unity Editor** — Dockable panel system, inspector/hierarchy/scene separation, property grids, dark professional theme, and dense-but-organized data display. Unity's UI is purpose-built for managing complex real-time systems — exactly what RuView needs.
The combination yields an interface that reads like a professional technical reference (Foundation Book) but operates like a real-time system control panel (Unity Editor).
The combination yields a professional control panel for WiFi sensing infrastructure. Data is organized into scannable panels with clear hierarchy. Status is communicated through consistent color coding. The layout adapts from high-level overview down to individual node details through progressive disclosure.
## Decision
### Design Principles
1. **Content-first typography** — Headings establish hierarchy. Data is always the hero, not decoration.
2. **Panel-based layout** — Resizable, collapsible panels inspired by Unity's docking system.
3. **Dark professional theme** — Dark backgrounds (#1a1a2e, #16213e) with high-contrast data (#e0e0e0).
4. **Status through color** — Green (healthy), amber (warning), red (error), blue (info). No gratuitous color.
5. **Monospace for data** — All technical values (MAC addresses, firmware versions, CSI amplitudes) use monospace.
6. **Progressive disclosure** — Summary first, detail on interaction. Dashboard cards expand to detail views.
7. **Powered by rUv** — Branding is subtle: footer tagline, about dialog, splash screen.
1. **Data is the interface** — The system reveals patterns through visualization, not through explanation. Every pixel earns its place.
2. **Precision typography** — Typography is clean and authoritative. Technical values are displayed without ambiguity. Labels are concise.
3. **Panel-based layout** — Dockable regions inspired by Unity's panel system. The operator can see the entire mesh at a glance, then drill into any node.
4. **Status through color** — Deliberate color coding: green (online), amber (degraded), red (offline/failed), blue (scanning/new). No gratuitous color.
5. **Progressive disclosure** — Dashboard shows the overview. Clicking a node reveals its details. Summary first, detail on interaction.
6. **Dual typography** — Monospace for all technical values (MAC addresses, firmware versions, CSI amplitudes). Sans-serif for labels and descriptions. The contrast signals "data vs. context."
7. **Powered by rUv** — Subtle branding: footer tagline, about dialog, splash screen.
### Color System
```css
:root {
/* Background layers (darkest to lightest) */
/* Background layers */
--bg-base: #0d1117; /* App background */
--bg-surface: #161b22; /* Panel backgrounds */
--bg-elevated: #1c2333; /* Cards, modals */
--bg-elevated: #1c2333; /* Cards, modals, dropdowns */
--bg-hover: #242d3d; /* Hover state */
--bg-active: #2d3748; /* Active/selected state */
/* Text hierarchy */
--text-primary: #e6edf3; /* Headings, primary content */
--text-secondary: #8b949e; /* Labels, descriptions */
--text-muted: #484f58; /* Disabled, hints */
--text-muted: #484f58; /* Disabled, hints, placeholders */
/* Status colors */
--status-online: #3fb950; /* Node online, server running */
--status-warning: #d29922; /* Degraded, OTA in progress */
--status-error: #f85149; /* Offline, flash failed */
--status-info: #58a6ff; /* Discovery, scanning */
/* Status indicators */
--status-online: #3fb950; /* Node online, healthy */
--status-warning: #d29922; /* Degraded, needs attention */
--status-error: #f85149; /* Offline, failed, critical */
--status-info: #58a6ff; /* Scanning, discovering, info */
/* Accent */
--accent: #7c3aed; /* rUv purple — buttons, active nav */
--accent: #7c3aed; /* rUv purple — primary actions */
--accent-hover: #6d28d9;
/* Borders */
@ -70,7 +70,7 @@ The combination yields an interface that reads like a professional technical ref
### Typography Scale
```css
/* Foundation Book — typographic hierarchy */
/* Typographic hierarchy */
.heading-xl { font: 600 28px/1.2 var(--font-sans); } /* Page titles */
.heading-lg { font: 600 20px/1.3 var(--font-sans); } /* Section titles */
.heading-md { font: 600 16px/1.4 var(--font-sans); } /* Card titles */
@ -81,32 +81,34 @@ The combination yields an interface that reads like a professional technical ref
.data-lg { font: 500 18px/1.2 var(--font-mono); } /* Key metrics */
```
### Layout System — Unity-Inspired Panels
### Layout System
Three-region layout: navigation sidebar, node list, and detail inspector. Unity's docking system provides the mechanical framework.
```
+--[ Sidebar ]--+--[ Main Content ]------------------------------+
+--[ Sidebar ]--+--[ Main ]-------------------------------------+
| | |
| [Nav Items] | +--[ Toolbar ]-------------------------------+ |
| [Nav Items] | +--[ Command Bar ]---------------------------+ |
| | | Breadcrumb | Actions | Search | |
| Dashboard | +-------+-----------------------------------+ |
| Nodes | | | | |
| Flash | | List | Detail / Inspector | |
| OTA | | Panel | Panel | |
| WASM | | | | |
| Flash | | Node | Detail Inspector | |
| OTA | | List | (selected node properties) | |
| Edge Modules | | | | |
| Sensing | | | [Property Grid] | |
| Mesh | | | [Status Badges] | |
| Mesh View | | | [Status Indicators] | |
| Settings | | | [Action Buttons] | |
| | | | | |
+-[ Status Bar ]+--+-------+-----------------------------------+ |
| rUv | 3 nodes online | Server: running | 127.0.0.1:8080 |
| rUv | 3 nodes online | Server: running | Port: 8080 |
+---------------------------------------------------------------+
```
**Panel behaviors:**
- Sidebar collapses to icon-only on narrow windows
- List/Detail split is resizable via drag handle
- Inspector panel scrolls independently
- Status bar shows global system state at a glance
- Node List / Inspector split is resizable via drag handle
- Inspector scrolls independently — drill into any node without losing the list
- Status Bar shows global system state at a glance (node count, server status, port)
### Component Library
@ -137,22 +139,24 @@ Status dot uses `--status-online/warning/error`. Card background shifts on hover
Progress bar uses `--accent` fill with subtle pulse animation during active writes.
#### 3. MeshTopologyGraph
#### 3. Mesh Topology View
Interactive visualization of the entire sensing network as a force-directed graph. Each node is a circle. Edges represent signal paths. The coordinator node is visually distinct (larger, outlined).
```
+-- Mesh Topology ------------------------------------------+
| |
| [Node 0]----[Node 1] |
| | \ / | |
| | [C] | C = Coordinator |
| | [Coordinator] | Coordinator = TDM master |
| | / \ | |
| [Node 2]----[Node 3] |
| |
| Sync drift: ±0.3ms | TDM cycle: 50ms | 4/4 online |
| Drift: ±0.3ms | Cycle: 50ms | 4/4 nodes online |
+-----------------------------------------------------------+
```
Force-directed graph using D3 or a lightweight canvas renderer. Nodes are color-coded by health. Edge thickness indicates signal strength. Clicking a node opens the Inspector panel.
Force-directed graph using D3 or a lightweight canvas renderer. Nodes are color-coded by status (green/amber/red). Edge thickness indicates signal strength. Clicking a node opens its detail in the Inspector panel. The graph updates in real-time as nodes join, leave, or change status.
#### 4. PropertyGrid (Unity Inspector-style)
@ -238,7 +242,7 @@ Minimal and purposeful:
- Professional, data-dense UI suitable for hardware management
- Consistent design language across all 7 pages
- Foundation Book typography ensures readability at all information densities
- Dual typography (mono + sans-serif) ensures readability at all information densities
- Unity-inspired panels feel natural to engineers familiar with IDE/editor tools
- Dark theme reduces eye strain for extended monitoring sessions
@ -257,6 +261,5 @@ Minimal and purposeful:
- ADR-052: Tauri Desktop Frontend
- Unity Editor UI Guidelines: https://docs.unity3d.com/Manual/UIE-USS.html
- Foundation CSS Framework: https://get.foundation/
- Inter font: https://rsms.me/inter/
- JetBrains Mono: https://www.jetbrains.com/lp/mono/