{
  "id": "allotment-shell",
  "name": "Plot Shell",
  "theme": "allotment",
  "category": "App Shell",
  "description": "The working frame where the month band sits above the navigation, not inside it, so every section inherits the same twelve-cell scope.",
  "layout": "A pinned band, a section nav beneath it, a bed sidebar, and a ruled task list ordered by due date with an orchid bar on this month’s items.",
  "modules": [
    {
      "key": "band",
      "name": "Month band",
      "html": "\n<nav class=\"bn\"><span>Jan</span><span>Feb</span><span class=\"on\">Mar</span><span>Apr</span><span>May</span><span>Jun</span><span>Jul</span><span>Aug</span><span>Sep</span><span>Oct</span><span>Nov</span><span>Dec</span></nav>"
    },
    {
      "key": "nav",
      "name": "Section nav",
      "html": "\n<header class=\"nv\"><span class=\"lg\">Allotment</span><nav><a class=\"on\" href=\"#\">Tasks</a><a href=\"#\">Beds</a><a href=\"#\">Seed store</a><a href=\"#\">Journal</a></nav><span class=\"pl mn\">Plot 14 · Kilcarn Lane · 5 rod</span></header>"
    },
    {
      "key": "beds",
      "name": "Bed sidebar",
      "html": "\n<aside class=\"bs\"><span class=\"k\">Beds</span><ul><li class=\"on\"><a href=\"#\">B1 <em>Parsnip, carrot</em></a></li><li><a href=\"#\">B2 <em>Beetroot, chard</em></a></li><li><a href=\"#\">B3 <em>Broad bean</em></a></li><li><a href=\"#\">B4 <em>Leek</em></a></li><li><a href=\"#\">B5 <em>Onion, garlic</em></a></li><li><a href=\"#\">B6 <em>Brassica, netted</em></a></li><li><a href=\"#\">B7 <em>Squash</em></a></li><li class=\"free\"><a href=\"#\">B8 <em>Empty</em></a></li><li class=\"free\"><a href=\"#\">B9 <em>Green manure</em></a></li></ul></aside>"
    },
    {
      "key": "tasks",
      "name": "Task list",
      "html": "\n<section class=\"tk\"><header class=\"th\"><h1>March, plot 14</h1><span class=\"mn\">11 to sow · 4 to plant out · 3 to harvest</span></header>\n<div class=\"rw now\"><span class=\"dt mn\">04 Mar</span><span class=\"ts\">Sow parsnip direct, station sown, three seeds per station</span><span class=\"bd mn\">B1</span></div>\n<div class=\"rw now\"><span class=\"dt mn\">08 Mar</span><span class=\"ts\">Onion sets in, 10 cm apart, netted against birds</span><span class=\"bd mn\">B5</span></div>\n<div class=\"rw now\"><span class=\"dt mn\">12 Mar</span><span class=\"ts\">Chit and plant first early potatoes if the soil is above 7°C</span><span class=\"bd mn\">B8</span></div>\n<div class=\"rw now\"><span class=\"dt mn\">16 Mar</span><span class=\"ts\">Beetroot under fleece, thin at two true leaves</span><span class=\"bd mn\">B2</span></div>\n<div class=\"rw now\"><span class=\"dt mn\">22 Mar</span><span class=\"ts\">Leek seed in a nursery bed, transplant in June</span><span class=\"bd mn\">B4</span></div>\n<div class=\"rw\"><span class=\"dt mn\">03 Apr</span><span class=\"ts\">Sow courgette under cover, two per pot</span><span class=\"bd mn\">B7</span></div>\n<div class=\"rw\"><span class=\"dt mn\">11 Apr</span><span class=\"ts\">Cut the green manure and dig it in a fortnight before planting</span><span class=\"bd mn\">B9</span></div>\n</section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "allotment-shell",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:30:28+09:00",
    "updatedAt": "2026-09-02T01:30:28+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/allotment-shell.json",
  "structure": "A pinned band, a section nav beneath it, a bed sidebar, and a ruled task list ordered by due date with an orchid bar on this month’s items.",
  "html": "<div class=\"dz dz-allotment-shell\" data-design=\"allotment-shell\" data-theme=\"allotment\">\n<section class=\"dz-mod\" data-mod=\"band\" aria-label=\"Month band\">\n<nav class=\"bn\"><span>Jan</span><span>Feb</span><span class=\"on\">Mar</span><span>Apr</span><span>May</span><span>Jun</span><span>Jul</span><span>Aug</span><span>Sep</span><span>Oct</span><span>Nov</span><span>Dec</span></nav></section>\n<section class=\"dz-mod\" data-mod=\"nav\" aria-label=\"Section nav\">\n<header class=\"nv\"><span class=\"lg\">Allotment</span><nav><a class=\"on\" href=\"#\">Tasks</a><a href=\"#\">Beds</a><a href=\"#\">Seed store</a><a href=\"#\">Journal</a></nav><span class=\"pl mn\">Plot 14 · Kilcarn Lane · 5 rod</span></header></section>\n<section class=\"dz-mod\" data-mod=\"beds\" aria-label=\"Bed sidebar\">\n<aside class=\"bs\"><span class=\"k\">Beds</span><ul><li class=\"on\"><a href=\"#\">B1 <em>Parsnip, carrot</em></a></li><li><a href=\"#\">B2 <em>Beetroot, chard</em></a></li><li><a href=\"#\">B3 <em>Broad bean</em></a></li><li><a href=\"#\">B4 <em>Leek</em></a></li><li><a href=\"#\">B5 <em>Onion, garlic</em></a></li><li><a href=\"#\">B6 <em>Brassica, netted</em></a></li><li><a href=\"#\">B7 <em>Squash</em></a></li><li class=\"free\"><a href=\"#\">B8 <em>Empty</em></a></li><li class=\"free\"><a href=\"#\">B9 <em>Green manure</em></a></li></ul></aside></section>\n<section class=\"dz-mod\" data-mod=\"tasks\" aria-label=\"Task list\">\n<section class=\"tk\"><header class=\"th\"><h1>March, plot 14</h1><span class=\"mn\">11 to sow · 4 to plant out · 3 to harvest</span></header>\n<div class=\"rw now\"><span class=\"dt mn\">04 Mar</span><span class=\"ts\">Sow parsnip direct, station sown, three seeds per station</span><span class=\"bd mn\">B1</span></div>\n<div class=\"rw now\"><span class=\"dt mn\">08 Mar</span><span class=\"ts\">Onion sets in, 10 cm apart, netted against birds</span><span class=\"bd mn\">B5</span></div>\n<div class=\"rw now\"><span class=\"dt mn\">12 Mar</span><span class=\"ts\">Chit and plant first early potatoes if the soil is above 7°C</span><span class=\"bd mn\">B8</span></div>\n<div class=\"rw now\"><span class=\"dt mn\">16 Mar</span><span class=\"ts\">Beetroot under fleece, thin at two true leaves</span><span class=\"bd mn\">B2</span></div>\n<div class=\"rw now\"><span class=\"dt mn\">22 Mar</span><span class=\"ts\">Leek seed in a nursery bed, transplant in June</span><span class=\"bd mn\">B4</span></div>\n<div class=\"rw\"><span class=\"dt mn\">03 Apr</span><span class=\"ts\">Sow courgette under cover, two per pot</span><span class=\"bd mn\">B7</span></div>\n<div class=\"rw\"><span class=\"dt mn\">11 Apr</span><span class=\"ts\">Cut the green manure and dig it in a fortnight before planting</span><span class=\"bd mn\">B9</span></div>\n</section></section>\n</div>",
  "css": "\n.dz-allotment-shell { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 0 28px; }\n.dz-allotment-shell .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-allotment-shell .mn { font-family: var(--pv-mono); font-size: 13px; }\n\n.dz-allotment-shell .bn { display: grid; grid-template-columns: repeat(12, 1fr); border-bottom: 1px solid var(--border); margin-bottom: 22px; }\n.dz-allotment-shell .bn span { height: 40px; display: grid; place-items: center; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); border-right: 1px solid var(--border); position: relative; }\n.dz-allotment-shell .bn span:last-child { border-right: 0; }\n.dz-allotment-shell .bn span.on { color: var(--foreground); }\n.dz-allotment-shell .bn span.on::after { content: \"\"; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--accent); }\n.dz-allotment-shell .bn { margin-bottom: 0; }\n.dz-allotment-shell .nv { display: flex; align-items: center; gap: 26px; height: 52px; padding: 0 28px; border-bottom: 1px solid var(--border); }\n.dz-allotment-shell .lg { font-family: var(--pv-display); font-weight: 600; font-size: 19px; }\n.dz-allotment-shell .nv nav { display: flex; gap: 18px; }\n.dz-allotment-shell .nv a { color: var(--muted-foreground); text-decoration: none; font-size: 15px; padding-bottom: 3px; }\n.dz-allotment-shell .nv a.on { color: var(--foreground); border-bottom: 2px solid var(--primary); }\n.dz-allotment-shell .pl { color: var(--muted-foreground); margin-left: auto; }\n.dz-allotment-shell .bd2 { display: grid; }\n.dz-allotment-shell { display: grid; grid-template-columns: 240px 1fr; }\n.dz-allotment-shell .bn, .dz-allotment-shell .nv { grid-column: 1 / -1; }\n.dz-allotment-shell .bs { border-right: 1px solid var(--border); padding: 20px 16px; }\n.dz-allotment-shell .bs ul { list-style: none; margin: 10px 0 0; padding: 0; }\n.dz-allotment-shell .bs a { display: block; padding: 8px; color: var(--foreground); text-decoration: none; font-size: 14.5px; border-radius: 3px; }\n.dz-allotment-shell .bs em { font-style: normal; color: var(--muted-foreground); font-size: 13px; margin-left: 8px; }\n.dz-allotment-shell .bs li.on a { background: var(--secondary); }\n.dz-allotment-shell .bs li.free a { color: var(--muted-foreground); }\n.dz-allotment-shell .tk { padding: 20px 28px; }\n.dz-allotment-shell .th { display: flex; align-items: baseline; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }\n.dz-allotment-shell h1 { font-family: var(--pv-display); font-weight: 600; font-size: 30px; margin: 0; }\n.dz-allotment-shell .th .mn { color: var(--muted-foreground); }\n.dz-allotment-shell .rw { display: grid; grid-template-columns: 72px 1fr 50px; gap: 20px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--border); }\n.dz-allotment-shell .rw.now { border-left: 4px solid var(--accent); padding-left: 10px; margin-left: -14px; }\n.dz-allotment-shell .dt { color: var(--muted-foreground); }\n.dz-allotment-shell .ts { font-size: 15px; }\n.dz-allotment-shell .bd { font-family: var(--pv-mono); font-size: 13px; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-allotment-shell *, .dz-allotment-shell *::before, .dz-allotment-shell *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/allotment.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Vollkorn:wght@400;500;600;700&family=Gantari:wght@400;500;600;700&family=Lekton:wght@400;500;600;700&display=swap"
}