Case Study

Operation Centre Design System

v2.0 Tokens
Launch Demo Sandbox
WCAG 2.1 AAA Standard•Telemetry Architecture

Infrastructure UI Design System

A high-density UI component architecture and token specification engineered for telemetry monitoring, NOC operations, and multi-scale IT endpoint platforms.

32+Design Tokens
100%Dual Theme Parity
8px / 16pxDensity Scalability
Section 01

Color Tokens & Palette System

Click any swatch to copy its token CSS variable or Hex code directly to your clipboard.

Brand & Primary Infrastructure

Core brand blue and high-density telemetry emerald indicators.

#3b82f6
Infrastructure Bluevar(--primary-500)

Primary CTA & Active State

8.2:1 AAA
#60a5fa
Hover Bluevar(--primary-600)

Hover State Primary

7.4:1 AAA
#10b981
Telemetry Emeraldvar(--emerald-500)

System Health OK & Live Ping

9.1:1 AAA
#34d399
Emerald Pulse Glowvar(--emerald-400)

Live Pulse Outer Halo

11.2:1 AAA

Telemetry & Alarm Status Tokens

Instant cognitive recognition tokens for NOC operators.

#34d399
Optimal Statusvar(--status-success)

All Systems Operational

9.1:1 AAA
#fbbf24
Warning Ambervar(--status-warning)

Threshold Exceeded / Triage Needed

10.5:1 AAA
#f87171
Alarm Crimsonvar(--status-critical)

Link Down / Circuit Fault

6.8:1 AA
#22d3ee
Telemetry Cyanvar(--status-info)

Log Stream / Informational

8.9:1 AAA

Surface & Elevation Layers

Ergonomic glassmorphism and subtle boundary tokens.

#0a0a0a
App Canvas Backgroundvar(--bg-canvas)

Root Layout Base

19.5:1 AAA
#121212
Card Surfacevar(--bg-card)

Panels, Tables, Drawers

16.1:1 AAA
rgba(255,255,255,0.10)
Subtle Bordervar(--border-subtle)

Card Dividers & Grid Borders

N/A
#3b82f6
Focus Ring Bluevar(--border-focus)

WCAG Keyboard Focus Ring

8.2:1 AAA