{
  "id": "aurora-console-landing",
  "name": "Instrument Landing",
  "theme": "aurora-console",
  "category": "Landing",
  "description": "A product page that opens with a working dashboard rather than a promise, so the first thing you see is the thing you are buying.",
  "layout": "A left-weighted hero at 5 columns with a live-looking panel occupying the remaining 7 and bleeding off the right edge, then a three-up proof band and a full-bleed aurora plate.",
  "modules": [
    {
      "key": "nav",
      "name": "Navigation",
      "html": "\n<header class=\"nv\"><span class=\"br\">aurora</span><nav><a href=\"#\">Product</a><a href=\"#\">Pricing</a><a href=\"#\">Docs</a><a href=\"#\">Changelog</a></nav><a class=\"cta\" href=\"#\">Start free</a></header>"
    },
    {
      "key": "hero",
      "name": "Hero",
      "html": "\n<div class=\"hr\"><span class=\"k\">Observability</span>\n<h1>Find the slow thing in ninety seconds.</h1>\n<p>Traces, metrics and logs on one clock. No sampling below a million spans a minute, no per-seat pricing, no agents you have to babysit.</p>\n<div class=\"act\"><a class=\"btn\" href=\"#\">Start free</a><a class=\"lnk\" href=\"#\">Read the architecture</a></div>\n<span class=\"fine\">No card. 30-day retention on the free tier.</span></div>"
    },
    {
      "key": "panel",
      "name": "Live panel",
      "html": "\n<figure class=\"pn\"><img src=\"{{ART grid}}\" alt=\"{{ARTALT grid}}\">\n<figcaption><span class=\"k\">p99 · checkout</span><b>214<i>ms</i></b><span class=\"m\">down 11ms since deploy 8f2c</span></figcaption></figure>"
    },
    {
      "key": "proof",
      "name": "Proof band",
      "html": "\n<section class=\"pf\">\n  <div><b>1.4M</b><span class=\"k\">spans / second ingested</span></div>\n  <div><b>90 s</b><span class=\"k\">median time to first insight</span></div>\n  <div><b>0</b><span class=\"k\">sampled spans below the cap</span></div>\n</section>"
    },
    {
      "key": "plate",
      "name": "Aurora plate",
      "html": "\n<figure class=\"pl\"><img src=\"{{ART bloom}}\" alt=\"{{ARTALT bloom}}\"><figcaption>Built by people who were on call.</figcaption></figure>"
    }
  ],
  "moduleCount": 5,
  "reorderable": true,
  "meta": {
    "id": "aurora-console-landing",
    "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-landing.json",
  "structure": "A left-weighted hero at 5 columns with a live-looking panel occupying the remaining 7 and bleeding off the right edge, then a three-up proof band and a full-bleed aurora plate.",
  "html": "<div class=\"dz dz-aurora-console-landing\" data-design=\"aurora-console-landing\" data-theme=\"aurora-console\">\n<section class=\"dz-mod\" data-mod=\"nav\" aria-label=\"Navigation\">\n<header class=\"nv\"><span class=\"br\">aurora</span><nav><a href=\"#\">Product</a><a href=\"#\">Pricing</a><a href=\"#\">Docs</a><a href=\"#\">Changelog</a></nav><a class=\"cta\" href=\"#\">Start free</a></header></section>\n<section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Hero\">\n<div class=\"hr\"><span class=\"k\">Observability</span>\n<h1>Find the slow thing in ninety seconds.</h1>\n<p>Traces, metrics and logs on one clock. No sampling below a million spans a minute, no per-seat pricing, no agents you have to babysit.</p>\n<div class=\"act\"><a class=\"btn\" href=\"#\">Start free</a><a class=\"lnk\" href=\"#\">Read the architecture</a></div>\n<span class=\"fine\">No card. 30-day retention on the free tier.</span></div></section>\n<section class=\"dz-mod\" data-mod=\"panel\" aria-label=\"Live panel\">\n<figure class=\"pn\"><img src=\"https://designlookbook.dev/assets/img/aurora-console-grid.webp\" alt=\"A violet wireframe grid receding into darkness with one bright cyan line down its centre\">\n<figcaption><span class=\"k\">p99 · checkout</span><b>214<i>ms</i></b><span class=\"m\">down 11ms since deploy 8f2c</span></figcaption></figure></section>\n<section class=\"dz-mod\" data-mod=\"proof\" aria-label=\"Proof band\">\n<section class=\"pf\">\n  <div><b>1.4M</b><span class=\"k\">spans / second ingested</span></div>\n  <div><b>90 s</b><span class=\"k\">median time to first insight</span></div>\n  <div><b>0</b><span class=\"k\">sampled spans below the cap</span></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"plate\" aria-label=\"Aurora plate\">\n<figure class=\"pl\"><img src=\"https://designlookbook.dev/assets/img/aurora-console-bloom.webp\" alt=\"A soft violet-to-cyan gradient bloom on black\"><figcaption>Built by people who were on call.</figcaption></figure></section>\n</div>",
  "css": "\n.dz-aurora-console-landing { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; }\n.dz-aurora-console-landing .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-aurora-console-landing .nv { grid-column: 1 / -1; display: flex; align-items: center; gap: 26px; padding: 18px 28px; }\n.dz-aurora-console-landing .br { font-family: var(--pv-display); font-size: 18px; font-weight: 700; color: var(--primary); }\n.dz-aurora-console-landing .nv nav { display: flex; gap: 20px; margin-left: 14px; }\n.dz-aurora-console-landing .nv a { font-size: 13px; color: var(--muted-foreground); text-decoration: none; }\n.dz-aurora-console-landing .nv a:hover { color: var(--foreground); }\n.dz-aurora-console-landing .cta { margin-left: auto; font-size: 12.5px; background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--foreground) !important; border: var(--pv-bw) solid color-mix(in srgb, var(--primary) 45%, transparent); border-radius: var(--pv-radius-md); padding: 8px 15px; }\n.dz-aurora-console-landing .hr { grid-column: 1 / 6; padding: 34px 0 44px 28px; align-self: center; }\n.dz-aurora-console-landing .hr h1 { font-family: var(--pv-display); font-size: 44px; line-height: 1.06; font-weight: 700; letter-spacing: -.03em; margin: 10px 0 16px; }\n.dz-aurora-console-landing .hr p { font-size: 16px; line-height: 1.62; color: var(--muted-foreground); margin: 0 0 24px; max-width: 42ch; }\n.dz-aurora-console-landing .act { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }\n.dz-aurora-console-landing .btn { font-size: 14px; background: var(--primary); color: var(--primary-foreground); border-radius: var(--pv-radius-md); padding: 12px 22px; text-decoration: none; box-shadow: 0 0 30px -6px color-mix(in srgb, var(--primary) 70%, transparent); transition: filter var(--dur) var(--ease); }\n.dz-aurora-console-landing .btn:hover { filter: brightness(1.14); }\n.dz-aurora-console-landing .lnk { font-size: 13.5px; color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }\n.dz-aurora-console-landing .fine { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-aurora-console-landing .pn { grid-column: 6 / -1; margin: 0; position: relative; 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); border-radius: var(--pv-radius-xl) 0 0 var(--pv-radius-xl); overflow: hidden; align-self: center; }\n.dz-aurora-console-landing .pn img { width: 100%; height: 320px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-aurora-console-landing .pn figcaption { position: absolute; left: 20px; bottom: 20px; background: color-mix(in srgb, var(--card) 86%, transparent); backdrop-filter: blur(8px); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }\n.dz-aurora-console-landing .pn b { font-family: var(--pv-mono); font-size: 28px; font-weight: 700; font-feature-settings: \"tnum\" 1; }\n.dz-aurora-console-landing .pn b i { font-size: 14px; font-style: normal; color: var(--muted-foreground); }\n.dz-aurora-console-landing .m { font-family: var(--pv-mono); font-size: 11px; color: var(--muted-foreground); }\n.dz-aurora-console-landing .pf { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 30px 28px; border-top: var(--pv-bw) solid var(--border); border-bottom: var(--pv-bw) solid var(--border); }\n.dz-aurora-console-landing .pf div { display: flex; flex-direction: column; gap: 7px; }\n.dz-aurora-console-landing .pf b { font-family: var(--pv-mono); font-size: 38px; font-weight: 700; letter-spacing: -.03em; color: var(--primary); }\n.dz-aurora-console-landing .pl { grid-column: 1 / -1; margin: 0; position: relative; }\n.dz-aurora-console-landing .pl img { width: 100%; height: 190px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-aurora-console-landing .pl figcaption { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--pv-display); font-size: 24px; letter-spacing: -.02em; background: linear-gradient(color-mix(in srgb, var(--background) 30%, transparent), color-mix(in srgb, var(--background) 78%, transparent)); }\n@media (prefers-reduced-motion: reduce) { .dz-aurora-console-landing *, .dz-aurora-console-landing *::before, .dz-aurora-console-landing *::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"
}