{
  "id": "meter-room-tariffs",
  "name": "Tariffs",
  "theme": "meter-room",
  "category": "Pricing",
  "description": "Metering plans priced per meter per month, each illustrated by the same fixed-scale chart so the pricing page cannot misrepresent the product.",
  "layout": "Three plan tiles at uniform height, each carrying a fixed-scale sample chart and a mono price, then a table of what a meter costs to install.",
  "modules": [
    {
      "key": "head",
      "name": "Tariffs header",
      "html": "\n<header class=\"th\"><span class=\"k\">Metering</span><h1>Per meter, per month</h1><p>Hardware is bought once and is yours. What you pay monthly is polling, storage and the wall display licence.</p></header>"
    },
    {
      "key": "plans",
      "name": "Plan tiles",
      "html": "\n<section class=\"gd\">\n<article class=\"tl\"><span class=\"k\">Record</span><p class=\"pz\">£6</p><span class=\"k\">per meter / month</span><div class=\"row\"><div class=\"yl\"><span>250</span><span>0</span></div><div class=\"ch\"><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,60 40,54 80,46 120,44 160,50 200,56\"/></svg></div></div><ul><li>30-second polling</li><li>Ten-year retention</li><li>Fixed-scale charts</li><li>CSV export</li></ul><button class=\"gh\">Choose Record</button></article>\n<article class=\"tl on\"><span class=\"k\">Compare</span><p class=\"pz\">£11</p><span class=\"k\">per meter / month</span><div class=\"row\"><div class=\"yl\"><span>250</span><span>0</span></div><div class=\"ch\"><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,60 40,54 80,46 120,44 160,50 200,56\"/></svg></div></div><ul><li>Everything in Record</li><li>Side-by-side comparison, up to four</li><li>Tariff apportionment</li><li>Monthly report, posted</li></ul><button class=\"pri\">Choose Compare</button></article>\n<article class=\"tl\"><span class=\"k\">Wall</span><p class=\"pz\">£19</p><span class=\"k\">per meter / month</span><div class=\"row\"><div class=\"yl\"><span>250</span><span>0</span></div><div class=\"ch\"><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,60 40,54 80,46 120,44 160,50 200,56\"/></svg></div></div><ul><li>Everything in Compare</li><li>Wall display licence, unlimited screens</li><li>Ceiling authoring</li><li>Out-of-band alerting</li></ul><button class=\"gh\">Choose Wall</button></article>\n</section>"
    },
    {
      "key": "hw",
      "name": "Hardware table",
      "html": "\n<footer class=\"tb\"><span class=\"k\">Hardware, bought once</span>\n<div class=\"rw\"><span>Three-phase CT meter, MID certified</span><b class=\"mn\">£184</b></div>\n<div class=\"rw\"><span>Pulse adaptor for an existing meter</span><b class=\"mn\">£62</b></div>\n<div class=\"rw\"><span>Gateway, up to 32 meters</span><b class=\"mn\">£340</b></div>\n<div class=\"rw\"><span>Wall display, 32 inch, mounted</span><b class=\"mn\">£710</b></div>\n<div class=\"rw\"><span>Commissioning, per site visit</span><b class=\"mn\">£480</b></div>\n</footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "meter-room-tariffs",
    "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-tariffs.json",
  "structure": "Three plan tiles at uniform height, each carrying a fixed-scale sample chart and a mono price, then a table of what a meter costs to install.",
  "html": "<div class=\"dz dz-meter-room-tariffs\" data-design=\"meter-room-tariffs\" data-theme=\"meter-room\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Tariffs header\">\n<header class=\"th\"><span class=\"k\">Metering</span><h1>Per meter, per month</h1><p>Hardware is bought once and is yours. What you pay monthly is polling, storage and the wall display licence.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"plans\" aria-label=\"Plan tiles\">\n<section class=\"gd\">\n<article class=\"tl\"><span class=\"k\">Record</span><p class=\"pz\">£6</p><span class=\"k\">per meter / month</span><div class=\"row\"><div class=\"yl\"><span>250</span><span>0</span></div><div class=\"ch\"><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,60 40,54 80,46 120,44 160,50 200,56\"/></svg></div></div><ul><li>30-second polling</li><li>Ten-year retention</li><li>Fixed-scale charts</li><li>CSV export</li></ul><button class=\"gh\">Choose Record</button></article>\n<article class=\"tl on\"><span class=\"k\">Compare</span><p class=\"pz\">£11</p><span class=\"k\">per meter / month</span><div class=\"row\"><div class=\"yl\"><span>250</span><span>0</span></div><div class=\"ch\"><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,60 40,54 80,46 120,44 160,50 200,56\"/></svg></div></div><ul><li>Everything in Record</li><li>Side-by-side comparison, up to four</li><li>Tariff apportionment</li><li>Monthly report, posted</li></ul><button class=\"pri\">Choose Compare</button></article>\n<article class=\"tl\"><span class=\"k\">Wall</span><p class=\"pz\">£19</p><span class=\"k\">per meter / month</span><div class=\"row\"><div class=\"yl\"><span>250</span><span>0</span></div><div class=\"ch\"><svg viewBox=\"0 0 200 96\" preserveAspectRatio=\"none\"><polyline points=\"0,60 40,54 80,46 120,44 160,50 200,56\"/></svg></div></div><ul><li>Everything in Compare</li><li>Wall display licence, unlimited screens</li><li>Ceiling authoring</li><li>Out-of-band alerting</li></ul><button class=\"gh\">Choose Wall</button></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"hw\" aria-label=\"Hardware table\">\n<footer class=\"tb\"><span class=\"k\">Hardware, bought once</span>\n<div class=\"rw\"><span>Three-phase CT meter, MID certified</span><b class=\"mn\">£184</b></div>\n<div class=\"rw\"><span>Pulse adaptor for an existing meter</span><b class=\"mn\">£62</b></div>\n<div class=\"rw\"><span>Gateway, up to 32 meters</span><b class=\"mn\">£340</b></div>\n<div class=\"rw\"><span>Wall display, 32 inch, mounted</span><b class=\"mn\">£710</b></div>\n<div class=\"rw\"><span>Commissioning, per site visit</span><b class=\"mn\">£480</b></div>\n</footer></section>\n</div>",
  "css": "\n.dz-meter-room-tariffs { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 30px 22px; }\n.dz-meter-room-tariffs .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-meter-room-tariffs .mn { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; }\n.dz-meter-room-tariffs .th { margin-bottom: 22px; max-width: 62ch; }\n.dz-meter-room-tariffs h1 { font-size: 50px; font-weight: 700; letter-spacing: -.025em; margin: 6px 0 10px; }\n.dz-meter-room-tariffs .th p { margin: 0; font-size: 15.5px; line-height: 1.58; color: var(--muted-foreground); }\n.dz-meter-room-tariffs .gd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1000px; }\n.dz-meter-room-tariffs .tl { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 18px; }\n.dz-meter-room-tariffs .tl.on { border-color: var(--primary); border-width: 2px; padding: 17px; }\n.dz-meter-room-tariffs .pz { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; font-size: 54px; line-height: 1; margin: 10px 0 4px; letter-spacing: -.03em; }\n.dz-meter-room-tariffs .row { display: grid; grid-template-columns: 30px 1fr; gap: 8px; margin: 16px 0; }\n\n.dz-meter-room-tariffs .ch { position: relative; height: 96px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }\n.dz-meter-room-tariffs .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-tariffs .ch svg { position: absolute; inset: 0; width: 100%; height: 100%; }\n.dz-meter-room-tariffs .ch polyline { fill: none; stroke: var(--primary); stroke-width: 1.5; vector-effect: non-scaling-stroke; }\n.dz-meter-room-tariffs .ch polyline.clip { stroke: var(--accent); stroke-width: 3; }\n.dz-meter-room-tariffs .ch .cap { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); }\n.dz-meter-room-tariffs .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-tariffs .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-tariffs .ch { height: 60px; }\n.dz-meter-room-tariffs .yl { height: 60px; }\n.dz-meter-room-tariffs ul { list-style: none; margin: 0 0 18px; padding: 0; }\n.dz-meter-room-tariffs li { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }\n.dz-meter-room-tariffs button { width: 100%; border-radius: 3px; padding: 11px; font: inherit; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; cursor: pointer; }\n.dz-meter-room-tariffs .pri { background: var(--primary); color: var(--primary-foreground); border: 0; }\n.dz-meter-room-tariffs .gh { background: transparent; color: var(--foreground); border: 1px solid var(--border); }\n.dz-meter-room-tariffs .tb { max-width: 1000px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }\n.dz-meter-room-tariffs .tb .k { margin-bottom: 10px; }\n.dz-meter-room-tariffs .rw { display: flex; align-items: baseline; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; max-width: 62ch; }\n.dz-meter-room-tariffs .rw b { margin-left: auto; font-weight: 400; }\n@media (prefers-reduced-motion: reduce) { .dz-meter-room-tariffs *, .dz-meter-room-tariffs *::before, .dz-meter-room-tariffs *::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"
}