Mission Control — Design Review
Cyberpunk Glass Concept v1 · HyreMedia
Concept 2 — Cyberpunk Glass
Design Concept · March 2026

Mission Control
Cyberpunk Glass

A full redesign concept for the HyreMedia command center. Pure black background, frosted glass cards, neon glow accents. Scroll through each page and leave your feedback below each one.

🎨 Designed by Ren 📄 7 pages 🚀 Ready for Kai to build
Page 01

Command Center

Your mission-critical overview. KPI stats, active deals, needs-attention alerts, and live agent activity — all at a glance the moment you open the app.

🏠 Home / Dashboard
mission-control.decypherclaw.cloud /
Command Center — Cyberpunk Glass
✓ Key Changes
  • Full sidebar labels replace cryptic letter abbreviations
  • KPI chips with neon glow borders — dollar, chart, email, bot icons
  • 3-column layout: alerts / deals / live activity
  • Agent pulse dots show real-time status
  • More breathing room — 24px card padding throughout
↗ Design Direction
  • Pure black bg (#000000) — no gray, no navy
  • Electric purple (#8b5cf6) as primary accent
  • Cyan (#06b6d4) for data/numbers
  • Frosted glass cards with blur + purple border
  • Hot pink (#ec4899) for alerts and urgent states
💬 Matt's feedback on Command Center
Page 02

Pipeline

Kanban board for all brand deals. Neon-colored stage columns, urgency-coded deal cards, search + filter bar. Everything you need to close faster.

💼 Brand Deals
mission-control.decypherclaw.cloud /pipeline
Pipeline — Cyberpunk Glass
✓ Key Changes
  • Search bar + filter chips added at top
  • Column headers color-coded by stage with neon top border
  • Deal cards show "next action" in small italic
  • Age-based urgency: deals 3+ days old get amber glow
  • 🔥 Hot deals get flame icon with red pulse
↗ Stage Colors
  • New → purple border
  • Contacted → cyan border
  • Negotiating → amber border
  • Signed → green border + glow
  • Delivered → gray (complete)
💬 Matt's feedback on Pipeline
Page 03

Approvals

The decision center. Henry drafts, you approve. Each card shows the full context, the AI recommendation, and the draft — collapsed by default to keep it scannable.

✅ Decisions
mission-control.decypherclaw.cloud /approvals
Approvals — Cyberpunk Glass
✓ Key Changes
  • Henry's reasoning collapsed by default — "Show reasoning" to expand
  • Approve button: neon green filled (high contrast)
  • Reject button: neon red outlined (clear but not alarming)
  • Email draft in cyan-bordered code block panel
  • Bulk "Approve All" with confirmation step
↗ UX Philosophy
  • Card height reduced 40% via collapsed state
  • See 3x more approvals per scroll
  • Type filter keeps focus: Email / Content / Deploy
  • Badge count synced to actual items (no mismatch)
  • Timestamp + agent shown as subtle metadata
💬 Matt's feedback on Approvals
Page 04

Agents

Your AI team at a glance. Each agent's current task, token usage, cost, and status — live. Role-colored cards make it instant to find who's doing what.

🤖 AI Team
mission-control.decypherclaw.cloud /agents
Agents — Cyberpunk Glass
✓ Key Changes
  • 3-column even grid (3+3+1 → 3+3+1 stays, last card centered)
  • Role-color border: purple=Henry, pink=Nova, blue=Kai, green=Stack
  • Emoji avatar in large glowing circle (replaces letter)
  • Model version styled separately from role name
  • Staleness: "13h ago" shown in amber if > 1 hour inactive
↗ Card Anatomy
  • Avatar circle (top center) with pulse dot
  • Name + role (white / colored)
  • Current task (italic gray)
  • Stats row: Tasks · Tokens · Cost
  • Capabilities as glass pill tags
💬 Matt's feedback on Agents
Page 05

Revenue

Your financial command center. Track what's collected, what's booked, your cost structure, and agent spend — all in one view.

💰 Finance
mission-control.decypherclaw.cloud /revenue
Revenue — Cyberpunk Glass
✓ Key Changes
  • $0 revenue shows context: "First deal closes ~April 3"
  • Bar chart has Y-axis scale + hover tooltips
  • COGS breakdown with neon progress bars
  • Agent budget tracker with per-agent cost bars
  • Active pipeline links directly to deal page
↗ Chart Colors
  • Collected → neon green bars with glow
  • Booked → cyan bars
  • Pipeline → purple dashed outline
  • Costs → amber (warning color)
  • Net profit → white bold number (hero stat)
💬 Matt's feedback on Revenue
Page 06

Team

Org structure and identity. Matt at the top, Henry in the middle, agents below — with visual hierarchy lines showing the reporting structure. Different from Agents: this is WHO, not WHAT.

👥 Org Chart
mission-control.decypherclaw.cloud /team
Team — Cyberpunk Glass
✓ Key Changes
  • Visual hierarchy lines connect Matt → Henry → agents
  • Matt's card: gold border, larger size, "FOUNDER" badge
  • Henry's card: purple border, CEO badge
  • Agent cards: color-coded by role, smaller than execs
  • Mission statement glowing at bottom
↗ Differentiation from Agents
  • Team = identity, org structure, relationships
  • Agents = operational data, tasks, token usage
  • Team page has no cost/token data
  • Team page shows full skills without truncation
  • Future: team page shows hire date + milestones
💬 Matt's feedback on Team
Page 07

Office HQ

The wildcard page — and honestly one of the best. Cyberpunk pixel art headquarters with neon grid floors, agent sprites with role-color auras, and a live activity feed. This is what makes HyreMedia feel like a world.

🏢 Virtual HQ
mission-control.decypherclaw.cloud /office
Office HQ — Cyberpunk Glass
✓ Key Changes
  • Neon cyan grid lines on floor tiles (contrast fix)
  • Agent sprites have role-color aura rings
  • Room labels as glowing neon signs (CEO Suite, Dev Lab, etc.)
  • Meeting room glows purple when occupied
  • Hover tooltip shows current task prominently
↗ The Vision
  • This is the page that goes viral on Twitter
  • "My AI company has a virtual office" is a content moment
  • Screenshot-worthy by design
  • Future: animated agents moving between rooms
  • Mobile: vertical scroll through rooms (not the grid)
💬 Matt's feedback on Office HQ
Next Step
Ready to build?
Leave your feedback on each page above. When you're happy with the direction, Henry will brief Kai with the full component spec and we'll start shipping Cyberpunk Glass v1.
📧 Email Feedback to Ren 🚀 View Current v3