{
  "id": "meter-room-access",
  "name": "Plant Access",
  "theme": "meter-room",
  "category": "Auth & Onboarding",
  "description": "Sign-in for a wall display, which states which building it is bolted to and how far away it can be read from before asking for anything.",
  "layout": "A plant-room photograph filling most of the frame with a narrow form column, and a display block naming the mounting and the reading distance.",
  "modules": [
    {
      "key": "art",
      "name": "Plant photograph",
      "html": "\n<figure class=\"ar\"><img src=\"{{ART plant}}\" alt=\"{{ARTALT plant}}\"></figure>"
    },
    {
      "key": "display",
      "name": "Display identity",
      "html": "\n<section class=\"dp\"><span class=\"k\">This display</span><h1>Kilcarn Lane · plant room 2</h1><div class=\"kv\"><span>Mounting</span><b>Wall, 2.1 m, fixed</b></div><div class=\"kv\"><span>Readable from</span><b>6 m</b></div><div class=\"kv\"><span>Meters shown</span><b>9</b></div><div class=\"kv\"><span>Refresh</span><b>30 s</b></div></section>"
    },
    {
      "key": "form",
      "name": "Sign-in fields",
      "html": "\n<section class=\"fm\"><label><span class=\"k\">Engineer</span><input class=\"mn\" value=\"a.bekele\"></label><label><span class=\"k\">Passcode</span><input class=\"mn\" value=\"••••••\"></label><button class=\"pri\">Take the display</button><p class=\"nt\">A wall display shows figures at 54px because it is read from across a room. If you are signing in from a desk, use the console instead.</p></section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "meter-room-access",
    "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-access.json",
  "structure": "A plant-room photograph filling most of the frame with a narrow form column, and a display block naming the mounting and the reading distance.",
  "html": "<div class=\"dz dz-meter-room-access\" data-design=\"meter-room-access\" data-theme=\"meter-room\">\n<section class=\"dz-mod\" data-mod=\"art\" aria-label=\"Plant photograph\">\n<figure class=\"ar\"><img src=\"https://designlookbook.dev/assets/img/meter-room-plant.webp\" alt=\"Painted pipes running up a plant room wall\"></figure></section>\n<section class=\"dz-mod\" data-mod=\"display\" aria-label=\"Display identity\">\n<section class=\"dp\"><span class=\"k\">This display</span><h1>Kilcarn Lane · plant room 2</h1><div class=\"kv\"><span>Mounting</span><b>Wall, 2.1 m, fixed</b></div><div class=\"kv\"><span>Readable from</span><b>6 m</b></div><div class=\"kv\"><span>Meters shown</span><b>9</b></div><div class=\"kv\"><span>Refresh</span><b>30 s</b></div></section></section>\n<section class=\"dz-mod\" data-mod=\"form\" aria-label=\"Sign-in fields\">\n<section class=\"fm\"><label><span class=\"k\">Engineer</span><input class=\"mn\" value=\"a.bekele\"></label><label><span class=\"k\">Passcode</span><input class=\"mn\" value=\"••••••\"></label><button class=\"pri\">Take the display</button><p class=\"nt\">A wall display shows figures at 54px because it is read from across a room. If you are signing in from a desk, use the console instead.</p></section></section>\n</div>",
  "css": "\n.dz-meter-room-access { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 1fr 380px; grid-template-rows: auto 1fr; min-height: 600px; }\n.dz-meter-room-access .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); display: block; margin-bottom: 6px; }\n.dz-meter-room-access .mn { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; }\n.dz-meter-room-access .ar { grid-row: 1 / span 2; margin: 0; }\n.dz-meter-room-access .ar img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-meter-room-access .dp { padding: 44px 26px 0; }\n.dz-meter-room-access h1 { font-size: 29px; font-weight: 600; letter-spacing: -.012em; margin: 4px 0 18px; }\n.dz-meter-room-access .kv { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }\n.dz-meter-room-access .kv span { color: var(--muted-foreground); }\n.dz-meter-room-access .kv b { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; font-weight: 400; }\n.dz-meter-room-access .fm { padding: 24px 26px 26px; }\n.dz-meter-room-access label { display: block; margin-bottom: 14px; }\n.dz-meter-room-access input { display: block; width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid var(--border); border-radius: 3px; color: var(--foreground); font: inherit; font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; font-size: 14px; padding: 10px 12px; }\n.dz-meter-room-access input:focus { outline: none; border-color: var(--primary); }\n.dz-meter-room-access .pri { width: 100%; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 3px; padding: 12px; font: inherit; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; cursor: pointer; }\n.dz-meter-room-access .nt { font-size: 13px; line-height: 1.55; color: var(--muted-foreground); margin: 12px 0 0; }\n@media (prefers-reduced-motion: reduce) { .dz-meter-room-access *, .dz-meter-room-access *::before, .dz-meter-room-access *::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"
}