{
  "id": "meter-room-wall",
  "name": "Wall",
  "theme": "meter-room",
  "category": "Dashboard",
  "description": "Uniform 320px meter tiles on one fixed kW scale, so a quiet plant room reads as a low trace with empty space above it rather than filling its frame.",
  "layout": "A regular grid of same-size tiles, each with a Geist Mono demand figure at 54px and a 96px trace drawn against the declared ceiling for its unit.",
  "modules": [
    {
      "key": "bar",
      "name": "Estate bar",
      "html": "\n<header class=\"bb\"><span class=\"lg\">Meter Room</span><nav><a class=\"on\" href=\"#\">Wall</a><a href=\"#\">Compare</a><a href=\"#\">Reports</a><a href=\"#\">Tariffs</a></nav><span class=\"sc mn\">ALL kW CHARTS FIXED 0—250 · NO AUTO-SCALE</span></header>"
    },
    {
      "key": "tiles",
      "name": "Meter tiles",
      "html": "\n<section class=\"gd\">\n<article class=\"tl\"><span class=\"k\">Block A · main incomer</span><p class=\"big\">184<small>kW</small></p><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 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,52 25,48 50,40 75,32 100,28 125,30 150,34 175,42 200,44\"/></svg></div></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><span class=\"tf\">Day rate · 24.1 p/kWh</span></article>\n<article class=\"tl\"><span class=\"k\">Block B · lighting</span><p class=\"big\">31<small>kW</small></p><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 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,88 25,86 50,84 75,82 100,84 125,83 150,85 175,87 200,88\"/></svg></div></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><span class=\"tf\">Day rate · 24.1 p/kWh</span></article>\n<article class=\"tl\"><span class=\"k\">Chiller plant</span><p class=\"big\">96<small>kW</small></p><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 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,92 25,90 50,72 75,58 100,54 125,56 150,62 175,80 200,90\"/></svg></div></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><span class=\"tf\">Day rate · 24.1 p/kWh</span></article>\n<article class=\"tl out\"><span class=\"k\">Kitchen ring</span><p class=\"big bad\">268<small>kW</small></p><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><span class=\"cap\"></span><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,70 25,62 50,44 75,20 100,4\"/><polyline class=\"clip\" points=\"100,2 150,2\"/><polyline points=\"150,4 175,26 200,48\"/></svg></div></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><span class=\"tf bad\">Clipped at ceiling for 3h 20m</span></article>\n<article class=\"tl\"><span class=\"k\">Server room</span><p class=\"big\">44<small>kW</small></p><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 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,80 25,80 50,79 75,80 100,78 125,79 150,80 175,80 200,79\"/></svg></div></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><span class=\"tf\">Flat rate · 22.4 p/kWh</span></article>\n<article class=\"tl\"><span class=\"k\">Car park</span><p class=\"big\">12<small>kW</small></p><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 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,92 25,91 50,93 75,92 100,93 125,92 150,91 175,92 200,92\"/></svg></div></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><span class=\"tf\">Night rate · 11.8 p/kWh</span></article>\n</section>"
    },
    {
      "key": "note",
      "name": "Scale note",
      "html": "\n<footer class=\"nt\"><span class=\"k\">Why the car park chart looks empty</span><p>Because it is. Twelve kilowatts on a scale that runs to two hundred and fifty is a flat line near the floor, and an auto-scaling chart would have drawn it as a dramatic mountain range. The empty space is the information.</p></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "meter-room-wall",
    "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-wall.json",
  "structure": "A regular grid of same-size tiles, each with a Geist Mono demand figure at 54px and a 96px trace drawn against the declared ceiling for its unit.",
  "html": "<div class=\"dz dz-meter-room-wall\" data-design=\"meter-room-wall\" data-theme=\"meter-room\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Estate bar\">\n<header class=\"bb\"><span class=\"lg\">Meter Room</span><nav><a class=\"on\" href=\"#\">Wall</a><a href=\"#\">Compare</a><a href=\"#\">Reports</a><a href=\"#\">Tariffs</a></nav><span class=\"sc mn\">ALL kW CHARTS FIXED 0—250 · NO AUTO-SCALE</span></header></section>\n<section class=\"dz-mod\" data-mod=\"tiles\" aria-label=\"Meter tiles\">\n<section class=\"gd\">\n<article class=\"tl\"><span class=\"k\">Block A · main incomer</span><p class=\"big\">184<small>kW</small></p><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 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,52 25,48 50,40 75,32 100,28 125,30 150,34 175,42 200,44\"/></svg></div></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><span class=\"tf\">Day rate · 24.1 p/kWh</span></article>\n<article class=\"tl\"><span class=\"k\">Block B · lighting</span><p class=\"big\">31<small>kW</small></p><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 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,88 25,86 50,84 75,82 100,84 125,83 150,85 175,87 200,88\"/></svg></div></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><span class=\"tf\">Day rate · 24.1 p/kWh</span></article>\n<article class=\"tl\"><span class=\"k\">Chiller plant</span><p class=\"big\">96<small>kW</small></p><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 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,92 25,90 50,72 75,58 100,54 125,56 150,62 175,80 200,90\"/></svg></div></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><span class=\"tf\">Day rate · 24.1 p/kWh</span></article>\n<article class=\"tl out\"><span class=\"k\">Kitchen ring</span><p class=\"big bad\">268<small>kW</small></p><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><span class=\"cap\"></span><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,70 25,62 50,44 75,20 100,4\"/><polyline class=\"clip\" points=\"100,2 150,2\"/><polyline points=\"150,4 175,26 200,48\"/></svg></div></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><span class=\"tf bad\">Clipped at ceiling for 3h 20m</span></article>\n<article class=\"tl\"><span class=\"k\">Server room</span><p class=\"big\">44<small>kW</small></p><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 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,80 25,80 50,79 75,80 100,78 125,79 150,80 175,80 200,79\"/></svg></div></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><span class=\"tf\">Flat rate · 22.4 p/kWh</span></article>\n<article class=\"tl\"><span class=\"k\">Car park</span><p class=\"big\">12<small>kW</small></p><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 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,92 25,91 50,93 75,92 100,93 125,92 150,91 175,92 200,92\"/></svg></div></div><div class=\"ax\"><span>00</span><span>12</span><span>24</span></div><span class=\"tf\">Night rate · 11.8 p/kWh</span></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"note\" aria-label=\"Scale note\">\n<footer class=\"nt\"><span class=\"k\">Why the car park chart looks empty</span><p>Because it is. Twelve kilowatts on a scale that runs to two hundred and fifty is a flat line near the floor, and an auto-scaling chart would have drawn it as a dramatic mountain range. The empty space is the information.</p></footer></section>\n</div>",
  "css": "\n.dz-meter-room-wall { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 22px; }\n.dz-meter-room-wall .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-meter-room-wall .mn { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; }\n.dz-meter-room-wall .bb { display: flex; align-items: center; gap: 22px; height: 46px; margin-bottom: 14px; }\n.dz-meter-room-wall .lg { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }\n.dz-meter-room-wall .bb nav { display: flex; gap: 16px; }\n.dz-meter-room-wall .bb a { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); text-decoration: none; padding-bottom: 3px; }\n.dz-meter-room-wall .bb a.on { color: var(--primary); border-bottom: 2px solid var(--primary); }\n.dz-meter-room-wall .sc { color: var(--muted-foreground); margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; }\n.dz-meter-room-wall .gd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }\n.dz-meter-room-wall .tl { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 16px; }\n.dz-meter-room-wall .tl.out { border-color: var(--accent); }\n.dz-meter-room-wall .big { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; font-size: 54px; line-height: 1; margin: 10px 0 14px; letter-spacing: -.03em; }\n.dz-meter-room-wall .big small { font-size: 18px; margin-left: 4px; color: var(--muted-foreground); }\n.dz-meter-room-wall .bad { color: var(--accent); }\n.dz-meter-room-wall .row { display: grid; grid-template-columns: 30px 1fr; gap: 8px; }\n\n.dz-meter-room-wall .ch { position: relative; height: 96px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }\n.dz-meter-room-wall .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-wall .ch svg { position: absolute; inset: 0; width: 100%; height: 100%; }\n.dz-meter-room-wall .ch polyline { fill: none; stroke: var(--primary); stroke-width: 1.5; vector-effect: non-scaling-stroke; }\n.dz-meter-room-wall .ch polyline.clip { stroke: var(--accent); stroke-width: 3; }\n.dz-meter-room-wall .ch .cap { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); }\n.dz-meter-room-wall .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-wall .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-wall .tf { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); display: block; margin-top: 10px; }\n.dz-meter-room-wall .nt { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }\n.dz-meter-room-wall .nt p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted-foreground); max-width: 68ch; }\n@media (prefers-reduced-motion: reduce) { .dz-meter-room-wall *, .dz-meter-room-wall *::before, .dz-meter-room-wall *::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"
}