# Real-Time Monitoring > A dark ops-room console: status tiles first, pulsing live dots, a ticking clock and red/amber/green reserved for health status. - Nickname: Ops wall - Also called: NOC dashboard, Live ops console, Observability UI - Category: Dashboards & Data - Moods: Techy, Serious, Trustworthy - Industries: AI Products, SaaS, Startup & Tech, Corporate & B2B, Fintech & Banking - Style page: https://uilingo.dev/styles/realtime-monitoring/ 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 ## Audit Passed after 5 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Real-Time Monitoring" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line A dark ops-room console: status tiles first, pulsing live dots, a ticking clock and red/amber/green reserved for health status. Design keywords: dark ops room, pulsing live dots, status-first layout, traffic-light colours, LIVE indicator, alert banner, monospace timestamps, uptime and latency tiles. ## Visual language A dark operations-room console built for 24/7 wall screens: near-black slate (#0A0E13) with a faint 20px dot grid, solid #111821 panels with 1px #243041 borders, and traffic-light colours (#2BD576 / #F5B83D / #FF4D5E) that each mean exactly one health state (green and red each have a short, fixed list of extra uses given below). Signal blue (#4C9AFF) and its tints are the only data and action colours (chart series are blues plus slate); everything else, including the accent token #7F8DA3, is neutral slate. Live things breathe — status dots emit a pulse ring, a red LIVE pill blinks next to a ticking mono clock, and an incident banner pins the worst problem above everything. Latin labels are condensed uppercase signage; numbers, timestamps and latencies are monospace. ## Signature details (must be visible) - Colour rule: green #2BD576 marks only the online/healthy state — status dots, healthy panel and tile edges, the rule of an uptime/availability stat, the hero 'online' tag, the CTA beacon edge, the footer status dot, presence dots on chat rows — plus KPI deltas that are improvements. Amber #F5B83D marks only degraded health (and a KPI dot whose threshold is breached); red #FF4D5E marks only failing health. Besides failing status, red may appear only on the LIVE pill, the chart now-marker, KPI deltas that are regressions, the alerts tab count badge, destructive buttons (red text only, see Buttons) and form validation errors. Nothing else is green, amber or red: no buttons, switches, feature cards, progress bars, checklist ticks, info/success alerts, FAQ states, event-feed dots, decorative chips or workflow badges ('Needs review', 'Draft', 'needs a human' are neutral surface-2 badges) - Accent token #7F8DA3 is a neutral slate for the dashed comparison series, secondary meta and slate image tints, never a status, highlight or decoration colour - Motion whitelist — exactly four things move: status-dot pulse rings (scale 1 → 2.6, opacity .75 → 0, 1.8s; 1.1s when failing), the LIVE dot blink (opacity 1 → 0.25, 1.2s steps(1)), the 1s clock tick (HH:MM:SS beside every LIVE pill on web, the 'updated Ns ago' counter on mobile), and the landing light sweep. Only dots of live services pulse (service rows, the incident-banner dot, the mobile status-strip dot); logo, KPI-label, list-icon, presence, footer, eyebrow, event-feed, chip and CTA-beacon dots are static. All of it sits inside prefers-reduced-motion: no-preference - Light sweep: the landing console mock (12px padding, #0A0E13 fill, 1px #243041 border, 10px radius) gets position: relative; overflow: hidden. Its ::before has inset: 0, pointer-events: none, z-index: 1, border-radius: inherit (10px) and a background that is one 140px colourless band — linear-gradient(90deg, transparent calc(50% - 70px), rgba(255,255,255,.05) 50%, transparent calc(50% + 70px)) — animated translateX(-100%) → translateX(100%), 6s linear infinite. No blur, no colour - Status dots: 9px circle with a static 3px halo (box-shadow 0 0 0 3px at 18% alpha of its colour, zero blur) plus the ::after pulse ring. Every halo in this style is such a crisp zero-blur spread ring; nothing has a blurred glow on text, borders or panels. The only blurred shadow is the landing mock frame's drop shadow 0 20px 50px rgba(0,0,0,.45) (shadow lg); panels have no shadow - Panels: #111821, 1px #243041 border, 7px radius. Health panels (the landing status list and the dashboard status panel) get a 2px top edge that takes the worst status among their rows: green when all are healthy, amber if any is degraded, red if any is failing. All other panels (KPI tiles, charts, tables, feature cards) keep a neutral 2px #243041 top edge - LIVE pill: red #FF4D5E text on a 16% red tint, JetBrains Mono 700 11px uppercase, 0.08em tracking, 3px radius, with the blinking 7px dot; a JetBrains Mono HH:MM:SS clock in text-muted ticks beside it. It sits in the dashboard top bar and, on the landing, in the mock title bar (right side). It is the only red, blinking LIVE marker on a page: any other 'Live' word is a static badge — neutral as a panel tag, or a green health badge when it reports an agent as online and stays 11px Latin uppercase mono on Thai pages too - Incident banner above the KPIs: red-tinted panel, 4px red left edge, pulsing red dot, the label 'ACTIVE INCIDENT' (Barlow Semi Condensed 700 11px uppercase, 0.08em; on Thai pages 'เหตุขัดข้อง' in Bai Jamjuree 600 12px, no uppercase), service name and value, mono 'since 14:11' and, on the dashboard, a secondary Acknowledge button (Thai: 'รับทราบ'); the landing-mock banner drops the button - Status before charts: each service is a tile with a 3px left edge in its status colour, a 9px status dot and a mono value (320 ms, 99.9%, 2 failed). Service identifiers (API-GATEWAY, WEBHOOKS) stay Latin uppercase mono on every page; descriptive service names may be Thai in Bai Jamjuree. Word values are translated on Thai pages and set in Bai Jamjuree ('ล้มเหลว 2'); numbers with ms, s and % stay mono on Thai pages too - All numbers, latencies, timestamps and table metrics in JetBrains Mono with tabular, slashed-zero figures: font-feature-settings: "zero" 1, "tnum" 1. Latin panel titles and KPI labels are Barlow Semi Condensed 600 12px uppercase with 0.08em tracking; the dashboard page title is Barlow Semi Condensed 600 26px uppercase with 0.04em tracking. Thai sizes, always no tracking and no uppercase: panel titles and KPI labels Bai Jamjuree 600 13px in text-muted; section eyebrows and the hero tag Bai Jamjuree 600 13px; badge text and the incident label 12px (Latin 11px) - Spacing: layout spacing — grid gaps, panel padding, page gutters and section gaps — uses only 4 / 8 / 12 / 16 / 24 / 32 / 48px (this replaces the base-unit × density rule): 12px dashboard grid gaps, 16px padding in dashboard panels and KPI tiles, 24px dashboard page gutters, 48px or more between landing sections. Small insets inside controls (badges, pills, status-row tiles such as 6px 10px) may be finer ## Design tokens — use these exact values Colours (dark mode): - background #0A0E13 - surface #111821 - surface-2 #18212C - text #E6EDF3 - text-muted #8D9AAB - primary #4C9AFF (text on it #06101C) - secondary #2A3647 (text on it #E6EDF3) - accent #7F8DA3 - border #243041 - success #2BD576 · warning #F5B83D · danger #FF4D5E - chart series #4C9AFF, #7F8DA3, #8FB8FF, #2F6FC4, #56637A Radius: sm 3px, md 5px, lg 7px, xl 10px, pill 999px Border width: 1px Shadows: sm `none`, md `0 0 0 1px rgba(0,0,0,0.2)`, lg `0 20px 50px rgba(0,0,0,0.45)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 0.95 density Motion: 160ms cubic-bezier(.3,0,.2,1) ## Typography (Latin + Thai) - Headings: Barlow Semi Condensed 500/600/700 with Thai fallback Bai Jamjuree 500/600/700 - Body: Barlow 400/500/600 with Thai fallback Bai Jamjuree 400/500/600 - Mono: JetBrains Mono - Google Fonts URL: 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 - CSS stacks: heading `"Barlow Semi Condensed", "Bai Jamjuree", system-ui, sans-serif`; body `"Barlow", "Bai Jamjuree", system-ui, sans-serif`; mono `"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "Bai Jamjuree", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Bai Jamjuree — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.6rem, 5.4vw, 4.4rem), heading weight 600, heading tracking -0.01em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Buttons: 5px radius, Barlow Semi Condensed 600 label. Primary is signal blue with dark #06101C text, hover brightness 1.12; secondary is surface-2 #18212C with a 1px #243041 border that lightens on hover. Pressed: translateY(1px) and a background 8% darker, no scale. Disabled: 40% opacity, no hover. Focus-visible: 3px blue outline at 55% alpha, 2px offset. Destructive ('Sign out', delete): surface-2 background, red #FF4D5E text and a 1px border at 40% red — never a red fill. No green buttons - KPI tile: neutral-edged panel with three rows. 1) Label row: icon left, label (Latin 12px uppercase, Thai 13px), and on the right a static 7px dot with a 3px 18% halo — green while the KPI is within threshold, amber when it breaches it, never red and never pulsing. 2) Mono value: 30px on the dashboard, 22–24px in the landing mock. 3) One row with the mono delta left (arrow icon + value, 13px on the dashboard, 11px in the mock) and a 64×20px blue sparkline right. Delta colour follows good/bad, not direction: green when the change is an improvement, red when it is a regression (p95 latency +48 ms or escalations +9% = red; error rate −0.2% or escalations −9% = green); the arrow still shows direction and the sparkline stays blue either way. The landing mock shows at most 2 KPI tiles at ≥1024px; the dashboard KPI row has 4 - Status list health panel (landing mock): a head row with the panel title 'SERVICES' (Thai 'บริการ') left and a neutral surface-2 count badge ('5') right, above a 1px #243041 rule; then the service rows as separate surface-2 tiles with 8px gaps and 6px 10px padding, each with its 3px status left edge, 9px status dot, mono identifier and right-aligned mono value. The panel's height fits its rows (align-self: start) with no empty space under them; size the chart plot (about 140px tall) so the chart panel ends level with it - Badges: JetBrains Mono 500 11px uppercase (Thai: Bai Jamjuree 12px, no uppercase), 3px radius, 1px border, with a 6px dot in tables. Health badges use their status colour as text and border on a 10% tint; everything else — workflow states, the status list's count badge, the dashboard status panel's 'Live' tag, plan tags other than the blue 'Most popular' — is a neutral surface-2 badge in text-muted with a 1px #243041 border - Section eyebrows ('FEATURES', 'HOW IT WORKS', the form and component-sheet headers): JetBrains Mono 500 11px uppercase in text-muted, 0.08em tracking, on a surface-2 chip with a 1px #243041 border and 3px radius — no colour tint and no dot. On Thai pages they are Bai Jamjuree 600 13px in text-muted, in Thai. Only the hero tag is green: an 'online' health tag ('Agents online 24/7'; Thai 'เอเจนต์ออนไลน์ตลอด 24 ชม.' in Bai Jamjuree 600 13px, no uppercase) in mono #2BD576 on a 10% green tint with a 1px 35% green border, led by a static 7px green dot with the 3px halo - Inputs: darker-than-panel fields (#0A0E13), 5px radius, blue border + 3px blue 25% ring on focus; validation errors get a red border and red helper text. Switch on = signal-blue track with a dark knob; checked radio cards get a blue border and a 3px blue inset left bar; checkboxes fill blue. Info/success alerts (e.g. '1,000 free replies · no credit card') are not health: surface panel, 1px #243041 border, 3px signal-blue left edge, 8% blue tint, blue icon. Checklist ticks in benefit lists are signal blue - Event feed (dashboard only): a vertical 1px #243041 timeline with 7px signal-blue dots — the newest is filled with a static 3px 18% blue halo, older ones are hollow 1.5px blue rings — and mono '2m ago' stamps (Bai Jamjuree on Thai pages) - Navigation: dark top bar on the landing; on the dashboard a 64px icon rail in the page colour, active item tinted blue with a 2px left bar, and a top bar with search, LIVE pill + clock, bell and avatar; on mobile a solid dark tab bar whose alerts tab (here the Agents tab, which lists failing agents) carries a red count badge - Landing blocks: stats are mono values with a 2px left rule — #243041 for counts, rates, latency and scores; green only on an uptime/availability stat (e.g. '99.95% uptime'). Trust is a row of 4 neutral compliance badges (surface-2, 1px #243041 border, blue icon, no status dot). Pricing has three plans priced in ฿/month on dark cards; the highlighted plan gets a 1px blue border, a 2px #4C9AFF top edge and a solid blue 'Most popular' badge, never green. FAQ: bordered dark rows; each question ends in a mono +/− in text-muted that turns signal blue when open, with the open row's border at 40% blue — never red - CTA panel: dark surface with a 4px green left edge (the online beacon edge) and a static 12px green beacon dot with two crisp zero-blur halo rings; its button is signal blue. Footer: 4 columns (brand + 3 link lists) and below the legal line a mono 'status: all systems operational' led by a static 7px green dot (Thai pages: 'สถานะ: ทุกระบบทำงานปกติ' in Bai Jamjuree) - Icons and imagery: no photos. Inline SVG line icons (blue on surface-2 tiles) and inline SVG charts are allowed and expected. Article and related-card art is a blue line trace on a faint 28px grid over a surface tinted 14% with blue #4C9AFF or slate #7F8DA3 (vary cards between those two, never hue-rotate them into purple or magenta) ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → logos → stats → features → steps → trust → pricing → faq → cta. Feature section as grid. Landing: dark nav, split hero with the green 'online' tag, a plain bright headline and a framed console mock in this exact order, top to bottom: mock title bar (environment label left in JetBrains Mono 11px text-muted, e.g. 'prod · ap-southeast-1'; LIVE pill + HH:MM:SS clock right) → incident banner → 2 KPI tiles (value 22–24px, delta + sparkline row) → status list health panel (left, 5 of 12 cols, 5 service rows) beside the line chart with the red now-marker (right, 7 cols); on narrow screens the status list stacks above the chart and must never sit below it. The light sweep runs across that mock only. Then an uppercase logo strip, mono stats with neutral #243041 left rules (green only on an uptime stat), six feature cards in a 3-column grid with neutral edges and blue icons, 3 numbered steps with mono step numbers, the 4 trust badges, three-plan pricing with a blue-topped highlighted plan, a bordered dark FAQ, a dark CTA panel with a static online beacon and the 4-column footer with its status line. The event feed and the icon rail are dashboard-only. Dashboard: 64px icon rail, top bar with LIVE + clock, uppercase title, the incident banner, KPI row (4 tiles, 30px values), then status tiles (4) beside the live line chart (8), then the event feed (4) beside the agents/services table (8). Build it as plain HTML + CSS with inline SVG icons and charts, plus at most 20 lines of inline JS that tick the HH:MM:SS clocks and the 'updated Ns ago' counter; without JS, show a static time. ## Content Use realistic product copy (fictional brand) suited to: NOC / SRE wall displays and on-call consoles. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Thin cyan wireframes, corner brackets or sci-fi tick marks (that is HUD / FUI) - Neon glow, blurred halos, coloured light sweeps, scanlines or glitch effects (Cyberpunk) - Monospace for all text or green-on-black terminal styling - Green/amber/red as decorative, CTA, attention or series colours — no green buttons, switches, checklist ticks, success alerts, feature-card edges, progress bars or chip dots, no red-filled buttons, red FAQ states or coloured section eyebrows - Purple, magenta or hue-rotated illustration tints — imagery stays blue and slate - Animating anything outside the four-item motion whitelist — cards, charts and numbers never animate - Putting the status list below the chart, leaving empty space in a health panel, or hiding the incident banner below the fold ## Stack notes One self-contained HTML file with a