Real-Time Monitoring

Also called: NOC dashboard, Live ops console, Observability UI

A dark ops-room console: status tiles first, pulsing live dots, a ticking clock and red/amber/green reserved for health status.

“Ops wall”Dashboards & DataEra: 2010s observability → todayTechySeriousTrustworthy

Open full screen ↗

realtime-monitoring / landingEN

realtime-monitoring / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm3pxRadius md5pxRadius lg7pxRadius xl10pxDensity×0.95Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

dark ops roompulsing live dotsstatus-first layouttraffic-light coloursLIVE indicatoralert bannermonospace timestampsuptime and latency tiles

Made for network-operations and on-call screens that stay open on a wall. A near-black slate canvas keeps glare down for 24/7 viewing; panels that report health carry a coloured status edge while charts and tables stay neutral, and the only saturated colours are the traffic-light statuses plus one signal blue for data. Live elements breathe — dots pulse, a LIVE pill blinks, timestamps and latencies sit in a monospace — and an alert banner pins the current incident above everything. Status widgets come before charts.

Best for

NOC / SRE wall displays and on-call consoles
AI model, API and infrastructure health
Logistics, fleet and IoT tracking
Live event, payment or trading operations

Avoid for

Marketing-led consumer products
Monthly reporting with no live data
Calm wellness or editorial brands

✓ Do

Show service status tiles before trend charts
Reserve green/amber/red for health status (red’s only extras: LIVE pill, chart now-marker, regression deltas, alerts count, destructive and validation-error text); blue for data, actions, alerts and checklist ticks
Pulse only live status dots (1.8s; 1.1s when failing) inside prefers-reduced-motion: no-preference
Print every timestamp and latency in a monospace with units
Colour KPI deltas by good/bad, not direction (escalations −9% is green, p95 latency +48 ms is red); otherwise green is only the healthy/online state, never buttons or attention items

✕ Don't

Don’t animate anything beyond the four live indicators (status-dot pulse, LIVE blink, clock tick, landing sweep); cards, charts and numbers never animate
Don’t use neon glow, scanlines or sci-fi brackets (that is HUD)
Don’t hide incidents below the fold
Don’t hue-rotate imagery into purple or magenta — art stays blue and slate

Not to be confused with

HUD / Sci-Fi FUI →HUD is fictional cinema UI with thin cyan wireframes and corner brackets; Real-Time Monitoring is a sober ops console with solid panels and traffic-light status.Dark Mode (OLED) →Dark Mode OLED is a general true-black theme; Real-Time Monitoring is a specific status-first layout with live pulses, alert banners and uptime tiles.Data-Dense Dashboard →Data-dense dashboards pack static analytics tables and charts; Real-Time Monitoring is a status-first live wall with pulsing dots, an incident banner and a ticking clock.Terminal CLI →Terminal CLI is monospace everything in green-on-black; Real-Time Monitoring uses a sans UI with mono only for numbers and timestamps.

On mobile

Lead with a pinned status strip (green “all systems operational” or the red incident banner) and a 2-up grid of service tiles, then the work queue. Keep pulses to status dots only (they are cheap CSS), use a solid dark tab bar with a red count badge on Alerts, and allow pull-to-refresh with a visible “updated 3s ago” stamp.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinBarlow Semi Condensed · 500/600/700

The quick brown fox

Heading · ThaiBai Jamjuree · 500/600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinBarlow · 400/500/600

Clear words make shared decisions.

Body · ThaiBai Jamjuree · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Bai Jamjuree’s squared, engineered loopless forms echo Barlow’s highway-signage grotesque, so Thai labels read with the same industrial, at-a-distance clarity.

Colour palette

Light

Dark

Design tokens

Radius	`sm 3px · md 5px · lg 7px · xl 10px · pill 999px`
Border	`1px`
Shadow	`0 0 0 1px rgba(0,0,0,0.2)`
Display	`clamp(2.6rem, 5.4vw, 4.4rem)`
Motion	`160ms cubic-bezier(.3,0,.2,1)`
Density	`×0.95`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Real-Time Monitoring (realtime-monitoring) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is dark: add class="dark" to <html>.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&family=Bai+Jamjuree:wght@400;500;600;700&display=swap
 */
