{
  "id": "seed-index-catalogue",
  "name": "Catalogue Grid",
  "theme": "seed-index",
  "category": "Commerce",
  "description": "The main catalogue with a density toggle that turns the same items from browsing cards into an order form without a second layout or a page load.",
  "layout": "A 4-up card grid at 1300px with a pill density toggle in the header; every card carries a stepper rather than an add button.",
  "modules": [
    {
      "key": "bar",
      "name": "Catalogue bar",
      "html": "\n<header class=\"cb\"><div><h1>Salad and leaf</h1><p>42 varieties · sowing from March under cover</p></div>\n<div class=\"ctl\"><div class=\"seg\"><button type=\"button\" class=\"on\">Grid</button><button type=\"button\">Rows</button></div><select><option>Sort: sowing month</option><option>Sort: name</option><option>Sort: days to crop</option></select></div></header>"
    },
    {
      "key": "grid",
      "name": "Item grid",
      "html": "\n<section class=\"ig\">\n  <article><img src=\"{{ART seeds}}\" alt=\"{{ARTALT seeds}}\"><h3>Rocket, Wild</h3><p class=\"lt\">Diplotaxis tenuifolia</p><p class=\"ds\">Peppery, slow to bolt, cuts four times from one sowing.</p><div class=\"rw\"><span class=\"pr\">£2.40</span><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">2</span><button type=\"button\">+</button></div></div></article>\n  <article><img src=\"{{ART sprout}}\" alt=\"{{ARTALT sprout}}\"><h3>Lettuce, Merveille</h3><p class=\"lt\">Lactuca sativa</p><p class=\"ds\">Butterhead for spring and autumn. Poor in high summer.</p><div class=\"rw\"><span class=\"pr\">£2.10</span><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">0</span><button type=\"button\">+</button></div></div></article>\n  <article><img src=\"{{ART crate}}\" alt=\"{{ARTALT crate}}\"><h3>Mizuna, Green</h3><p class=\"lt\">Brassica rapa</p><p class=\"ds\">Fast, hardy, tolerates a cold frame all winter.</p><div class=\"rw\"><span class=\"pr\">£1.90</span><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">1</span><button type=\"button\">+</button></div></div></article>\n  <article class=\"out\"><img src=\"{{ART packet}}\" alt=\"{{ARTALT packet}}\"><h3>Chicory, Castelfranco</h3><p class=\"lt\">Cichorium intybus</p><p class=\"ds\">Speckled heads after frost. Sow July, not before.</p><div class=\"rw\"><span class=\"pr\">£3.20</span><span class=\"so\">Back in August</span></div></article>\n  <article><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><h3>Sorrel, Broad-leaved</h3><p class=\"lt\">Rumex acetosa</p><p class=\"ds\">Perennial. One sowing lasts about six years.</p><div class=\"rw\"><span class=\"pr\">£2.60</span><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">0</span><button type=\"button\">+</button></div></div></article>\n  <article><img src=\"{{ART seeds}}\" alt=\"{{ARTALT seeds}}\"><h3>Claytonia</h3><p class=\"lt\">Claytonia perfoliata</p><p class=\"ds\">Winter purslane. Germinates in the cold, self-seeds freely.</p><div class=\"rw\"><span class=\"pr\">£2.00</span><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">0</span><button type=\"button\">+</button></div></div></article>\n  <article><img src=\"{{ART sprout}}\" alt=\"{{ARTALT sprout}}\"><h3>Mustard, Red Frills</h3><p class=\"lt\">Brassica juncea</p><p class=\"ds\">Hot when mature, mild as a baby leaf.</p><div class=\"rw\"><span class=\"pr\">£1.80</span><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">0</span><button type=\"button\">+</button></div></div></article>\n  <article><img src=\"{{ART crate}}\" alt=\"{{ARTALT crate}}\"><h3>Corn Salad</h3><p class=\"lt\">Valerianella locusta</p><p class=\"ds\">Lamb's lettuce. The most reliable thing in a cold winter.</p><div class=\"rw\"><span class=\"pr\">£1.95</span><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">3</span><button type=\"button\">+</button></div></div></article>\n</section>"
    },
    {
      "key": "tray",
      "name": "Order tray",
      "html": "\n<footer class=\"tr\"><span class=\"mn\">6 packets · £13.15</span><span class=\"fr\">Free postage over £15 — one more packet does it.</span><button type=\"button\" class=\"buy\">Review order</button></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "seed-index-catalogue",
    "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-catalogue.json",
  "structure": "A 4-up card grid at 1300px with a pill density toggle in the header; every card carries a stepper rather than an add button.",
  "html": "<div class=\"dz dz-seed-index-catalogue\" data-design=\"seed-index-catalogue\" data-theme=\"seed-index\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Catalogue bar\">\n<header class=\"cb\"><div><h1>Salad and leaf</h1><p>42 varieties · sowing from March under cover</p></div>\n<div class=\"ctl\"><div class=\"seg\"><button type=\"button\" class=\"on\">Grid</button><button type=\"button\">Rows</button></div><select><option>Sort: sowing month</option><option>Sort: name</option><option>Sort: days to crop</option></select></div></header></section>\n<section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Item grid\">\n<section class=\"ig\">\n  <article><img src=\"https://designlookbook.dev/assets/img/seed-index-seeds.webp\" alt=\"Assorted seeds arranged in a grid on pale paper\"><h3>Rocket, Wild</h3><p class=\"lt\">Diplotaxis tenuifolia</p><p class=\"ds\">Peppery, slow to bolt, cuts four times from one sowing.</p><div class=\"rw\"><span class=\"pr\">£2.40</span><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">2</span><button type=\"button\">+</button></div></div></article>\n  <article><img src=\"https://designlookbook.dev/assets/img/seed-index-sprout.webp\" alt=\"A single sprout emerging from pale soil\"><h3>Lettuce, Merveille</h3><p class=\"lt\">Lactuca sativa</p><p class=\"ds\">Butterhead for spring and autumn. Poor in high summer.</p><div class=\"rw\"><span class=\"pr\">£2.10</span><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">0</span><button type=\"button\">+</button></div></div></article>\n  <article><img src=\"https://designlookbook.dev/assets/img/seed-index-crate.webp\" alt=\"A shallow crate of leafy produce shot from above\"><h3>Mizuna, Green</h3><p class=\"lt\">Brassica rapa</p><p class=\"ds\">Fast, hardy, tolerates a cold frame all winter.</p><div class=\"rw\"><span class=\"pr\">£1.90</span><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">1</span><button type=\"button\">+</button></div></div></article>\n  <article class=\"out\"><img src=\"https://designlookbook.dev/assets/img/seed-index-packet.webp\" alt=\"A plain paper seed packet standing against a mint wall\"><h3>Chicory, Castelfranco</h3><p class=\"lt\">Cichorium intybus</p><p class=\"ds\">Speckled heads after frost. Sow July, not before.</p><div class=\"rw\"><span class=\"pr\">£3.20</span><span class=\"so\">Back in August</span></div></article>\n  <article><img src=\"https://designlookbook.dev/assets/img/seed-index-hero.webp\" alt=\"Seedlings in paper pots on a pale bench\"><h3>Sorrel, Broad-leaved</h3><p class=\"lt\">Rumex acetosa</p><p class=\"ds\">Perennial. One sowing lasts about six years.</p><div class=\"rw\"><span class=\"pr\">£2.60</span><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">0</span><button type=\"button\">+</button></div></div></article>\n  <article><img src=\"https://designlookbook.dev/assets/img/seed-index-seeds.webp\" alt=\"Assorted seeds arranged in a grid on pale paper\"><h3>Claytonia</h3><p class=\"lt\">Claytonia perfoliata</p><p class=\"ds\">Winter purslane. Germinates in the cold, self-seeds freely.</p><div class=\"rw\"><span class=\"pr\">£2.00</span><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">0</span><button type=\"button\">+</button></div></div></article>\n  <article><img src=\"https://designlookbook.dev/assets/img/seed-index-sprout.webp\" alt=\"A single sprout emerging from pale soil\"><h3>Mustard, Red Frills</h3><p class=\"lt\">Brassica juncea</p><p class=\"ds\">Hot when mature, mild as a baby leaf.</p><div class=\"rw\"><span class=\"pr\">£1.80</span><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">0</span><button type=\"button\">+</button></div></div></article>\n  <article><img src=\"https://designlookbook.dev/assets/img/seed-index-crate.webp\" alt=\"A shallow crate of leafy produce shot from above\"><h3>Corn Salad</h3><p class=\"lt\">Valerianella locusta</p><p class=\"ds\">Lamb's lettuce. The most reliable thing in a cold winter.</p><div class=\"rw\"><span class=\"pr\">£1.95</span><div class=\"st\"><button type=\"button\">−</button><span class=\"qt\">3</span><button type=\"button\">+</button></div></div></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"tray\" aria-label=\"Order tray\">\n<footer class=\"tr\"><span class=\"mn\">6 packets · £13.15</span><span class=\"fr\">Free postage over £15 — one more packet does it.</span><button type=\"button\" class=\"buy\">Review order</button></footer></section>\n</div>",
  "css": "\n.dz-seed-index-catalogue { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 26px 30px 30px; }\n.dz-seed-index-catalogue .cb { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; }\n.dz-seed-index-catalogue h1 { font-family: var(--pv-display); font-size: 28px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.012em; }\n.dz-seed-index-catalogue .cb p { margin: 0; color: var(--muted-foreground); font-size: 13px; }\n.dz-seed-index-catalogue .ctl { display: flex; gap: 12px; align-items: center; }\n.dz-seed-index-catalogue .seg { display: flex; background: var(--secondary); border-radius: 9999px; padding: 3px; }\n.dz-seed-index-catalogue .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-catalogue .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-catalogue select { font: inherit; font-size: 13px; padding: 8px 14px; border-radius: 9999px; border: 0; background: var(--secondary); color: var(--foreground); }\n.dz-seed-index-catalogue .ig { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }\n.dz-seed-index-catalogue .ig article { background: var(--card); border-radius: var(--pv-radius); padding: 14px; box-shadow: 0 6px 20px -8px color-mix(in oklab, var(--foreground) 22%, transparent); }\n.dz-seed-index-catalogue .ig img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--pv-radius-sm); display: block; filter: var(--img-filter); }\n.dz-seed-index-catalogue .ig h3 { font-family: var(--pv-display); font-size: 19px; font-weight: 600; margin: 12px 0 2px; }\n.dz-seed-index-catalogue .lt { font-family: var(--pv-mono); font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); margin: 0 0 7px; }\n.dz-seed-index-catalogue .ds { font-size: 13px; margin: 0 0 14px; color: var(--muted-foreground); line-height: 1.5; }\n.dz-seed-index-catalogue .rw { display: flex; justify-content: space-between; align-items: center; }\n.dz-seed-index-catalogue .pr { font-family: var(--pv-mono); font-size: 15px; font-weight: 500; }\n.dz-seed-index-catalogue .st { display: flex; align-items: center; gap: 2px; background: var(--secondary); border-radius: 9999px; padding: 3px; }\n.dz-seed-index-catalogue .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-catalogue .qt { font-family: var(--pv-mono); font-size: 12.5px; font-weight: 500; width: 22px; text-align: center; }\n.dz-seed-index-catalogue .so { font-family: var(--pv-mono); font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); }\n.dz-seed-index-catalogue .out img { opacity: .55; }\n.dz-seed-index-catalogue .tr { display: flex; align-items: center; gap: 18px; margin-top: 26px; padding: 16px 20px; background: var(--card); border-radius: var(--pv-radius); box-shadow: 0 6px 20px -8px color-mix(in oklab, var(--foreground) 22%, transparent); }\n.dz-seed-index-catalogue .mn { font-family: var(--pv-mono); font-size: 15px; }\n.dz-seed-index-catalogue .fr { font-size: 13px; color: var(--muted-foreground); }\n.dz-seed-index-catalogue .buy { margin-left: auto; 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"
}