← Back to hidekiaono.tech AI

Command center

A full screen operations dashboard for watching live network, fleet and security signals at a glance. Use it as the starting layout for any OCTO control room or wall display.

  • Use for Live monitoring walls
  • Min width 1100 px desktop
  • Stack HTML, CSS, three.js globe

Live specimen

Running template. Drag the globe, hover a hub, switch views. Numbered markers match the anatomy below.

OCTOOps
Global Command Center
1
00:00:00Live
4
Uptime99.98
Load58%
Singapore hub
Latency
12 ms
Sessions
3,415
Alerts
4
Traffic
124.3 Gb
Peers
5,744
Health
97%
Drag to orbit · Hover a hub
Specimen rendered at 1440 by 820. Data is simulated and refreshes every few seconds.

Anatomy

Five regions, read left to right in order of urgency.

  1. 1
    Header

    Product mark, screen title and a live clock. The clock dot is the only element that pulses.

  2. 2
    View control

    Segmented control for up to four views. It swaps data, never the layout.

  3. 3
    Metric column

    Inventory and throughput panels. Counts first, trend chart last.

  4. 4
    Globe stage

    The focal point. Two ring KPIs, one hub popover and a timeline scrubber.

  5. 5
    Ranking column

    Fleet status and a live league table with inline value bars.

Usage

Keep the screen calm so a real alert is the loudest thing on it.

Do

  • Keep one accent colour per panel and reserve plasma for incidents.
  • Show at most six numbers per panel, in tabular figures.
  • Keep the globe centred and let the side columns frame it.
  • Label every value with a plain word and a unit.

Don’t

  • Add glows, gradients or animation to panels that are not live.
  • Put text or controls on top of the globe’s centre.
  • Use the template under 1100 px wide without the stacked layout.
  • Mix more than two typefaces inside the specimen.

Specs

Values to copy when you rebuild the layout in another stack.

Grid

Columns
380 / fluid / 380
Under 1500 px
320 / fluid / 320
Gutter
20 px
Rows
72 / 44 / fluid
Under 700 px
1 column, globe first

Type scale

  • Screen titleSpace Grotesk 20 / 600
  • 19,284Inter 19 / 600 tabular
  • Body 13Inter 13 / 500
  • NODE INVENTORYInter 11 / 600 caps +8%

Panel tokens

Surface
rgba(10,16,36,.74)
Border
1 px white 8%
Radius
14 px
Padding
16 / 18 px
Accent
--cyan-500