{
  "id": "moss-atlas-survey",
  "name": "Survey Dashboard",
  "theme": "moss-atlas",
  "category": "Dashboard",
  "description": "A field-survey overview where the map is the page and the records are a column that never covers it, with the amber marking only the site you are on.",
  "layout": "A 7:5 split where the map plate bleeds to the top, left and bottom edges of the viewport and the record column floats over the green with a hairline border.",
  "modules": [
    {
      "key": "map",
      "name": "Map plate",
      "html": "\n<figure class=\"mp\"><img src=\"{{ART ridge}}\" alt=\"{{ARTALT ridge}}\">\n<div class=\"pins\"><i class=\"p1\"></i><i class=\"p2\"></i><i class=\"p3 on\"></i><i class=\"p4\"></i><i class=\"p5\"></i></div>\n<figcaption><span class=\"k\">Catchment</span><b>Hollin Beck, upper</b><span class=\"c\">54.0412 N · 2.1188 W</span></figcaption></figure>"
    },
    {
      "key": "stats",
      "name": "Season figures",
      "html": "\n<section class=\"st\">\n  <div><span class=\"k\">Sites visited</span><b>38<i>/42</i></b></div>\n  <div><span class=\"k\">Species logged</span><b>214</b></div>\n  <div><span class=\"k\">Days in field</span><b>61</b></div>\n  <div class=\"hi\"><span class=\"k\">Awaiting write-up</span><b>4</b></div>\n</section>"
    },
    {
      "key": "records",
      "name": "Recent records",
      "html": "\n<section class=\"rc\"><h2 class=\"k\">Recent records</h2>\n<ol>\n  <li class=\"on\"><b>Site 14 · Hollin Beck</b><span class=\"m\">4 Sep · 09:12 · 412 m</span><span class=\"sp\">Sphagnum capillifolium, abundant</span></li>\n  <li><b>Site 13 · Fell Gate</b><span class=\"m\">3 Sep · 14:40 · 388 m</span><span class=\"sp\">Racomitrium lanuginosum, frequent</span></li>\n  <li><b>Site 12 · Long Rigg</b><span class=\"m\">2 Sep · 11:02 · 441 m</span><span class=\"sp\">Cladonia portentosa, occasional</span></li>\n  <li><b>Site 11 · Marsh Head</b><span class=\"m\">31 Aug · 08:55 · 302 m</span><span class=\"sp\">Polytrichum commune, dominant</span></li>\n  <li><b>Site 10 · Crag Foot</b><span class=\"m\">29 Aug · 16:20 · 274 m</span><span class=\"sp\">Hylocomium splendens, frequent</span></li>\n</ol></section>"
    },
    {
      "key": "weather",
      "name": "Conditions",
      "html": "\n<aside class=\"wx\"><span class=\"k\">Conditions at Site 14</span>\n<dl><div><dt>Air</dt><dd>11.4 <i>°C</i></dd></div><div><dt>Humidity</dt><dd>92 <i>%</i></dd></div><div><dt>Rain, 24h</dt><dd>14.2 <i>mm</i></dd></div><div><dt>Wind</dt><dd>SW 8 <i>kn</i></dd></div></dl>\n<button type=\"button\" class=\"go\">Start a record</button></aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "moss-atlas-survey",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T20:03:43+09:00",
    "updatedAt": "2026-09-01T20:03:43+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/moss-atlas-survey.json",
  "structure": "A 7:5 split where the map plate bleeds to the top, left and bottom edges of the viewport and the record column floats over the green with a hairline border.",
  "html": "<div class=\"dz dz-moss-atlas-survey\" data-design=\"moss-atlas-survey\" data-theme=\"moss-atlas\">\n<section class=\"dz-mod\" data-mod=\"map\" aria-label=\"Map plate\">\n<figure class=\"mp\"><img src=\"https://designlookbook.dev/assets/img/moss-atlas-ridge.webp\" alt=\"A green ridge line under low amber evening light\">\n<div class=\"pins\"><i class=\"p1\"></i><i class=\"p2\"></i><i class=\"p3 on\"></i><i class=\"p4\"></i><i class=\"p5\"></i></div>\n<figcaption><span class=\"k\">Catchment</span><b>Hollin Beck, upper</b><span class=\"c\">54.0412 N · 2.1188 W</span></figcaption></figure></section><section class=\"dz-mod\" data-mod=\"stats\" aria-label=\"Season figures\">\n<section class=\"st\">\n  <div><span class=\"k\">Sites visited</span><b>38<i>/42</i></b></div>\n  <div><span class=\"k\">Species logged</span><b>214</b></div>\n  <div><span class=\"k\">Days in field</span><b>61</b></div>\n  <div class=\"hi\"><span class=\"k\">Awaiting write-up</span><b>4</b></div>\n</section></section><section class=\"dz-mod\" data-mod=\"records\" aria-label=\"Recent records\">\n<section class=\"rc\"><h2 class=\"k\">Recent records</h2>\n<ol>\n  <li class=\"on\"><b>Site 14 · Hollin Beck</b><span class=\"m\">4 Sep · 09:12 · 412 m</span><span class=\"sp\">Sphagnum capillifolium, abundant</span></li>\n  <li><b>Site 13 · Fell Gate</b><span class=\"m\">3 Sep · 14:40 · 388 m</span><span class=\"sp\">Racomitrium lanuginosum, frequent</span></li>\n  <li><b>Site 12 · Long Rigg</b><span class=\"m\">2 Sep · 11:02 · 441 m</span><span class=\"sp\">Cladonia portentosa, occasional</span></li>\n  <li><b>Site 11 · Marsh Head</b><span class=\"m\">31 Aug · 08:55 · 302 m</span><span class=\"sp\">Polytrichum commune, dominant</span></li>\n  <li><b>Site 10 · Crag Foot</b><span class=\"m\">29 Aug · 16:20 · 274 m</span><span class=\"sp\">Hylocomium splendens, frequent</span></li>\n</ol></section></section><section class=\"dz-mod\" data-mod=\"weather\" aria-label=\"Conditions\">\n<aside class=\"wx\"><span class=\"k\">Conditions at Site 14</span>\n<dl><div><dt>Air</dt><dd>11.4 <i>°C</i></dd></div><div><dt>Humidity</dt><dd>92 <i>%</i></dd></div><div><dt>Rain, 24h</dt><dd>14.2 <i>mm</i></dd></div><div><dt>Wind</dt><dd>SW 8 <i>kn</i></dd></div></dl>\n<button type=\"button\" class=\"go\">Start a record</button></aside></section>\n</div>",
  "css": "\n.dz-moss-atlas-survey { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 7fr 5fr; column-gap: 26px; padding: 0 30px 26px 0; align-content: start; }\n.dz-moss-atlas-survey .mp { grid-row: 1 / 4; margin: 0; position: relative; }\n.dz-moss-atlas-survey .mp img { width: 100%; height: 100%; min-height: 500px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-moss-atlas-survey .pins { position: absolute; inset: 0; }\n.dz-moss-atlas-survey .pins i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--card); display: block; }\n.dz-moss-atlas-survey .p1 { left: 22%; top: 30% } .dz-moss-atlas-survey .p2 { left: 44%; top: 52% } .dz-moss-atlas-survey .p3 { left: 61%; top: 38% } .dz-moss-atlas-survey .p4 { left: 34%; top: 71% } .dz-moss-atlas-survey .p5 { left: 74%; top: 62% }\n.dz-moss-atlas-survey .p3.on { background: var(--primary); width: 18px; height: 18px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 30%, transparent); }\n.dz-moss-atlas-survey .mp figcaption { position: absolute; left: 22px; bottom: 22px; background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; }\n.dz-moss-atlas-survey .k { font-size: 11.5px; color: var(--muted-foreground); }\n.dz-moss-atlas-survey .mp b { font-family: var(--pv-display); font-size: 21px; font-weight: 600; }\n.dz-moss-atlas-survey .c { font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 12px; color: var(--muted-foreground); }\n.dz-moss-atlas-survey .st { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 26px 0 20px; }\n.dz-moss-atlas-survey .st div { background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); padding: 13px 16px; display: flex; flex-direction: column; gap: 4px; }\n.dz-moss-atlas-survey .hi { border-left: 3px solid var(--primary); }\n.dz-moss-atlas-survey .st b { font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 28px; font-weight: 500; }\n.dz-moss-atlas-survey .st b i { font-size: 14px; font-style: normal; color: var(--muted-foreground); }\n.dz-moss-atlas-survey .rc h2 { margin: 0 0 10px; }\n.dz-moss-atlas-survey .rc ol { list-style: none; margin: 0; padding: 0; }\n.dz-moss-atlas-survey .rc li { padding: 11px 0 11px 14px; border-bottom: var(--pv-bw) solid var(--border); border-left: 3px solid transparent; display: flex; flex-direction: column; gap: 3px; transition: border-color var(--dur) var(--ease); }\n.dz-moss-atlas-survey .rc li:hover { border-left-color: var(--border); }\n.dz-moss-atlas-survey .rc .on { border-left-color: var(--primary); }\n.dz-moss-atlas-survey .rc b { font-family: var(--pv-display); font-size: 16.5px; font-weight: 600; }\n.dz-moss-atlas-survey .m { font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 11.5px; color: var(--muted-foreground); }\n.dz-moss-atlas-survey .sp { font-size: 13.5px; font-style: italic; color: var(--muted-foreground); }\n.dz-moss-atlas-survey .wx { background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); padding: 16px 18px; margin-top: 20px; }\n.dz-moss-atlas-survey .wx dl { margin: 10px 0 16px; }\n.dz-moss-atlas-survey .wx dl div { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-moss-atlas-survey .wx dt { font-size: 13.5px; color: var(--muted-foreground); }\n.dz-moss-atlas-survey .wx dd { margin: 0; font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 15px; }\n.dz-moss-atlas-survey .wx dd i { font-size: 11.5px; font-style: normal; color: var(--muted-foreground); }\n.dz-moss-atlas-survey .go { font: inherit; font-size: 14.5px; width: 100%; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: var(--pv-radius-md); padding: 12px; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-moss-atlas-survey *, .dz-moss-atlas-survey *::before, .dz-moss-atlas-survey *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/moss-atlas.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;600;700&family=Alegreya+Sans:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600;700&display=swap"
}