:root {
  --radius: 7px;
  --background: #EEF1F5;
  --foreground: #0E1621;
  --card: #FFFFFF;
  --card-foreground: #0E1621;
  --popover: #FFFFFF;
  --popover-foreground: #0E1621;
  --primary: #1F6FE0;
  --primary-foreground: #FFFFFF;
  --secondary: #DDE3EA;
  --secondary-foreground: #0E1621;
  --muted: #F5F7FA;
  --muted-foreground: #556274;
  --accent: #F5F7FA;
  --accent-foreground: #0E1621;
  --destructive: #D12E3F;
  --border: #D3DAE3;
  --input: #D3DAE3;
  --ring: #1F6FE0;
  --chart-1: #1F6FE0;
  --chart-2: #7A8699;
  --chart-3: #6A9BEB;
  --chart-4: #164FA3;
  --chart-5: #3E4A5C;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0E1621;
  --sidebar-primary: #1F6FE0;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F5F7FA;
  --sidebar-accent-foreground: #0E1621;
  --sidebar-border: #D3DAE3;
  --sidebar-ring: #1F6FE0;
}

.dark {
  --background: #0A0E13;
  --foreground: #E6EDF3;
  --card: #111821;
  --card-foreground: #E6EDF3;
  --popover: #111821;
  --popover-foreground: #E6EDF3;
  --primary: #4C9AFF;
  --primary-foreground: #06101C;
  --secondary: #2A3647;
  --secondary-foreground: #E6EDF3;
  --muted: #18212C;
  --muted-foreground: #8D9AAB;
  --accent: #18212C;
  --accent-foreground: #E6EDF3;
  --destructive: #FF4D5E;
  --border: #243041;
  --input: #243041;
  --ring: #4C9AFF;
  --chart-1: #4C9AFF;
  --chart-2: #7F8DA3;
  --chart-3: #8FB8FF;
  --chart-4: #2F6FC4;
  --chart-5: #56637A;
  --sidebar: #111821;
  --sidebar-foreground: #E6EDF3;
  --sidebar-primary: #4C9AFF;
  --sidebar-primary-foreground: #06101C;
  --sidebar-accent: #18212C;
  --sidebar-accent-foreground: #E6EDF3;
  --sidebar-border: #243041;
  --sidebar-ring: #4C9AFF;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Real-Time Monitoring (realtime-monitoring) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is dark: add class="dark" to <html>.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&family=Bai+Jamjuree:wght@400;500;600;700&display=swap
 */
@theme {
  --color-bg: #EEF1F5;
  --color-surface: #FFFFFF;
  --color-surface-2: #F5F7FA;
  --color-text: #0E1621;
  --color-text-muted: #556274;
  --color-primary: #1F6FE0;
  --color-on-primary: #FFFFFF;
  --color-secondary: #DDE3EA;
  --color-on-secondary: #0E1621;
  --color-accent: #7A8699;
  --color-border: #D3DAE3;
  --color-success: #0E8A4A;
  --color-warning: #B87A00;
  --color-danger: #D12E3F;
  --color-chart-1: #1F6FE0;
  --color-chart-2: #7A8699;
  --color-chart-3: #6A9BEB;
  --color-chart-4: #164FA3;
  --color-chart-5: #3E4A5C;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 7px;
  --radius-xl: 10px;
  --radius-pill: 999px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 0 1px rgba(0,0,0,0.2);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.45);
  --font-heading: "Barlow Semi Condensed", "Bai Jamjuree", system-ui, sans-serif;
  --font-body: "Barlow", "Bai Jamjuree", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "Bai Jamjuree", monospace;
}

