{
  "id": "seed-index-order",
  "name": "Order Form",
  "theme": "seed-index",
  "category": "Search & Browse",
  "description": "The same catalogue at row density, which is what a grower actually wants in February when they already know the names and only need the quantities.",
  "layout": "A single-column list of 56px rows with a 40px square thumbnail, sowing months as a 12-cell strip, and the stepper right-aligned.",
  "modules": [
    {
      "key": "head",
      "name": "Order head",
      "html": "\n<header class=\"oh\"><div><h1>Order form</h1><p>All 42 varieties, sorted by sowing month. Type to filter.</p></div><label class=\"q\"><input type=\"search\" placeholder=\"Filter by name or Latin\"></label><div class=\"seg\"><button type=\"button\">Grid</button><button type=\"button\" class=\"on\">Rows</button></div></header>"
    },
    {
      "key": "legend",
      "name": "Month legend",
      "html": "\n<div class=\"lg\"><span class=\"lb sp\">Variety</span><span class=\"lb\">Price</span><ul class=\"mo hd\"><li>J</li><li>F</li><li>M</li><li>A</li><li>M</li><li>J</li><li>J</li><li>A</li><li>S</li><li>O</li><li>N</li><li>D</li></ul><span class=\"lb r\">Qty</span></div>"
    },
    {
      "key": "rows",
      "name": "Order rows",
      "html": "\n<ol class=\"or\">\n  <li><img src=\"{{ART seeds}}\" alt=\"{{ARTALT seeds}}\"><div class=\"nm\"><b>Rocket, Wild</b><i>Diplotaxis tenuifolia</i></div><span class=\"pr\">£2.40</span><ul class=\"mo\"><li></li><li></li><li class=\"y\"></li><li class=\"y\"></li><li class=\"y\"></li><li></li><li></li><li class=\"y\"></li><li class=\"y\"></li><li></li><li></li><li></li></ul><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">2</span><button type=\"button\">+</button></div></li>\n  <li><img src=\"{{ART sprout}}\" alt=\"{{ARTALT sprout}}\"><div class=\"nm\"><b>Lettuce, Merveille</b><i>Lactuca sativa</i></div><span class=\"pr\">£2.10</span><ul class=\"mo\"><li></li><li></li><li class=\"y\"></li><li class=\"y\"></li><li></li><li></li><li></li><li class=\"y\"></li><li class=\"y\"></li><li></li><li></li><li></li></ul><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">0</span><button type=\"button\">+</button></div></li>\n  <li><img src=\"{{ART crate}}\" alt=\"{{ARTALT crate}}\"><div class=\"nm\"><b>Mizuna, Green</b><i>Brassica rapa</i></div><span class=\"pr\">£1.90</span><ul class=\"mo\"><li></li><li></li><li class=\"y\"></li><li class=\"y\"></li><li class=\"y\"></li><li class=\"y\"></li><li class=\"y\"></li><li class=\"y\"></li><li class=\"y\"></li><li class=\"y\"></li><li></li><li></li></ul><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">1</span><button type=\"button\">+</button></div></li>\n  <li class=\"out\"><img src=\"{{ART packet}}\" alt=\"{{ARTALT packet}}\"><div class=\"nm\"><b>Chicory, Castelfranco</b><i>Cichorium intybus</i></div><span class=\"pr\">£3.20</span><ul class=\"mo\"><li></li><li></li><li></li><li></li><li></li><li></li><li class=\"y\"></li><li></li><li></li><li></li><li></li><li></li></ul><span class=\"so\">August</span></li>\n  <li><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><div class=\"nm\"><b>Corn Salad</b><i>Valerianella locusta</i></div><span class=\"pr\">£1.95</span><ul class=\"mo\"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li class=\"y\"></li><li class=\"y\"></li><li class=\"y\"></li><li></li><li></li></ul><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">3</span><button type=\"button\">+</button></div></li>\n</ol>"
    },
    {
      "key": "tot",
      "name": "Totals",
      "html": "\n<footer class=\"tt\"><span>6 packets</span><span class=\"mn\">£13.15</span><button type=\"button\" class=\"buy\">Review order</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "seed-index-order",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T00:18:22+09:00",
    "updatedAt": "2026-09-02T00:18:22+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/seed-index-order.json",
  "structure": "A single-column list of 56px rows with a 40px square thumbnail, sowing months as a 12-cell strip, and the stepper right-aligned.",
  "html": "<div class=\"dz dz-seed-index-order\" data-design=\"seed-index-order\" data-theme=\"seed-index\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Order head\">\n<header class=\"oh\"><div><h1>Order form</h1><p>All 42 varieties, sorted by sowing month. Type to filter.</p></div><label class=\"q\"><input type=\"search\" placeholder=\"Filter by name or Latin\"></label><div class=\"seg\"><button type=\"button\">Grid</button><button type=\"button\" class=\"on\">Rows</button></div></header></section>\n<section class=\"dz-mod\" data-mod=\"legend\" aria-label=\"Month legend\">\n<div class=\"lg\"><span class=\"lb sp\">Variety</span><span class=\"lb\">Price</span><ul class=\"mo hd\"><li>J</li><li>F</li><li>M</li><li>A</li><li>M</li><li>J</li><li>J</li><li>A</li><li>S</li><li>O</li><li>N</li><li>D</li></ul><span class=\"lb r\">Qty</span></div></section>\n<section class=\"dz-mod\" data-mod=\"rows\" aria-label=\"Order rows\">\n<ol class=\"or\">\n  <li><img src=\"https://designlookbook.dev/assets/img/seed-index-seeds.webp\" alt=\"Assorted seeds arranged in a grid on pale paper\"><div class=\"nm\"><b>Rocket, Wild</b><i>Diplotaxis tenuifolia</i></div><span class=\"pr\">£2.40</span><ul class=\"mo\"><li></li><li></li><li class=\"y\"></li><li class=\"y\"></li><li class=\"y\"></li><li></li><li></li><li class=\"y\"></li><li class=\"y\"></li><li></li><li></li><li></li></ul><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">2</span><button type=\"button\">+</button></div></li>\n  <li><img src=\"https://designlookbook.dev/assets/img/seed-index-sprout.webp\" alt=\"A single sprout emerging from pale soil\"><div class=\"nm\"><b>Lettuce, Merveille</b><i>Lactuca sativa</i></div><span class=\"pr\">£2.10</span><ul class=\"mo\"><li></li><li></li><li class=\"y\"></li><li class=\"y\"></li><li></li><li></li><li></li><li class=\"y\"></li><li class=\"y\"></li><li></li><li></li><li></li></ul><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">0</span><button type=\"button\">+</button></div></li>\n  <li><img src=\"https://designlookbook.dev/assets/img/seed-index-crate.webp\" alt=\"A shallow crate of leafy produce shot from above\"><div class=\"nm\"><b>Mizuna, Green</b><i>Brassica rapa</i></div><span class=\"pr\">£1.90</span><ul class=\"mo\"><li></li><li></li><li class=\"y\"></li><li class=\"y\"></li><li class=\"y\"></li><li class=\"y\"></li><li class=\"y\"></li><li class=\"y\"></li><li class=\"y\"></li><li class=\"y\"></li><li></li><li></li></ul><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">1</span><button type=\"button\">+</button></div></li>\n  <li class=\"out\"><img src=\"https://designlookbook.dev/assets/img/seed-index-packet.webp\" alt=\"A plain paper seed packet standing against a mint wall\"><div class=\"nm\"><b>Chicory, Castelfranco</b><i>Cichorium intybus</i></div><span class=\"pr\">£3.20</span><ul class=\"mo\"><li></li><li></li><li></li><li></li><li></li><li></li><li class=\"y\"></li><li></li><li></li><li></li><li></li><li></li></ul><span class=\"so\">August</span></li>\n  <li><img src=\"https://designlookbook.dev/assets/img/seed-index-hero.webp\" alt=\"Seedlings in paper pots on a pale bench\"><div class=\"nm\"><b>Corn Salad</b><i>Valerianella locusta</i></div><span class=\"pr\">£1.95</span><ul class=\"mo\"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li class=\"y\"></li><li class=\"y\"></li><li class=\"y\"></li><li></li><li></li></ul><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">3</span><button type=\"button\">+</button></div></li>\n</ol></section>\n<section class=\"dz-mod\" data-mod=\"tot\" aria-label=\"Totals\">\n<footer class=\"tt\"><span>6 packets</span><span class=\"mn\">£13.15</span><button type=\"button\" class=\"buy\">Review order</button></footer></section>\n</div>",
  "css": "\n.dz-seed-index-order { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 26px 30px 30px; max-width: 1080px; margin: 0 auto; }\n.dz-seed-index-order .oh { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; }\n.dz-seed-index-order h1 { font-family: var(--pv-display); font-size: 28px; font-weight: 700; margin: 0 0 4px; }\n.dz-seed-index-order .oh p { margin: 0; font-size: 13px; color: var(--muted-foreground); }\n.dz-seed-index-order .q { margin-left: auto; }\n.dz-seed-index-order .q input { font: inherit; font-size: 13px; padding: 9px 16px; border-radius: 9999px; border: 0; background: var(--secondary); color: var(--foreground); width: 240px; }\n.dz-seed-index-order .seg { display: flex; background: var(--secondary); border-radius: 9999px; padding: 3px; }\n.dz-seed-index-order .seg button { font: inherit; font-size: 13px; padding: 7px 16px; border: 0; background: transparent; color: var(--muted-foreground); border-radius: 9999px; cursor: pointer; }\n.dz-seed-index-order .seg button.on { background: var(--card); color: var(--foreground); box-shadow: 0 6px 20px -8px color-mix(in oklab, var(--foreground) 22%, transparent); }\n.dz-seed-index-order .lg { display: grid; grid-template-columns: 40px 1fr 60px 156px 106px; gap: 14px; align-items: end; padding: 0 14px 8px; }\n.dz-seed-index-order .lb { font-family: var(--pv-mono); font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); }\n.dz-seed-index-order .lb.sp { grid-column: 2; }\n.dz-seed-index-order .lb.r { grid-column: 5; text-align: center; }\n/* The header letters sit in the same 12-cell track as every row's month strip,\n   so a column of green blocks can be read straight up to its month. */\n.dz-seed-index-order .mo.hd { grid-column: 4; }\n.dz-seed-index-order .mo.hd li { height: auto; background: none; font-family: var(--pv-mono); font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); text-align: center; }\n.dz-seed-index-order .or { list-style: none; margin: 0; padding: 0; }\n.dz-seed-index-order .or li { display: grid; grid-template-columns: 40px 1fr 60px 156px 106px; gap: 14px; align-items: center; background: var(--card); border-radius: var(--pv-radius); padding: 8px 14px; margin-bottom: 8px; box-shadow: 0 6px 20px -8px color-mix(in oklab, var(--foreground) 22%, transparent); }\n.dz-seed-index-order .or img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--pv-radius-sm); display: block; filter: var(--img-filter); }\n.dz-seed-index-order .nm b { display: block; font-size: 14.5px; font-weight: 700; }\n.dz-seed-index-order .nm i { font-family: var(--pv-mono); font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); font-style: normal; }\n.dz-seed-index-order .pr { font-family: var(--pv-mono); font-size: 13.5px; }\n.dz-seed-index-order .mo { list-style: none; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin: 0; padding: 0; }\n.dz-seed-index-order .mo li { height: 16px; background: var(--secondary); border-radius: 2px; }\n.dz-seed-index-order .mo li.y { background: var(--primary); }\n.dz-seed-index-order .st { display: flex; align-items: center; gap: 2px; background: var(--secondary); border-radius: 9999px; padding: 3px; justify-self: end; }\n.dz-seed-index-order .st button { width: 26px; height: 26px; border-radius: 9999px; border: 0; background: var(--card); color: var(--foreground); font: inherit; font-size: 15px; cursor: pointer; line-height: 1; }\n.dz-seed-index-order .qt { font-family: var(--pv-mono); font-size: 12.5px; font-weight: 500; width: 22px; text-align: center; }\n.dz-seed-index-order .so { font-family: var(--pv-mono); font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); justify-self: end; }\n.dz-seed-index-order .out { opacity: .7; }\n.dz-seed-index-order .tt { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding: 14px 20px; }\n.dz-seed-index-order .mn { font-family: var(--pv-mono); font-size: 17px; margin-right: auto; }\n.dz-seed-index-order .buy { background: var(--accent); color: var(--accent-foreground); border: 0; padding: 13px 26px; border-radius: 9999px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }\n",
  "requiredTheme": "/api/v1/themes/seed-index.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Bitter:wght@400;500;600;700&family=Mulish:wght@400;500;600;700&family=Sometype+Mono:wght@400;500;600;700&display=swap"
}