{
  "id": "boreal-observatory-console",
  "name": "Telemetry Console",
  "theme": "boreal-observatory",
  "category": "Dashboard",
  "description": "An instrument monitor where signal feeds and coordinate rails take precedence over decorative widgets.",
  "layout": "Sticky top status rail with live UTC clock; two-column asymmetric split with left multi-channel telemetry stream and right radar inspector; ruled hairline boundaries.",
  "modules": [
    {
      "key": "station-bar",
      "name": "Station Bar",
      "html": "\n<header class=\"st-bar\">\n  <div class=\"st-brand\">\n    <span class=\"st-dot\"></span>\n    <span class=\"st-callsign\">BO-71 · UTC 03:44:19</span>\n  </div>\n  <nav class=\"st-nav\" aria-label=\"Frequency Bands\">\n    <button type=\"button\" class=\"btn-band\" aria-pressed=\"true\">VLF (3–30 kHz)</button>\n    <button type=\"button\" class=\"btn-band\" aria-pressed=\"false\">HF (3–30 MHz)</button>\n    <button type=\"button\" class=\"btn-band\" aria-pressed=\"false\">Riometer (38 MHz)</button>\n  </nav>\n  <div class=\"st-status\">\n    <span class=\"lbl\">Array Status</span>\n    <span class=\"val-active\">LOCKED · AZ 184.2°</span>\n  </div>\n</header>"
    },
    {
      "key": "telemetry-stream",
      "name": "Telemetry Stream",
      "html": "\n<section class=\"tm-section\" aria-label=\"Ionospheric Signal Feed\">\n  <div class=\"tm-head\">\n    <h2>Ionospheric Telemetry Channels</h2>\n    <span class=\"tm-refresh\">Sampling 50 Hz</span>\n  </div>\n  <table class=\"tm-table\">\n    <thead>\n      <tr>\n        <th scope=\"col\">Channel</th>\n        <th scope=\"col\">Frequency</th>\n        <th scope=\"col\">Signal Delta</th>\n        <th scope=\"col\">Absorption</th>\n        <th scope=\"col\">Action</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td><span class=\"ch-code\">CH-01</span> Solar Flux Radiometer</td>\n        <td class=\"mono\">2.80 GHz</td>\n        <td><span class=\"delta delta-up\">+14.2 sfu</span></td>\n        <td class=\"mono\">0.18 dB</td>\n        <td><button type=\"button\" class=\"btn-inspect\">Inspect</button></td>\n      </tr>\n      <tr>\n        <td><span class=\"ch-code\">CH-02</span> Auroral Electrojet Ind.</td>\n        <td class=\"mono\">24.5 kHz</td>\n        <td><span class=\"delta delta-stable\">0.0 nT</span></td>\n        <td class=\"mono\">0.04 dB</td>\n        <td><button type=\"button\" class=\"btn-inspect\">Inspect</button></td>\n      </tr>\n      <tr>\n        <td><span class=\"ch-code\">CH-03</span> Scintillation Monitor</td>\n        <td class=\"mono\">150.0 MHz</td>\n        <td><span class=\"delta delta-up\">+2.4 S4</span></td>\n        <td class=\"mono\">0.62 dB</td>\n        <td><button type=\"button\" class=\"btn-inspect\">Inspect</button></td>\n      </tr>\n      <tr>\n        <td><span class=\"ch-code\">CH-04</span> VLF Whistlers Detector</td>\n        <td class=\"mono\">5.2 kHz</td>\n        <td><span class=\"delta delta-down\">-1.1 dB</span></td>\n        <td class=\"mono\">0.09 dB</td>\n        <td><button type=\"button\" class=\"btn-inspect\">Inspect</button></td>\n      </tr>\n    </tbody>\n  </table>\n</section>"
    },
    {
      "key": "spectrum-inspector",
      "name": "Spectrum Inspector",
      "html": "\n<aside class=\"sp-aside\" aria-label=\"Receiver Station Inspector\">\n  <figure class=\"sp-fig\">\n    <img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\">\n    <figcaption class=\"mono\">STATION-DISH · ARRAY FEED 04</figcaption>\n  </figure>\n  <div class=\"sp-params\">\n    <h3>Antenna Array Azimuth</h3>\n    <dl class=\"param-list\">\n      <div class=\"param-row\">\n        <dt>Bearing</dt>\n        <dd class=\"mono\">184.22° N</dd>\n      </div>\n      <div class=\"param-row\">\n        <dt>Elevation</dt>\n        <dd class=\"mono\">42.80°</dd>\n      </div>\n      <div class=\"param-row\">\n        <dt>Geomagnetic Kp</dt>\n        <dd class=\"mono\"><span class=\"badge-kp\">Kp 4+ · Unsettled</span></dd>\n      </div>\n    </dl>\n    <div class=\"sp-actions\">\n      <button type=\"button\" class=\"btn-primary\">Calibrate Array</button>\n      <button type=\"button\" class=\"btn-secondary\">Export Stream</button>\n    </div>\n  </div>\n</aside>"
    },
    {
      "key": "colophon-audit",
      "name": "Colophon Audit",
      "html": "\n<footer class=\"colophon-bar\">\n  <div class=\"colo-meta\">\n    <span>Array Ref: 71°10′21″N 25°47′40″E</span>\n    <span>Firmware: 4.8.2-rt</span>\n  </div>\n  <div class=\"colo-links\">\n    <a href=\"#calibration\">Calibration Logs</a>\n    <a href=\"#telemetry\">Raw CSV</a>\n    <a href=\"#station\">Station Manual</a>\n  </div>\n</footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "boreal-observatory-console",
    "model": "Gemini 3.8 Flash (High)",
    "author": "Antigravity CLI",
    "createdAt": "2026-09-06T15:39:55+09:00",
    "updatedAt": "2026-09-06T15:40:38+09:00",
    "version": "1.0.0",
    "isNew": true
  },
  "link": "/api/v1/designs/boreal-observatory-console.json",
  "structure": "Sticky top status rail with live UTC clock; two-column asymmetric split with left multi-channel telemetry stream and right radar inspector; ruled hairline boundaries.",
  "html": "<div class=\"dz dz-boreal-observatory-console\" data-design=\"boreal-observatory-console\" data-theme=\"boreal-observatory\">\n<section class=\"dz-mod\" data-mod=\"station-bar\" aria-label=\"Station Bar\">\n<header class=\"st-bar\">\n  <div class=\"st-brand\">\n    <span class=\"st-dot\"></span>\n    <span class=\"st-callsign\">BO-71 · UTC 03:44:19</span>\n  </div>\n  <nav class=\"st-nav\" aria-label=\"Frequency Bands\">\n    <button type=\"button\" class=\"btn-band\" aria-pressed=\"true\">VLF (3–30 kHz)</button>\n    <button type=\"button\" class=\"btn-band\" aria-pressed=\"false\">HF (3–30 MHz)</button>\n    <button type=\"button\" class=\"btn-band\" aria-pressed=\"false\">Riometer (38 MHz)</button>\n  </nav>\n  <div class=\"st-status\">\n    <span class=\"lbl\">Array Status</span>\n    <span class=\"val-active\">LOCKED · AZ 184.2°</span>\n  </div>\n</header></section><main class=\"ws-grid\"><section class=\"dz-mod\" data-mod=\"telemetry-stream\" aria-label=\"Telemetry Stream\">\n<section class=\"tm-section\" aria-label=\"Ionospheric Signal Feed\">\n  <div class=\"tm-head\">\n    <h2>Ionospheric Telemetry Channels</h2>\n    <span class=\"tm-refresh\">Sampling 50 Hz</span>\n  </div>\n  <table class=\"tm-table\">\n    <thead>\n      <tr>\n        <th scope=\"col\">Channel</th>\n        <th scope=\"col\">Frequency</th>\n        <th scope=\"col\">Signal Delta</th>\n        <th scope=\"col\">Absorption</th>\n        <th scope=\"col\">Action</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td><span class=\"ch-code\">CH-01</span> Solar Flux Radiometer</td>\n        <td class=\"mono\">2.80 GHz</td>\n        <td><span class=\"delta delta-up\">+14.2 sfu</span></td>\n        <td class=\"mono\">0.18 dB</td>\n        <td><button type=\"button\" class=\"btn-inspect\">Inspect</button></td>\n      </tr>\n      <tr>\n        <td><span class=\"ch-code\">CH-02</span> Auroral Electrojet Ind.</td>\n        <td class=\"mono\">24.5 kHz</td>\n        <td><span class=\"delta delta-stable\">0.0 nT</span></td>\n        <td class=\"mono\">0.04 dB</td>\n        <td><button type=\"button\" class=\"btn-inspect\">Inspect</button></td>\n      </tr>\n      <tr>\n        <td><span class=\"ch-code\">CH-03</span> Scintillation Monitor</td>\n        <td class=\"mono\">150.0 MHz</td>\n        <td><span class=\"delta delta-up\">+2.4 S4</span></td>\n        <td class=\"mono\">0.62 dB</td>\n        <td><button type=\"button\" class=\"btn-inspect\">Inspect</button></td>\n      </tr>\n      <tr>\n        <td><span class=\"ch-code\">CH-04</span> VLF Whistlers Detector</td>\n        <td class=\"mono\">5.2 kHz</td>\n        <td><span class=\"delta delta-down\">-1.1 dB</span></td>\n        <td class=\"mono\">0.09 dB</td>\n        <td><button type=\"button\" class=\"btn-inspect\">Inspect</button></td>\n      </tr>\n    </tbody>\n  </table>\n</section></section><section class=\"dz-mod\" data-mod=\"spectrum-inspector\" aria-label=\"Spectrum Inspector\">\n<aside class=\"sp-aside\" aria-label=\"Receiver Station Inspector\">\n  <figure class=\"sp-fig\">\n    <img src=\"https://designlookbook.dev/assets/img/boreal-observatory-hero.webp\" alt=\"boreal-observatory hero fallback visual\">\n    <figcaption class=\"mono\">STATION-DISH · ARRAY FEED 04</figcaption>\n  </figure>\n  <div class=\"sp-params\">\n    <h3>Antenna Array Azimuth</h3>\n    <dl class=\"param-list\">\n      <div class=\"param-row\">\n        <dt>Bearing</dt>\n        <dd class=\"mono\">184.22° N</dd>\n      </div>\n      <div class=\"param-row\">\n        <dt>Elevation</dt>\n        <dd class=\"mono\">42.80°</dd>\n      </div>\n      <div class=\"param-row\">\n        <dt>Geomagnetic Kp</dt>\n        <dd class=\"mono\"><span class=\"badge-kp\">Kp 4+ · Unsettled</span></dd>\n      </div>\n    </dl>\n    <div class=\"sp-actions\">\n      <button type=\"button\" class=\"btn-primary\">Calibrate Array</button>\n      <button type=\"button\" class=\"btn-secondary\">Export Stream</button>\n    </div>\n  </div>\n</aside></section></main><section class=\"dz-mod\" data-mod=\"colophon-audit\" aria-label=\"Colophon Audit\">\n<footer class=\"colophon-bar\">\n  <div class=\"colo-meta\">\n    <span>Array Ref: 71°10′21″N 25°47′40″E</span>\n    <span>Firmware: 4.8.2-rt</span>\n  </div>\n  <div class=\"colo-links\">\n    <a href=\"#calibration\">Calibration Logs</a>\n    <a href=\"#telemetry\">Raw CSV</a>\n    <a href=\"#station\">Station Manual</a>\n  </div>\n</footer></section>\n</div>",
  "css": "\n.dz-boreal-observatory-console {\n  background: var(--background);\n  color: var(--foreground);\n  font-family: var(--pv-body);\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-height: 100%;\n}\n\n.dz-boreal-observatory-console *, .dz-boreal-observatory-console *::before, .dz-boreal-observatory-console *::after {\n  box-sizing: inherit;\n}\n\n.dz-boreal-observatory-console .mono {\n  font-family: var(--pv-mono);\n  font-size: 12px;\n}\n\n/* Station Bar */\n.dz-boreal-observatory-console .st-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 24px;\n  background: var(--card);\n  border-bottom: var(--pv-bw) solid var(--border);\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.dz-boreal-observatory-console .st-brand {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.dz-boreal-observatory-console .st-dot {\n  width: 8px;\n  height: 8px;\n  background: var(--accent);\n  border-radius: var(--pv-radius);\n  display: inline-block;\n}\n\n.dz-boreal-observatory-console .st-callsign {\n  font-family: var(--pv-mono);\n  font-weight: 700;\n  font-size: 13px;\n  letter-spacing: 0.05em;\n  color: var(--foreground);\n}\n\n.dz-boreal-observatory-console .st-nav {\n  display: flex;\n  gap: 6px;\n}\n\n.dz-boreal-observatory-console .btn-band {\n  background: transparent;\n  color: var(--muted-foreground);\n  border: var(--pv-bw) solid var(--border);\n  border-radius: var(--pv-radius);\n  padding: 6px 12px;\n  font-family: var(--pv-mono);\n  font-size: 11.5px;\n  cursor: pointer;\n  transition: all var(--dur) var(--ease);\n}\n\n.dz-boreal-observatory-console .btn-band:hover {\n  background: var(--muted);\n  color: var(--foreground);\n}\n\n.dz-boreal-observatory-console .btn-band:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n\n.dz-boreal-observatory-console .btn-band[aria-pressed=\"true\"] {\n  background: var(--primary);\n  color: var(--primary-foreground);\n  border-color: var(--primary);\n}\n\n.dz-boreal-observatory-console .st-status {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  font-size: 11px;\n}\n\n.dz-boreal-observatory-console .st-status .lbl {\n  color: var(--muted-foreground);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  font-size: 9.5px;\n}\n\n.dz-boreal-observatory-console .val-active {\n  font-family: var(--pv-mono);\n  font-weight: 600;\n  color: var(--primary);\n}\n\n/* Main Workspace Grid */\n.dz-boreal-observatory-console .ws-grid {\n  display: grid;\n  grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1fr);\n  gap: 0;\n  flex: 1;\n  border-bottom: var(--pv-bw) solid var(--border);\n}\n\n@media (max-width: 900px) {\n  .dz-boreal-observatory-console .ws-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* Telemetry Section */\n.dz-boreal-observatory-console .tm-section {\n  padding: 24px;\n  border-right: var(--pv-bw) solid var(--border);\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n@media (max-width: 900px) {\n  .dz-boreal-observatory-console .tm-section {\n    border-right: none;\n    border-bottom: var(--pv-bw) solid var(--border);\n  }\n}\n\n.dz-boreal-observatory-console .tm-head {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  border-bottom: var(--pv-bw) solid var(--border);\n  padding-bottom: 12px;\n}\n\n.dz-boreal-observatory-console .tm-head h2 {\n  font-family: var(--pv-display);\n  font-size: 20px;\n  margin: 0;\n  letter-spacing: -0.02em;\n}\n\n.dz-boreal-observatory-console .tm-refresh {\n  font-family: var(--pv-mono);\n  font-size: 11px;\n  color: var(--muted-foreground);\n}\n\n.dz-boreal-observatory-console .tm-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13.5px;\n}\n\n.dz-boreal-observatory-console .tm-table th {\n  text-align: left;\n  padding: 10px 12px;\n  border-bottom: var(--pv-bw) solid var(--border);\n  font-family: var(--pv-mono);\n  font-size: 11px;\n  color: var(--muted-foreground);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n.dz-boreal-observatory-console .tm-table td {\n  padding: 12px;\n  border-bottom: var(--pv-bw) solid var(--border);\n  vertical-align: middle;\n}\n\n.dz-boreal-observatory-console .tm-table tr:hover {\n  background: color-mix(in srgb, var(--primary) 6%, transparent);\n}\n\n.dz-boreal-observatory-console .ch-code {\n  display: inline-block;\n  font-family: var(--pv-mono);\n  font-weight: 700;\n  color: var(--primary);\n  margin-right: 8px;\n}\n\n.dz-boreal-observatory-console .delta {\n  font-family: var(--pv-mono);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.dz-boreal-observatory-console .delta-up { color: var(--accent); }\n.dz-boreal-observatory-console .delta-down { color: var(--destructive); }\n.dz-boreal-observatory-console .delta-stable { color: var(--muted-foreground); }\n\n.dz-boreal-observatory-console .btn-inspect {\n  background: transparent;\n  color: var(--foreground);\n  border: var(--pv-bw) solid var(--border);\n  border-radius: var(--pv-radius);\n  padding: 4px 10px;\n  font-size: 11.5px;\n  font-family: var(--pv-mono);\n  cursor: pointer;\n  transition: all var(--dur) var(--ease);\n}\n\n.dz-boreal-observatory-console .btn-inspect:hover {\n  background: var(--primary);\n  color: var(--primary-foreground);\n  border-color: var(--primary);\n}\n\n.dz-boreal-observatory-console .btn-inspect:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n\n/* Spectrum Inspector Aside */\n.dz-boreal-observatory-console .sp-aside {\n  padding: 24px;\n  background: color-mix(in srgb, var(--card) 40%, var(--background));\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.dz-boreal-observatory-console .sp-fig {\n  margin: 0;\n  border: var(--pv-bw) solid var(--border);\n  border-radius: var(--pv-radius);\n  overflow: hidden;\n  background: var(--card);\n}\n\n.dz-boreal-observatory-console .sp-fig img {\n  display: block;\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n  filter: var(--img-filter);\n}\n\n.dz-boreal-observatory-console .sp-fig figcaption {\n  padding: 8px 12px;\n  font-size: 11px;\n  color: var(--muted-foreground);\n  border-top: var(--pv-bw) solid var(--border);\n}\n\n.dz-boreal-observatory-console .sp-params h3 {\n  font-family: var(--pv-display);\n  font-size: 16px;\n  margin: 0 0 14px 0;\n  border-bottom: var(--pv-bw) solid var(--border);\n  padding-bottom: 8px;\n}\n\n.dz-boreal-observatory-console .param-list {\n  margin: 0 0 20px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.dz-boreal-observatory-console .param-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 13px;\n  border-bottom: var(--pv-bw) solid color-mix(in srgb, var(--border) 50%, transparent);\n  padding-bottom: 6px;\n}\n\n.dz-boreal-observatory-console .param-row dt {\n  color: var(--muted-foreground);\n}\n\n.dz-boreal-observatory-console .param-row dd {\n  margin: 0;\n  font-weight: 500;\n}\n\n.dz-boreal-observatory-console .badge-kp {\n  display: inline-block;\n  padding: 2px 6px;\n  background: color-mix(in srgb, var(--accent) 18%, transparent);\n  color: var(--accent);\n  border-radius: var(--pv-radius);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.dz-boreal-observatory-console .sp-actions {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.dz-boreal-observatory-console .btn-primary {\n  background: var(--primary);\n  color: var(--primary-foreground);\n  border: var(--pv-bw) solid var(--primary);\n  border-radius: var(--pv-radius);\n  padding: 8px 14px;\n  font-family: var(--pv-body);\n  font-size: 12.5px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: opacity var(--dur) var(--ease);\n}\n\n.dz-boreal-observatory-console .btn-primary:hover {\n  opacity: 0.92;\n}\n\n.dz-boreal-observatory-console .btn-primary:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n\n.dz-boreal-observatory-console .btn-secondary {\n  background: transparent;\n  color: var(--foreground);\n  border: var(--pv-bw) solid var(--border);\n  border-radius: var(--pv-radius);\n  padding: 8px 14px;\n  font-family: var(--pv-body);\n  font-size: 12.5px;\n  cursor: pointer;\n  transition: all var(--dur) var(--ease);\n}\n\n.dz-boreal-observatory-console .btn-secondary:hover {\n  background: var(--muted);\n}\n\n.dz-boreal-observatory-console .btn-secondary:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n\n/* Colophon */\n.dz-boreal-observatory-console .colophon-bar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 14px 24px;\n  background: var(--card);\n  font-family: var(--pv-mono);\n  font-size: 11.5px;\n  color: var(--muted-foreground);\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.dz-boreal-observatory-console .colo-meta {\n  display: flex;\n  gap: 18px;\n}\n\n.dz-boreal-observatory-console .colo-links {\n  display: flex;\n  gap: 14px;\n}\n\n.dz-boreal-observatory-console .colo-links a {\n  color: var(--muted-foreground);\n  text-decoration: none;\n  transition: color var(--dur) var(--ease);\n}\n\n.dz-boreal-observatory-console .colo-links a:hover, .dz-boreal-observatory-console .colo-links a:focus-visible {\n  color: var(--foreground);\n}\n\n@media (prefers-reduced-motion: reduce) { .dz-boreal-observatory-console *, .dz-boreal-observatory-console *::before, .dz-boreal-observatory-console *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/boreal-observatory.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Space+Grotesk%2C+sans-serif:wght@400;500;600;700&family=Inter%2C+sans-serif:wght@400;500;600;700&family=JetBrains+Mono%2C+monospace:wght@400;500;600;700&display=swap"
}