# Nexus Road Dashboard — Design Ideas
## Design Philosophy Options
**Design Movement:** Brutalist Terminal / Hacker Ops Room
**Core Principles:**
1. Raw, unfiltered data presentation — no decorative chrome, every pixel earns its place
2. Monospace typography as a design element, not just code formatting
3. High-contrast neon-on-black with deliberate scan-line texture
4. Information density over whitespace — this is a war room, not a landing page
**Color Philosophy:** Near-black (#0a0a0a) background. Acid green (#00ff41) as the primary signal colour — the colour of old CRT terminals, of COBOL listings, of the Matrix. Amber (#ffb300) for warnings and secondary metrics. Red (#ff3b3b) for danger/failure states. The palette says: "This was built by someone who remembers when computers looked like this."
**Layout Paradigm:** Asymmetric grid with a narrow left sidebar (fixed, dark) showing the Swarm agent status as a vertical stack of live indicators. Main content area uses a 3-column card grid that breaks into a full-width "command log" at the bottom. No hero section — the dashboard IS the hero.
**Signature Elements:**
1. Blinking cursor `_` appended to all live metric values
2. Faint scan-line overlay (CSS repeating-linear-gradient) across the entire viewport
3. "SYSTEM ONLINE" / "AGENT ACTIVE" badge labels in monospace caps
**Interaction Philosophy:** Hover states reveal raw data (e.g., hovering the MRR bar shows the exact calculation: "107 members × $93.89 = $10,046"). Click-to-copy on all code snippets. No smooth scroll — instant jumps feel intentional.
**Animation:** Metrics count up from 0 on page load (like a boot sequence). Progress bars fill left-to-right with a slight flicker. New "log entries" slide in from the bottom of the command log.
**Typography System:** `JetBrains Mono` for all numbers, labels, and code. `Space Grotesk` (bold, wide-tracked) for section headings. Body copy in `JetBrains Mono` at 14px. The contrast between the two fonts creates the "human writing about machines" tension that defines the channel.
0.08
**Design Movement:** Industrial Data Journalism / The Economist meets a server room
**Core Principles:**
1. Editorial clarity — data tells the story, design frames it
2. Deliberate use of negative space to make numbers feel weighty
3. Strict typographic hierarchy: one display font, one data font, one body font
4. Muted palette punctuated by a single electric accent
**Color Philosophy:** Off-white (#f5f0e8) background with dark charcoal (#1a1a1a) text. Electric lime (#c8f135) as the sole accent — used only for active states, progress fills, and CTAs. The restraint makes the accent feel like a signal flare.
**Layout Paradigm:** Newspaper-style column grid. A large "masthead" at the top with the current MRR in a massive display typeface. Below, a 2-column layout: left column is the narrative (phase tracker, milestones), right column is the data (charts, agent status). Footer is a dense information strip.
**Signature Elements:**
1. Thick horizontal rules (4px) separating sections, like newspaper column dividers
2. Large ordinal numbers (01, 02, 03) as section markers
3. Inline "LIVE" badge in red next to any real-time metric
**Interaction Philosophy:** Hover states use underlines, not backgrounds. The page feels like a document you're reading, not an app you're using.
**Animation:** Subtle — numbers count up once on load, nothing loops. The page should feel calm and authoritative.
**Typography System:** `Bebas Neue` for the hero MRR number (massive, condensed). `DM Mono` for all data values. `DM Sans` for body copy. The combination reads as "serious journalist who codes."
0.07
**Design Movement:** Cyberpunk Operations Dashboard / Bloomberg Terminal meets Blade Runner
**Core Principles:**
1. Deep navy/void background with layered depth — cards feel like they float above the surface
2. Data visualisation as art — charts and progress bars are the primary visual elements
3. Micro-detail obsession: subtle borders, inner glows, pixel-precise alignment
4. The dashboard communicates urgency and momentum at a glance
**Color Philosophy:** Deep void (#080c14) background. Electric blue (#0ea5e9) as the primary data colour. Neon green (#22c55e) for positive/growth metrics. Amber (#f59e0b) for in-progress states. The palette evokes a trading floor or mission control — high stakes, high information.
**Layout Paradigm:** Full-bleed dark background. Top navigation bar with the Nexus Road logo and live "system time". Main content in a 12-column grid with cards of varying widths (some span 4 cols, some span 8). The MRR progress bar spans the full width below the nav — always visible, always the primary metric.
**Signature Elements:**
1. Thin 1px glowing borders on cards (box-shadow with the accent colour)
2. Hexagonal agent status indicators (SVG) in the Swarm section
3. A live "activity feed" in the bottom-right showing recent milestones as they are added
**Interaction Philosophy:** Cards lift on hover (subtle translateY + shadow increase). Charts animate on scroll-into-view. The dashboard should feel alive.
**Animation:** Framer Motion entrance animations — cards fade+slide in staggered. The MRR progress bar animates from 0 to current value on load. Agent status indicators pulse slowly when "ACTIVE".
**Typography System:** `Orbitron` for the main MRR number and section headers (futuristic, geometric). `IBM Plex Mono` for all data values and agent names. `Inter` for body copy and descriptions. The three-font system creates clear hierarchy: mission-critical → data → context.
0.09
## Selected Design: Option 1 — Brutalist Terminal / Hacker Ops Room
This is the only design that is **authentic to the channel's identity**. The CTO started with COBOL on a green-screen terminal. The Swarm runs on £30 Mac Minis running Ubuntu Server. The brand promise is "raw, unfiltered." A polished Bloomberg-style dashboard would feel like a betrayal of that promise. The terminal aesthetic IS the differentiator.