{
  "id": "meter-room-case",
  "name": "Fixed Scale",
  "theme": "meter-room",
  "category": "Landing",
  "description": "A marketing page that argues its one rule by showing the same day drawn twice — once auto-scaled and once on the declared ceiling.",
  "layout": "A switchgear hero, then the two versions of one chart side by side as the central argument, then three claims and a plant-room strip.",
  "modules": [
    {
      "key": "hero",
      "name": "Switchgear hero",
      "html": "\n<header class=\"hr\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><div class=\"ov\"><span class=\"k\">Meter Room · energy monitoring</span><h1>No chart here scales to its data</h1><p>Every chart of a unit uses one declared ceiling. A quiet day is a low trace with empty space above it, which looks worse on a screenshot and is the only way two days can be compared by eye.</p><button class=\"pri\">Book a demonstration</button></div></header>"
    },
    {
      "key": "argument",
      "name": "The two charts",
      "html": "\n<section class=\"ag\"><article><span class=\"k\">Auto-scaled · what everyone else draws</span><div class=\"row\"><div class=\"yl\"><span>13</span><span>12</span><span>11</span></div><div class=\"ch\"><span class=\"gl\" style=\"top:50%\"></span><svg viewBox=\"0 0 300 96\" preserveAspectRatio=\"none\"><polyline points=\"0,60 40,40 80,80 120,52 160,86 200,44 240,20 280,58 300,64\"/></svg></div></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><p class=\"nt2\">Twelve kilowatts, drawn as a dramatic day.</p></article><article><span class=\"k\">Fixed at 250 kW · what we draw</span><div class=\"row\"><div class=\"yl\"><span>250</span><span>125</span><span>0</span></div><div class=\"ch\"><span class=\"gl\" style=\"top:50%\"></span><svg viewBox=\"0 0 300 96\" preserveAspectRatio=\"none\"><polyline points=\"0,92 40,91 80,93 120,92 160,93 200,92 240,91 280,92 300,92\"/></svg></div></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><p class=\"nt2\">The same twelve kilowatts. Nothing happened, and the chart says so.</p></article></section>"
    },
    {
      "key": "claims",
      "name": "Three claims",
      "html": "\n<section class=\"cl\"><article><h2>Clipping is information</h2><p>A value above the ceiling clips there and the clipped run is drawn in violet. We would rather show you that a meter went off the top than quietly redraw the axis around it.</p></article><article><h2>No overlay mode</h2><p>Comparison is two or four charts on one shared axis. Overlaying two meters on one chart makes both harder to read and neither easier.</p></article><article><h2>One series colour</h2><p>There is no second series colour in this system. If you need to compare, put the charts next to each other.</p></article></section>"
    },
    {
      "key": "strip",
      "name": "Plant strip",
      "html": "\n<footer class=\"st\"><figure><img src=\"{{ART meters}}\" alt=\"{{ARTALT meters}}\"></figure><figure><img src=\"{{ART cables}}\" alt=\"{{ARTALT cables}}\"></figure><figure><img src=\"{{ART switchgear}}\" alt=\"{{ARTALT switchgear}}\"></figure></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "meter-room-case",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:44:43+09:00",
    "updatedAt": "2026-09-02T01:44:43+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/meter-room-case.json",
  "structure": "A switchgear hero, then the two versions of one chart side by side as the central argument, then three claims and a plant-room strip.",
  "html": "<div class=\"dz dz-meter-room-case\" data-design=\"meter-room-case\" data-theme=\"meter-room\">\n<section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Switchgear hero\">\n<header class=\"hr\"><img src=\"https://designlookbook.dev/assets/img/meter-room-hero.webp\" alt=\"A plant room wall of pipework and gauges under cool light\"><div class=\"ov\"><span class=\"k\">Meter Room · energy monitoring</span><h1>No chart here scales to its data</h1><p>Every chart of a unit uses one declared ceiling. A quiet day is a low trace with empty space above it, which looks worse on a screenshot and is the only way two days can be compared by eye.</p><button class=\"pri\">Book a demonstration</button></div></header></section>\n<section class=\"dz-mod\" data-mod=\"argument\" aria-label=\"The two charts\">\n<section class=\"ag\"><article><span class=\"k\">Auto-scaled · what everyone else draws</span><div class=\"row\"><div class=\"yl\"><span>13</span><span>12</span><span>11</span></div><div class=\"ch\"><span class=\"gl\" style=\"top:50%\"></span><svg viewBox=\"0 0 300 96\" preserveAspectRatio=\"none\"><polyline points=\"0,60 40,40 80,80 120,52 160,86 200,44 240,20 280,58 300,64\"/></svg></div></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><p class=\"nt2\">Twelve kilowatts, drawn as a dramatic day.</p></article><article><span class=\"k\">Fixed at 250 kW · what we draw</span><div class=\"row\"><div class=\"yl\"><span>250</span><span>125</span><span>0</span></div><div class=\"ch\"><span class=\"gl\" style=\"top:50%\"></span><svg viewBox=\"0 0 300 96\" preserveAspectRatio=\"none\"><polyline points=\"0,92 40,91 80,93 120,92 160,93 200,92 240,91 280,92 300,92\"/></svg></div></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><p class=\"nt2\">The same twelve kilowatts. Nothing happened, and the chart says so.</p></article></section></section>\n<section class=\"dz-mod\" data-mod=\"claims\" aria-label=\"Three claims\">\n<section class=\"cl\"><article><h2>Clipping is information</h2><p>A value above the ceiling clips there and the clipped run is drawn in violet. We would rather show you that a meter went off the top than quietly redraw the axis around it.</p></article><article><h2>No overlay mode</h2><p>Comparison is two or four charts on one shared axis. Overlaying two meters on one chart makes both harder to read and neither easier.</p></article><article><h2>One series colour</h2><p>There is no second series colour in this system. If you need to compare, put the charts next to each other.</p></article></section></section>\n<section class=\"dz-mod\" data-mod=\"strip\" aria-label=\"Plant strip\">\n<footer class=\"st\"><figure><img src=\"https://designlookbook.dev/assets/img/meter-room-meters.webp\" alt=\"A bank of blank meter faces in a row\"></figure><figure><img src=\"https://designlookbook.dev/assets/img/meter-room-cables.webp\" alt=\"Cable trays crossing a ceiling void\"></figure><figure><img src=\"https://designlookbook.dev/assets/img/meter-room-switchgear.webp\" alt=\"A row of switchgear cabinets in a bare room\"></figure></footer></section>\n</div>",
  "css": "\n.dz-meter-room-case { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-meter-room-case .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-meter-room-case .hr { position: relative; }\n.dz-meter-room-case .hr img { width: 100%; height: 460px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-meter-room-case .ov { position: absolute; inset: 0; padding: 34px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, var(--background), transparent 70%); }\n.dz-meter-room-case h1 { font-size: 50px; font-weight: 700; line-height: 1.04; letter-spacing: -.025em; margin: 8px 0 12px; max-width: 20ch; }\n.dz-meter-room-case .ov p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.58; color: var(--muted-foreground); max-width: 58ch; }\n.dz-meter-room-case .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 3px; padding: 12px 22px; font: inherit; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; cursor: pointer; align-self: flex-start; }\n.dz-meter-room-case .ag { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 34px 22px; }\n.dz-meter-room-case .row { display: grid; grid-template-columns: 34px 1fr; gap: 8px; margin: 10px 0 0; }\n\n.dz-meter-room-case .ch { position: relative; height: 96px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }\n.dz-meter-room-case .ch .gl { position: absolute; left: 0; right: 0; border-top: 1px dashed color-mix(in oklab, var(--muted-foreground) 40%, transparent); }\n.dz-meter-room-case .ch svg { position: absolute; inset: 0; width: 100%; height: 100%; }\n.dz-meter-room-case .ch polyline { fill: none; stroke: var(--primary); stroke-width: 1.5; vector-effect: non-scaling-stroke; }\n.dz-meter-room-case .ch polyline.clip { stroke: var(--accent); stroke-width: 3; }\n.dz-meter-room-case .ch .cap { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); }\n.dz-meter-room-case .ax { display: flex; justify-content: space-between; font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; font-size: 10px; color: var(--muted-foreground); margin-top: 5px; }\n.dz-meter-room-case .yl { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; font-size: 10px; color: var(--muted-foreground); display: flex; flex-direction: column; justify-content: space-between; height: 96px; text-align: right; }\n.dz-meter-room-case .nt2 { margin: 10px 0 0; font-size: 13.5px; color: var(--muted-foreground); }\n.dz-meter-room-case .cl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0 22px 34px; }\n.dz-meter-room-case .cl article { border-top: 2px solid var(--primary); padding-top: 14px; }\n.dz-meter-room-case h2 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }\n.dz-meter-room-case .cl p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted-foreground); }\n.dz-meter-room-case .st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 22px 34px; }\n.dz-meter-room-case .st figure { margin: 0; }\n.dz-meter-room-case .st img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 4px; filter: var(--img-filter); }\n@media (prefers-reduced-motion: reduce) { .dz-meter-room-case *, .dz-meter-room-case *::before, .dz-meter-room-case *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/meter-room.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600;700&display=swap"
}