{
  "id": "allotment-front",
  "name": "By the Year",
  "theme": "allotment",
  "category": "Landing",
  "description": "A landing page whose hero is the month band itself, made large, with the current month marked in orchid and the product argument written underneath it.",
  "layout": "An oversized twelve-cell band as the hero element, a warm photograph beneath, then three ruled promises about seasonal rather than alphabetical order.",
  "modules": [
    {
      "key": "hero",
      "name": "Band hero",
      "html": "\n<header class=\"hr\"><span class=\"k\">Allotment · a planner for the growing year</span><h1>The year is the navigation</h1><nav class=\"bn big\"><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><p>This strip is pinned to the top of every screen in the application. It is not a filter you open — it is the frame everything else is scoped to, and the orchid bar is always under the month you are in.</p><button class=\"pri\">Start a plot</button></header>"
    },
    {
      "key": "photo",
      "name": "Bed photograph",
      "html": "\n<figure class=\"fb\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure>"
    },
    {
      "key": "promises",
      "name": "Three promises",
      "html": "\n<section class=\"pm\"><article><h2>Nothing is sorted alphabetically</h2><p>Seed lists, task lists and crop lists all sort by season. An alphabetical seed catalogue is a catalogue for a warehouse.</p></article><article><h2>The same twelve cells, everywhere</h2><p>The band, the sowing chart and the packet mini-chart are one component at three sizes, so a packet can be read against the year without translation.</p></article><article><h2>Orchid means now</h2><p>One colour, one meaning. It marks the current month, the active band and anything due this week, and it is used for nothing else in the entire system.</p></article></section>"
    },
    {
      "key": "end",
      "name": "Closing band",
      "html": "\n<footer class=\"en\"><img src=\"{{ART seedlings}}\" alt=\"{{ARTALT seedlings}}\"><div><h2>Nine beds, five rod, one strip along the top</h2><button class=\"pri\">Start a plot</button></div></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "allotment-front",
    "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-front.json",
  "structure": "An oversized twelve-cell band as the hero element, a warm photograph beneath, then three ruled promises about seasonal rather than alphabetical order.",
  "html": "<div class=\"dz dz-allotment-front\" data-design=\"allotment-front\" data-theme=\"allotment\">\n<section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Band hero\">\n<header class=\"hr\"><span class=\"k\">Allotment · a planner for the growing year</span><h1>The year is the navigation</h1><nav class=\"bn big\"><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><p>This strip is pinned to the top of every screen in the application. It is not a filter you open — it is the frame everything else is scoped to, and the orchid bar is always under the month you are in.</p><button class=\"pri\">Start a plot</button></header></section>\n<section class=\"dz-mod\" data-mod=\"photo\" aria-label=\"Bed photograph\">\n<figure class=\"fb\"><img src=\"https://designlookbook.dev/assets/img/allotment-hero.webp\" alt=\"Raised beds on an allotment in soft afternoon light\"></figure></section>\n<section class=\"dz-mod\" data-mod=\"promises\" aria-label=\"Three promises\">\n<section class=\"pm\"><article><h2>Nothing is sorted alphabetically</h2><p>Seed lists, task lists and crop lists all sort by season. An alphabetical seed catalogue is a catalogue for a warehouse.</p></article><article><h2>The same twelve cells, everywhere</h2><p>The band, the sowing chart and the packet mini-chart are one component at three sizes, so a packet can be read against the year without translation.</p></article><article><h2>Orchid means now</h2><p>One colour, one meaning. It marks the current month, the active band and anything due this week, and it is used for nothing else in the entire system.</p></article></section></section>\n<section class=\"dz-mod\" data-mod=\"end\" aria-label=\"Closing band\">\n<footer class=\"en\"><img src=\"https://designlookbook.dev/assets/img/allotment-seedlings.webp\" alt=\"Seedlings in module trays on a bench\"><div><h2>Nine beds, five rod, one strip along the top</h2><button class=\"pri\">Start a plot</button></div></footer></section>\n</div>",
  "css": "\n.dz-allotment-front { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-allotment-front .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-allotment-front .hr { padding: 44px 28px 32px; }\n.dz-allotment-front h1 { font-family: var(--pv-display); font-weight: 600; font-size: 52px; line-height: 1.08; letter-spacing: -.02em; margin: 8px 0 24px; }\n\n.dz-allotment-front .bn { display: grid; grid-template-columns: repeat(12, 1fr); border-bottom: 1px solid var(--border); margin-bottom: 22px; }\n.dz-allotment-front .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-front .bn span:last-child { border-right: 0; }\n.dz-allotment-front .bn span.on { color: var(--foreground); }\n.dz-allotment-front .bn span.on::after { content: \"\"; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--accent); }\n.dz-allotment-front .big span { height: 68px; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; font-size: 13px; }\n.dz-allotment-front .big span.on::after { height: 6px; }\n.dz-allotment-front .hr p { margin: 0 0 22px; font-size: 16.5px; line-height: 1.64; color: var(--muted-foreground); max-width: 62ch; }\n.dz-allotment-front .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 3px; padding: 12px 22px; font: inherit; font-size: 15px; cursor: pointer; }\n.dz-allotment-front .fb { margin: 0; }\n.dz-allotment-front .fb img { width: 100%; height: 360px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-allotment-front .pm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 32px 28px; }\n.dz-allotment-front .pm article { border-top: 2px solid var(--primary); padding-top: 14px; }\n.dz-allotment-front h2 { font-family: var(--pv-display); font-weight: 600; font-size: 19px; margin: 0 0 8px; }\n.dz-allotment-front .pm p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--muted-foreground); }\n.dz-allotment-front .en { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 0 28px 44px; }\n.dz-allotment-front .en img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 7px; filter: var(--img-filter); }\n.dz-allotment-front .en h2 { font-family: var(--pv-display); font-weight: 600; font-size: 30px; margin-bottom: 20px; }\n@media (prefers-reduced-motion: reduce) { .dz-allotment-front *, .dz-allotment-front *::before, .dz-allotment-front *::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"
}