{
  "id": "aurora-console-alerts",
  "name": "Alert Rules",
  "theme": "aurora-console",
  "category": "Settings & Forms",
  "description": "A rule editor where the sentence you are writing is rendered back to you in plain English underneath, so nobody ships a threshold they misread.",
  "layout": "A single 640px form column with the live rule preview pinned as a sticky panel in the right margin, and the routing matrix breaking full width beneath both.",
  "modules": [
    {
      "key": "head",
      "name": "Header",
      "html": "\n<header class=\"hd\"><span class=\"k\">Alerting</span><h1>New rule</h1><p>Rules evaluate every 30 seconds against the last 5 minutes of data.</p></header>"
    },
    {
      "key": "form",
      "name": "Rule form",
      "html": "\n<form class=\"fm\">\n  <label><span class=\"k\">Rule name</span><input type=\"text\" value=\"media-proc queue depth\"></label>\n  <label><span class=\"k\">Metric</span><select><option>queue.depth</option><option>latency.p99</option><option>error.rate</option></select></label>\n  <div class=\"two\">\n    <label><span class=\"k\">Condition</span><select><option>is above</option><option>is below</option></select></label>\n    <label><span class=\"k\">Threshold</span><input type=\"text\" value=\"2000\"></label>\n  </div>\n  <div class=\"two\">\n    <label><span class=\"k\">For</span><input type=\"text\" value=\"5m\"></label>\n    <label><span class=\"k\">Severity</span><select><option>Sev 2</option><option>Sev 3</option></select></label>\n  </div>\n  <label class=\"chk\"><input type=\"checkbox\" checked><span>Auto-resolve when the condition clears for 10 minutes</span></label>\n</form>"
    },
    {
      "key": "preview",
      "name": "Plain-English preview",
      "html": "\n<aside class=\"pv\"><span class=\"k\">This rule says</span>\n<p>If <b>queue.depth</b> on <b>media-proc</b> stays above <b>2,000</b> for <b>5 minutes</b>, open a <b>Sev 2</b> and page the on-call.</p>\n<span class=\"k\">Would have fired</span><b class=\"big\">4×</b><span class=\"m\">in the last 30 days · last 14:02 today</span></aside>"
    },
    {
      "key": "routing",
      "name": "Routing matrix",
      "html": "\n<section class=\"rt\"><span class=\"k\">Routing</span>\n<table><thead><tr><th>Severity</th><th>Page</th><th>Chat</th><th>Email</th><th>Quiet hours</th></tr></thead>\n<tbody>\n  <tr><td>Sev 1</td><td class=\"y\">Yes</td><td class=\"y\">Yes</td><td class=\"y\">Yes</td><td class=\"n\">Ignored</td></tr>\n  <tr class=\"on\"><td>Sev 2</td><td class=\"y\">Yes</td><td class=\"y\">Yes</td><td class=\"n\">No</td><td class=\"n\">Ignored</td></tr>\n  <tr><td>Sev 3</td><td class=\"n\">No</td><td class=\"y\">Yes</td><td class=\"y\">Yes</td><td class=\"y\">Respected</td></tr>\n  <tr><td>Sev 4</td><td class=\"n\">No</td><td class=\"n\">No</td><td class=\"y\">Yes</td><td class=\"y\">Respected</td></tr>\n</tbody></table></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "aurora-console-alerts",
    "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-alerts.json",
  "structure": "A single 640px form column with the live rule preview pinned as a sticky panel in the right margin, and the routing matrix breaking full width beneath both.",
  "html": "<div class=\"dz dz-aurora-console-alerts\" data-design=\"aurora-console-alerts\" data-theme=\"aurora-console\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Header\">\n<header class=\"hd\"><span class=\"k\">Alerting</span><h1>New rule</h1><p>Rules evaluate every 30 seconds against the last 5 minutes of data.</p></header></section><section class=\"dz-mod\" data-mod=\"form\" aria-label=\"Rule form\">\n<form class=\"fm\">\n  <label><span class=\"k\">Rule name</span><input type=\"text\" value=\"media-proc queue depth\"></label>\n  <label><span class=\"k\">Metric</span><select><option>queue.depth</option><option>latency.p99</option><option>error.rate</option></select></label>\n  <div class=\"two\">\n    <label><span class=\"k\">Condition</span><select><option>is above</option><option>is below</option></select></label>\n    <label><span class=\"k\">Threshold</span><input type=\"text\" value=\"2000\"></label>\n  </div>\n  <div class=\"two\">\n    <label><span class=\"k\">For</span><input type=\"text\" value=\"5m\"></label>\n    <label><span class=\"k\">Severity</span><select><option>Sev 2</option><option>Sev 3</option></select></label>\n  </div>\n  <label class=\"chk\"><input type=\"checkbox\" checked><span>Auto-resolve when the condition clears for 10 minutes</span></label>\n</form></section><section class=\"dz-mod\" data-mod=\"preview\" aria-label=\"Plain-English preview\">\n<aside class=\"pv\"><span class=\"k\">This rule says</span>\n<p>If <b>queue.depth</b> on <b>media-proc</b> stays above <b>2,000</b> for <b>5 minutes</b>, open a <b>Sev 2</b> and page the on-call.</p>\n<span class=\"k\">Would have fired</span><b class=\"big\">4×</b><span class=\"m\">in the last 30 days · last 14:02 today</span></aside></section><section class=\"dz-mod\" data-mod=\"routing\" aria-label=\"Routing matrix\">\n<section class=\"rt\"><span class=\"k\">Routing</span>\n<table><thead><tr><th>Severity</th><th>Page</th><th>Chat</th><th>Email</th><th>Quiet hours</th></tr></thead>\n<tbody>\n  <tr><td>Sev 1</td><td class=\"y\">Yes</td><td class=\"y\">Yes</td><td class=\"y\">Yes</td><td class=\"n\">Ignored</td></tr>\n  <tr class=\"on\"><td>Sev 2</td><td class=\"y\">Yes</td><td class=\"y\">Yes</td><td class=\"n\">No</td><td class=\"n\">Ignored</td></tr>\n  <tr><td>Sev 3</td><td class=\"n\">No</td><td class=\"y\">Yes</td><td class=\"y\">Yes</td><td class=\"y\">Respected</td></tr>\n  <tr><td>Sev 4</td><td class=\"n\">No</td><td class=\"n\">No</td><td class=\"y\">Yes</td><td class=\"y\">Respected</td></tr>\n</tbody></table></section></section>\n</div>",
  "css": "\n.dz-aurora-console-alerts { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 640px 300px; justify-content: center; column-gap: 34px; padding: 26px 28px 30px; align-content: start; }\n.dz-aurora-console-alerts .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-aurora-console-alerts .hd { grid-column: 1 / 2; margin-bottom: 20px; }\n.dz-aurora-console-alerts .hd h1 { font-family: var(--pv-display); font-size: 32px; font-weight: 600; letter-spacing: -.025em; margin: 8px 0 6px; }\n.dz-aurora-console-alerts .hd p { font-size: 14px; color: var(--muted-foreground); margin: 0; }\n.dz-aurora-console-alerts .fm { grid-column: 1 / 2; display: flex; flex-direction: column; gap: 16px; }\n.dz-aurora-console-alerts label { display: flex; flex-direction: column; gap: 7px; }\n.dz-aurora-console-alerts input[type=\"text\"], .dz-aurora-console-alerts select { font: inherit; font-size: 14px; background: var(--card); color: var(--foreground); border: var(--pv-bw) solid var(--input); border-radius: var(--pv-radius-md); padding: 11px 13px; }\n.dz-aurora-console-alerts input[type=\"text\"]:focus-visible, .dz-aurora-console-alerts select:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }\n.dz-aurora-console-alerts .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n.dz-aurora-console-alerts .chk { flex-direction: row; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted-foreground); }\n.dz-aurora-console-alerts .chk input { accent-color: var(--primary); width: 16px; height: 16px; }\n.dz-aurora-console-alerts .pv { grid-column: 2 / 3; grid-row: 1 / 3; 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); align-self: start; position: sticky; top: 20px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }\n.dz-aurora-console-alerts .pv p { font-size: 14.5px; line-height: 1.6; margin: 0 0 12px; color: var(--muted-foreground); }\n.dz-aurora-console-alerts .pv b { color: var(--foreground); font-family: var(--pv-mono); font-size: 13.5px; }\n.dz-aurora-console-alerts .big { font-family: var(--pv-mono); font-size: 34px; font-weight: 700; color: var(--primary); }\n.dz-aurora-console-alerts .m { font-family: var(--pv-mono); font-size: 11px; color: var(--muted-foreground); }\n.dz-aurora-console-alerts .rt { grid-column: 1 / -1; margin-top: 26px; }\n.dz-aurora-console-alerts table { width: 100%; border-collapse: collapse; margin-top: 10px; }\n.dz-aurora-console-alerts th { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); text-align: left; padding: 10px 12px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-aurora-console-alerts td { padding: 10px 12px; font-size: 13px; border-bottom: var(--pv-bw) solid color-mix(in srgb, var(--border) 50%, transparent); }\n.dz-aurora-console-alerts tr.on td { background: color-mix(in srgb, var(--primary) 12%, transparent); }\n.dz-aurora-console-alerts .y { color: var(--accent); } .dz-aurora-console-alerts .n { color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-aurora-console-alerts *, .dz-aurora-console-alerts *::before, .dz-aurora-console-alerts *::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"
}