{
  "id": "reed-bed-field",
  "name": "Field Access",
  "theme": "reed-bed",
  "category": "Auth & Onboarding",
  "description": "A sampler signing in from a riverbank: the site they are standing at is identified by grid reference before any credential field appears.",
  "layout": "A cool full-bleed reed photograph above a narrow form, with the detected site and its grid reference stated in Cousine as the first content.",
  "modules": [
    {
      "key": "art",
      "name": "Bank photograph",
      "html": "\n<figure class=\"ar\"><img src=\"{{ART reeds}}\" alt=\"{{ARTALT reeds}}\"></figure>"
    },
    {
      "key": "where",
      "name": "Detected site",
      "html": "\n<section class=\"wh\"><span class=\"k\">You appear to be at</span><h1>Mill Weir</h1><p class=\"gr\">N 4501 8904 · Kilcarn Water, Mill reach · ±8 m</p><a class=\"lk\" href=\"#\">Not this site</a></section>"
    },
    {
      "key": "form",
      "name": "Sampler sign-in",
      "html": "\n<section class=\"fm\"><label><span class=\"k\">Sampler ID</span><input class=\"mn\" value=\"SM-0117\"></label><label><span class=\"k\">Passcode</span><input class=\"mn\" value=\"••••••\"></label><button class=\"pri\">Open the round</button><p class=\"nt\">Offline sampling is available for four hours. Readings sync when you regain signal and are marked provisional until they do.</p></section>"
    },
    {
      "key": "last",
      "name": "Last visit",
      "html": "\n<footer class=\"lv2\"><span class=\"k\">Last visit here</span><div class=\"rw\"><span class=\"dt mn\">27 Feb 07:12</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:33%\"></u></span><b class=\"fig\">20.9</b><em class=\"un\">mg/l NO₃</em></span><span class=\"who mn\">SM-0117</span></div></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "reed-bed-field",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:12:17+09:00",
    "updatedAt": "2026-09-02T01:12:17+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/reed-bed-field.json",
  "structure": "A cool full-bleed reed photograph above a narrow form, with the detected site and its grid reference stated in Cousine as the first content.",
  "html": "<div class=\"dz dz-reed-bed-field\" data-design=\"reed-bed-field\" data-theme=\"reed-bed\">\n<section class=\"dz-mod\" data-mod=\"art\" aria-label=\"Bank photograph\">\n<figure class=\"ar\"><img src=\"https://designlookbook.dev/assets/img/reed-bed-reeds.webp\" alt=\"Tall reeds against still slate-coloured water\"></figure></section>\n<section class=\"dz-mod\" data-mod=\"where\" aria-label=\"Detected site\">\n<section class=\"wh\"><span class=\"k\">You appear to be at</span><h1>Mill Weir</h1><p class=\"gr\">N 4501 8904 · Kilcarn Water, Mill reach · ±8 m</p><a class=\"lk\" href=\"#\">Not this site</a></section></section>\n<section class=\"dz-mod\" data-mod=\"form\" aria-label=\"Sampler sign-in\">\n<section class=\"fm\"><label><span class=\"k\">Sampler ID</span><input class=\"mn\" value=\"SM-0117\"></label><label><span class=\"k\">Passcode</span><input class=\"mn\" value=\"••••••\"></label><button class=\"pri\">Open the round</button><p class=\"nt\">Offline sampling is available for four hours. Readings sync when you regain signal and are marked provisional until they do.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"last\" aria-label=\"Last visit\">\n<footer class=\"lv2\"><span class=\"k\">Last visit here</span><div class=\"rw\"><span class=\"dt mn\">27 Feb 07:12</span><span class=\"lv\"><span class=\"tk\"><i class=\"bd2\" style=\"left:0;right:38%\"></i><u class=\"mk\" style=\"left:33%\"></u></span><b class=\"fig\">20.9</b><em class=\"un\">mg/l NO₃</em></span><span class=\"who mn\">SM-0117</span></div></footer></section>\n</div>",
  "css": "\n.dz-reed-bed-field { background: var(--background); color: var(--foreground); font-family: var(--pv-body); max-width: 460px; }\n.dz-reed-bed-field .k { text-transform: uppercase; letter-spacing: .15em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-reed-bed-field .mn { font-family: var(--pv-mono); font-size: 12.5px; }\n.dz-reed-bed-field .ar { margin: 0; }\n.dz-reed-bed-field .ar img { width: 100%; height: 220px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-reed-bed-field .wh { padding: 22px 26px 0; }\n.dz-reed-bed-field h1 { font-family: var(--pv-display); font-weight: 600; font-size: 50px; line-height: 1.1; letter-spacing: -.02em; margin: 6px 0 6px; }\n.dz-reed-bed-field .gr { font-family: var(--pv-mono); font-size: 12.5px; color: var(--muted-foreground); margin: 0 0 8px; }\n.dz-reed-bed-field .lk { color: var(--primary); text-decoration: none; font-size: 14px; border-bottom: 1px solid var(--primary); }\n.dz-reed-bed-field .fm { padding: 24px 26px; }\n.dz-reed-bed-field label { display: block; margin-bottom: 14px; }\n.dz-reed-bed-field input { display: block; width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid var(--border); border-radius: 4px; color: var(--foreground); font: inherit; font-family: var(--pv-mono); font-size: 12.5px; font-size: 15px; padding: 10px 12px; margin-top: 6px; }\n.dz-reed-bed-field input:focus { outline: none; border-color: var(--primary); }\n.dz-reed-bed-field .pri { width: 100%; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 2px; padding: 12px; font: inherit; cursor: pointer; }\n.dz-reed-bed-field .nt { font-size: 13px; line-height: 1.5; color: var(--muted-foreground); margin: 12px 0 0; }\n.dz-reed-bed-field .lv2 { padding: 0 26px 26px; }\n.dz-reed-bed-field .rw { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }\n.dz-reed-bed-field .dt, .dz-reed-bed-field .who { color: var(--muted-foreground); }\n\n.dz-reed-bed-field .lv { display: flex; align-items: center; gap: 10px; }\n.dz-reed-bed-field .tk { position: relative; width: 140px; height: 6px; background: var(--secondary); border-radius: 3px; }\n.dz-reed-bed-field .bd2 { position: absolute; top: 0; bottom: 0; background: color-mix(in oklab, var(--accent) 30%, transparent); border-radius: 3px; }\n.dz-reed-bed-field .mk { position: absolute; top: -4px; width: 3px; height: 14px; background: var(--accent); border-radius: 1px; }\n.dz-reed-bed-field .over .mk { background: var(--destructive); }\n.dz-reed-bed-field .fig { font-family: var(--pv-mono); font-size: 12.5px; }\n.dz-reed-bed-field .over .fig { color: var(--destructive); }\n.dz-reed-bed-field .un { font-size: 13px; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-reed-bed-field *, .dz-reed-bed-field *::before, .dz-reed-bed-field *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/reed-bed.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Petrona:wght@400;500;600;700&family=Asap:wght@400;500;600;700&family=Cousine:wght@400;500;600;700&display=swap"
}