{
  "id": "aurora-console-overview",
  "name": "Service Overview",
  "theme": "aurora-console",
  "category": "Dashboard",
  "description": "The screen a team leaves open all day: nine services as glowing tiles, one live chart, and an incident rail that never scrolls out of view.",
  "layout": "A three-band dashboard — a full-width strip of four key values, then a 2:1 split of streaming chart to service tiles, with a fixed 280px incident rail down the right that the other bands stop short of.",
  "modules": [
    {
      "key": "bar",
      "name": "Top bar",
      "html": "\n<header class=\"tb\"><span class=\"br\">aurora</span><nav><a class=\"on\" href=\"#\">Overview</a><a href=\"#\">Traces</a><a href=\"#\">Logs</a><a href=\"#\">Alerts</a></nav><span class=\"live\"><i></i>live · 2s</span></header>"
    },
    {
      "key": "kpis",
      "name": "Key values",
      "html": "\n<div class=\"kp\">\n  <div><span class=\"k\">Requests / s</span><b>18,402</b><em class=\"up\">+4.1%</em></div>\n  <div><span class=\"k\">p99 latency</span><b>214<i>ms</i></b><em class=\"dn\">-11ms</em></div>\n  <div><span class=\"k\">Error rate</span><b>0.038<i>%</i></b><em class=\"up\">+0.004</em></div>\n  <div><span class=\"k\">Saturation</span><b>61<i>%</i></b><em class=\"dn\">-3</em></div>\n</div>"
    },
    {
      "key": "chart",
      "name": "Streaming chart",
      "html": "\n<section class=\"ch\"><header><span class=\"k\">Throughput · 30 min</span><span class=\"v\">18,402 rps</span></header>\n<svg viewBox=\"0 0 620 190\" preserveAspectRatio=\"none\" aria-label=\"Throughput over the last thirty minutes\">\n  <defs><linearGradient id=\"agz\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" class=\"s0\"/><stop offset=\"1\" class=\"s1\"/></linearGradient></defs>\n  <path class=\"area\" d=\"M0,150 L52,132 L104,141 L156,108 L208,120 L260,86 L312,98 L364,64 L416,80 L468,48 L520,66 L572,40 L620,52 L620,190 L0,190 Z\"/>\n  <path class=\"line\" d=\"M0,150 L52,132 L104,141 L156,108 L208,120 L260,86 L312,98 L364,64 L416,80 L468,48 L520,66 L572,40 L620,52\"/>\n  <path class=\"line alt\" d=\"M0,170 L52,166 L104,168 L156,158 L208,162 L260,150 L312,154 L364,142 L416,148 L468,138 L520,144 L572,132 L620,136\"/>\n</svg>\n<footer><span><i class=\"sw p\"></i>edge</span><span><i class=\"sw a\"></i>origin</span></footer></section>"
    },
    {
      "key": "tiles",
      "name": "Service tiles",
      "html": "\n<section class=\"sv\">\n  <article class=\"ok\"><span class=\"k\">checkout-api</span><b>99.99<i>%</i></b><span class=\"m\">214ms p99</span></article>\n  <article class=\"ok\"><span class=\"k\">search</span><b>99.97<i>%</i></b><span class=\"m\">88ms p99</span></article>\n  <article class=\"warn\"><span class=\"k\">media-proc</span><b>99.41<i>%</i></b><span class=\"m\">1.9s p99</span></article>\n  <article class=\"ok\"><span class=\"k\">identity</span><b>99.99<i>%</i></b><span class=\"m\">41ms p99</span></article>\n  <article class=\"ok\"><span class=\"k\">ledger</span><b>100.0<i>%</i></b><span class=\"m\">63ms p99</span></article>\n  <article class=\"ok\"><span class=\"k\">notify</span><b>99.95<i>%</i></b><span class=\"m\">120ms p99</span></article>\n</section>"
    },
    {
      "key": "rail",
      "name": "Incident rail",
      "html": "\n<aside class=\"ir\"><h2 class=\"k\">Open incidents</h2>\n  <ol>\n    <li class=\"hi\"><span class=\"t\">14:02</span><b>media-proc queue depth</b><span class=\"m\">Sev 2 · 18 min · Anouk</span></li>\n    <li><span class=\"t\">11:47</span><b>Elevated 5xx on eu-west</b><span class=\"m\">Sev 3 · resolved · 22 min</span></li>\n    <li><span class=\"t\">09:15</span><b>Cert renewal warning</b><span class=\"m\">Sev 4 · acknowledged</span></li>\n  </ol>\n  <button type=\"button\" class=\"btn\">Open incident board</button></aside>"
    }
  ],
  "moduleCount": 5,
  "reorderable": false,
  "meta": {
    "id": "aurora-console-overview",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T19:40:57+09:00",
    "updatedAt": "2026-09-01T19:40:57+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/aurora-console-overview.json",
  "structure": "A three-band dashboard — a full-width strip of four key values, then a 2:1 split of streaming chart to service tiles, with a fixed 280px incident rail down the right that the other bands stop short of.",
  "html": "<div class=\"dz dz-aurora-console-overview\" data-design=\"aurora-console-overview\" data-theme=\"aurora-console\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Top bar\">\n<header class=\"tb\"><span class=\"br\">aurora</span><nav><a class=\"on\" href=\"#\">Overview</a><a href=\"#\">Traces</a><a href=\"#\">Logs</a><a href=\"#\">Alerts</a></nav><span class=\"live\"><i></i>live · 2s</span></header></section><section class=\"dz-mod\" data-mod=\"kpis\" aria-label=\"Key values\">\n<div class=\"kp\">\n  <div><span class=\"k\">Requests / s</span><b>18,402</b><em class=\"up\">+4.1%</em></div>\n  <div><span class=\"k\">p99 latency</span><b>214<i>ms</i></b><em class=\"dn\">-11ms</em></div>\n  <div><span class=\"k\">Error rate</span><b>0.038<i>%</i></b><em class=\"up\">+0.004</em></div>\n  <div><span class=\"k\">Saturation</span><b>61<i>%</i></b><em class=\"dn\">-3</em></div>\n</div></section><section class=\"dz-mod\" data-mod=\"chart\" aria-label=\"Streaming chart\">\n<section class=\"ch\"><header><span class=\"k\">Throughput · 30 min</span><span class=\"v\">18,402 rps</span></header>\n<svg viewBox=\"0 0 620 190\" preserveAspectRatio=\"none\" aria-label=\"Throughput over the last thirty minutes\">\n  <defs><linearGradient id=\"agz\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" class=\"s0\"/><stop offset=\"1\" class=\"s1\"/></linearGradient></defs>\n  <path class=\"area\" d=\"M0,150 L52,132 L104,141 L156,108 L208,120 L260,86 L312,98 L364,64 L416,80 L468,48 L520,66 L572,40 L620,52 L620,190 L0,190 Z\"/>\n  <path class=\"line\" d=\"M0,150 L52,132 L104,141 L156,108 L208,120 L260,86 L312,98 L364,64 L416,80 L468,48 L520,66 L572,40 L620,52\"/>\n  <path class=\"line alt\" d=\"M0,170 L52,166 L104,168 L156,158 L208,162 L260,150 L312,154 L364,142 L416,148 L468,138 L520,144 L572,132 L620,136\"/>\n</svg>\n<footer><span><i class=\"sw p\"></i>edge</span><span><i class=\"sw a\"></i>origin</span></footer></section></section><section class=\"dz-mod\" data-mod=\"tiles\" aria-label=\"Service tiles\">\n<section class=\"sv\">\n  <article class=\"ok\"><span class=\"k\">checkout-api</span><b>99.99<i>%</i></b><span class=\"m\">214ms p99</span></article>\n  <article class=\"ok\"><span class=\"k\">search</span><b>99.97<i>%</i></b><span class=\"m\">88ms p99</span></article>\n  <article class=\"warn\"><span class=\"k\">media-proc</span><b>99.41<i>%</i></b><span class=\"m\">1.9s p99</span></article>\n  <article class=\"ok\"><span class=\"k\">identity</span><b>99.99<i>%</i></b><span class=\"m\">41ms p99</span></article>\n  <article class=\"ok\"><span class=\"k\">ledger</span><b>100.0<i>%</i></b><span class=\"m\">63ms p99</span></article>\n  <article class=\"ok\"><span class=\"k\">notify</span><b>99.95<i>%</i></b><span class=\"m\">120ms p99</span></article>\n</section></section><section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"Incident rail\">\n<aside class=\"ir\"><h2 class=\"k\">Open incidents</h2>\n  <ol>\n    <li class=\"hi\"><span class=\"t\">14:02</span><b>media-proc queue depth</b><span class=\"m\">Sev 2 · 18 min · Anouk</span></li>\n    <li><span class=\"t\">11:47</span><b>Elevated 5xx on eu-west</b><span class=\"m\">Sev 3 · resolved · 22 min</span></li>\n    <li><span class=\"t\">09:15</span><b>Cert renewal warning</b><span class=\"m\">Sev 4 · acknowledged</span></li>\n  </ol>\n  <button type=\"button\" class=\"btn\">Open incident board</button></aside></section>\n</div>",
  "css": "\n.dz-aurora-console-overview { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; padding: 0 28px 28px; align-content: start; }\n.dz-aurora-console-overview .tb { grid-column: 1 / -1; display: flex; align-items: center; gap: 26px; padding: 16px 0; border-bottom: var(--pv-bw) solid var(--border); margin-bottom: 4px; }\n.dz-aurora-console-overview .br { font-family: var(--pv-display); font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--primary); }\n.dz-aurora-console-overview .tb nav { display: flex; gap: 20px; }\n.dz-aurora-console-overview .tb a { font-size: 13px; color: var(--muted-foreground); text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }\n.dz-aurora-console-overview .tb a:hover, .dz-aurora-console-overview .tb a.on { color: var(--foreground); border-bottom-color: var(--primary); }\n.dz-aurora-console-overview .live { margin-left: auto; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); display: inline-flex; align-items: center; gap: 7px; }\n.dz-aurora-console-overview .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); animation: dz-au-pulse 2.4s ease-in-out infinite; }\n@keyframes dz-au-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }\n.dz-aurora-console-overview .kp { grid-column: 1 / 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }\n.dz-aurora-console-overview .kp > div { background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); box-shadow: 0 8px 26px -12px color-mix(in srgb, var(--foreground) 42%, transparent); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }\n.dz-aurora-console-overview .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-aurora-console-overview .kp b { font-family: var(--pv-mono); font-size: 30px; font-weight: 700; letter-spacing: -.03em; font-feature-settings: \"tnum\" 1; }\n.dz-aurora-console-overview .kp b i { font-size: 15px; font-style: normal; color: var(--muted-foreground); margin-left: 2px; }\n.dz-aurora-console-overview .kp em { font-family: var(--pv-mono); font-size: 11.5px; font-style: normal; }\n.dz-aurora-console-overview .up { color: var(--accent); } .dz-aurora-console-overview .dn { color: var(--muted-foreground); }\n.dz-aurora-console-overview .ch { grid-column: 1 / 2; background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); box-shadow: 0 8px 26px -12px color-mix(in srgb, var(--foreground) 42%, transparent); padding: 16px 18px 12px; }\n.dz-aurora-console-overview .ch header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }\n.dz-aurora-console-overview .ch .v { font-family: var(--pv-mono); font-size: 13px; color: var(--foreground); }\n.dz-aurora-console-overview .ch svg { width: 100%; height: 190px; display: block; }\n.dz-aurora-console-overview .s0 { stop-color: var(--primary); stop-opacity: .40; } .dz-aurora-console-overview .s1 { stop-color: var(--primary); stop-opacity: 0; }\n.dz-aurora-console-overview .area { fill: url(#agz); }\n.dz-aurora-console-overview .line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }\n.dz-aurora-console-overview .line.alt { stroke: var(--accent); stroke-dasharray: 4 4; }\n.dz-aurora-console-overview .ch footer { display: flex; gap: 18px; padding-top: 10px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-aurora-console-overview .ch footer span { display: inline-flex; align-items: center; gap: 6px; }\n.dz-aurora-console-overview .sw { width: 10px; height: 2px; border-radius: 2px; } .dz-aurora-console-overview .sw.p { background: var(--primary); } .dz-aurora-console-overview .sw.a { background: var(--accent); }\n.dz-aurora-console-overview .sv { grid-column: 1 / 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }\n.dz-aurora-console-overview .sv article { background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); box-shadow: 0 8px 26px -12px color-mix(in srgb, var(--foreground) 42%, transparent); padding: 13px 15px; display: flex; flex-direction: column; gap: 5px; position: relative; overflow: hidden; transition: transform var(--dur) var(--ease); }\n.dz-aurora-console-overview .sv article::after { content: \"\"; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--accent); }\n.dz-aurora-console-overview .sv .warn::after { background: var(--destructive); }\n.dz-aurora-console-overview .sv article:hover { transform: translateY(-2px); }\n.dz-aurora-console-overview .sv b { font-family: var(--pv-mono); font-size: 21px; font-weight: 600; font-feature-settings: \"tnum\" 1; }\n.dz-aurora-console-overview .sv b i { font-size: 12px; font-style: normal; color: var(--muted-foreground); }\n.dz-aurora-console-overview .m { font-family: var(--pv-mono); font-size: 11px; color: var(--muted-foreground); }\n.dz-aurora-console-overview .ir { grid-column: 2 / 3; grid-row: 2 / 5; background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); box-shadow: 0 8px 26px -12px color-mix(in srgb, var(--foreground) 42%, transparent); padding: 16px; align-self: start; display: flex; flex-direction: column; gap: 12px; }\n.dz-aurora-console-overview .ir h2 { margin: 0; }\n.dz-aurora-console-overview .ir ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }\n.dz-aurora-console-overview .ir li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 10px; padding: 11px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-aurora-console-overview .ir li b { grid-column: 2; font-size: 13.5px; font-weight: 600; }\n.dz-aurora-console-overview .ir li .m { grid-column: 2; }\n.dz-aurora-console-overview .t { grid-row: 1 / 3; font-family: var(--pv-mono); font-size: 11px; color: var(--muted-foreground); padding-top: 2px; }\n.dz-aurora-console-overview .hi { position: relative; } .dz-aurora-console-overview .hi::before { content: \"\"; position: absolute; left: -16px; top: 0; bottom: 0; width: 3px; background: var(--destructive); }\n.dz-aurora-console-overview .hi b { color: var(--foreground); }\n.dz-aurora-console-overview .btn { font: inherit; font-size: 12.5px; margin-top: auto; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: var(--pv-radius-md); padding: 10px; cursor: pointer; transition: filter var(--dur) var(--ease); }\n.dz-aurora-console-overview .btn:hover { filter: brightness(1.12); }\n@media (prefers-reduced-motion: reduce) { .dz-aurora-console-overview *, .dz-aurora-console-overview *::before, .dz-aurora-console-overview *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/aurora-console.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
}