command-center-ui

Command Center UI

"Mission Control. Global monitoring, real-time alerts, and high-stakes data visualization."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Dark/Black Backgrounds: Essential for a room full of glowing monitors (NOCs). It makes the data pop and reduces glare.
2. Maps & Topologies: The center of the UI is almost always a dark-mode geographical map or a node-based network topology.
3. Alert Hierarchy: 90% of the screen is calm and blue/grey. When a warning happens, it flashes bright amber or red to immediately draw the eye.

Visual DNA

• Colors: Pure black (#000000) or deep navy (#0B132B). Accents are electric cyan (#00FFFF), amber (#FFBF00), and critical red (#FF0000).
• Typography: Clean, tech-focused sans-serifs (Orbitron, Roboto, Share Tech).
• Styling: Glowing borders, radar sweeps, and stark, data-driven charts.

Web Implementation

• CSS Example:

body {
  background-color: #030a16;
  color: #8ab4f8;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  height: 100vh;
}

.panel {
  background-color: rgba(13, 27, 42, 0.8);
  border: 1px solid #1c355e;
  box-shadow: inset 0 0 2