.dark {
  --color-bg: #0A0E13;
  --color-surface: #111821;
  --color-surface-2: #18212C;
  --color-text: #E6EDF3;
  --color-text-muted: #8D9AAB;
  --color-primary: #4C9AFF;
  --color-on-primary: #06101C;
  --color-secondary: #2A3647;
  --color-on-secondary: #E6EDF3;
  --color-accent: #7F8DA3;
  --color-border: #243041;
  --color-success: #2BD576;
  --color-warning: #F5B83D;
  --color-danger: #FF4D5E;
  --color-chart-1: #4C9AFF;
  --color-chart-2: #7F8DA3;
  --color-chart-3: #8FB8FF;
  --color-chart-4: #2F6FC4;
  --color-chart-5: #56637A;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Real-Time Monitoring (realtime-monitoring). Default mode: dark. Fonts: https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&family=Bai+Jamjuree:wght@400;500;600;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9333,
            0.9451,
            0.9608
          ],
          "hex": "#eef1f5"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.9686,
            0.9804
          ],
          "hex": "#f5f7fa"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.0863,
            0.1294
          ],
          "hex": "#0e1621"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3333,
            0.3843,
            0.4549
          ],
          "hex": "#556274"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.4353,
            0.8784
          ],
          "hex": "#1f6fe0"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8667,
            0.8902,
            0.9176
          ],
          "hex": "#dde3ea"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.0863,
            0.1294
          ],
          "hex": "#0e1621"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4784,
            0.5255,
            0.6
          ],
          "hex": "#7a8699"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8275,
            0.8549,
            0.8902
          ],
          "hex": "#d3dae3"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.5412,
            0.2902
          ],
          "hex": "#0e8a4a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.4784,
            0
          ],
          "hex": "#b87a00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8196,
            0.1804,
            0.2471
          ],
          "hex": "#d12e3f"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.4353,
            0.8784
          ],
          "hex": "#1f6fe0"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4784,
            0.5255,
            0.6
          ],
          "hex": "#7a8699"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4157,
            0.6078,
            0.9216
          ],
          "hex": "#6a9beb"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.3098,
            0.6392
          ],
          "hex": "#164fa3"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2431,
            0.2902,
            0.3608
          ],
          "hex": "#3e4a5c"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0549,
            0.0745
          ],
          "hex": "#0a0e13"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0667,
            0.0941,
            0.1294
          ],
          "hex": "#111821"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0941,
            0.1294,
            0.1725
          ],
          "hex": "#18212c"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.9294,
            0.9529
          ],
          "hex": "#e6edf3"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5529,
            0.6039,
            0.6706
          ],
          "hex": "#8d9aab"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.298,
            0.6039,
            1
          ],
          "hex": "#4c9aff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0235,
            0.0627,
            0.1098
          ],
          "hex": "#06101c"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.2118,
            0.2784
          ],
          "hex": "#2a3647"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.9294,
            0.9529
          ],
          "hex": "#e6edf3"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.498,
            0.5529,
            0.6392
          ],
          "hex": "#7f8da3"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1412,
            0.1882,
            0.2549
          ],
          "hex": "#243041"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.8353,
            0.4627
          ],
          "hex": "#2bd576"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.7216,
            0.2392
          ],
          "hex": "#f5b83d"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.302,
            0.3686
          ],
          "hex": "#ff4d5e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.298,
            0.6039,
            1
          ],
          "hex": "#4c9aff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.498,
            0.5529,
            0.6392
          ],
          "hex": "#7f8da3"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5608,
            0.7216,
            1
          ],
          "hex": "#8fb8ff"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.4353,
            0.7686
          ],
          "hex": "#2f6fc4"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3373,
            0.3882,
            0.4784
          ],
          "hex": "#56637a"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 3,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 5,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 7,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.2
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 1,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.45
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 20,
            "unit": "px"
          },
          "blur": {
            "value": 50,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Barlow Semi Condensed",
        "Bai Jamjuree",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Barlow",
        "Bai Jamjuree",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "JetBrains Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Bai Jamjuree",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 160,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.3,
      0,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 0.95
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 5
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!