{
  "id": "seed-index-first",
  "name": "First Order",
  "theme": "seed-index",
  "category": "Auth & Onboarding",
  "description": "An onboarding flow that asks three questions and shows the answer changing the recommendation live, so it never feels like a form for the shop’s benefit.",
  "layout": "A centred 760px stack of three question blocks with the growing recommendation rebuilt beneath them as a pill-cornered result card.",
  "modules": [
    {
      "key": "steps",
      "name": "Step indicator",
      "html": "\n<nav class=\"si\"><ol><li class=\"done\"><span class=\"n\">1</span>Where</li><li class=\"on\"><span class=\"n\">2</span>Space</li><li><span class=\"n\">3</span>Taste</li></ol><span class=\"sk\">Skip — show me everything</span></nav>"
    },
    {
      "key": "q",
      "name": "Question block",
      "html": "\n<section class=\"qb\"><h1>How much room have you got?</h1><p class=\"sub\">This decides packet sizes and whether we suggest successional sowing. You can change it later without losing anything.</p>\n<div class=\"opts\">\n  <label><input type=\"radio\" name=\"sp\"><span class=\"ot\"><b>A window box or two</b><i>Under 0.5 m²</i></span></label>\n  <label class=\"on\"><input type=\"radio\" name=\"sp\" checked><span class=\"ot\"><b>A few beds or a small plot</b><i>2 to 20 m²</i></span></label>\n  <label><input type=\"radio\" name=\"sp\"><span class=\"ot\"><b>An allotment</b><i>Over 20 m²</i></span></label>\n</div></section>"
    },
    {
      "key": "result",
      "name": "Live recommendation",
      "html": "\n<aside class=\"rc\"><span class=\"lb\">Based on Edinburgh, 2 to 20 m²</span>\n<h2>A nine-packet start</h2>\n<ul class=\"pk\"><li><img src=\"{{ART seeds}}\" alt=\"{{ARTALT seeds}}\"><span>Rocket</span></li><li><img src=\"{{ART sprout}}\" alt=\"{{ARTALT sprout}}\"><span>Lettuce</span></li><li><img src=\"{{ART crate}}\" alt=\"{{ARTALT crate}}\"><span>Mizuna</span></li><li><img src=\"{{ART packet}}\" alt=\"{{ARTALT packet}}\"><span>Corn salad</span></li><li class=\"more\"><span>+5</span></li></ul>\n<p class=\"rn\">Nine packets, £16.80, free postage. Sown in succession this fills three beds from May to October with one gap in August.</p>\n<div class=\"ac2\"><button type=\"button\" class=\"buy\">Continue</button><button type=\"button\" class=\"sec\">See the whole catalogue instead</button></div></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "seed-index-first",
    "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-first.json",
  "structure": "A centred 760px stack of three question blocks with the growing recommendation rebuilt beneath them as a pill-cornered result card.",
  "html": "<div class=\"dz dz-seed-index-first\" data-design=\"seed-index-first\" data-theme=\"seed-index\">\n<section class=\"dz-mod\" data-mod=\"steps\" aria-label=\"Step indicator\">\n<nav class=\"si\"><ol><li class=\"done\"><span class=\"n\">1</span>Where</li><li class=\"on\"><span class=\"n\">2</span>Space</li><li><span class=\"n\">3</span>Taste</li></ol><span class=\"sk\">Skip — show me everything</span></nav></section>\n<section class=\"dz-mod\" data-mod=\"q\" aria-label=\"Question block\">\n<section class=\"qb\"><h1>How much room have you got?</h1><p class=\"sub\">This decides packet sizes and whether we suggest successional sowing. You can change it later without losing anything.</p>\n<div class=\"opts\">\n  <label><input type=\"radio\" name=\"sp\"><span class=\"ot\"><b>A window box or two</b><i>Under 0.5 m²</i></span></label>\n  <label class=\"on\"><input type=\"radio\" name=\"sp\" checked><span class=\"ot\"><b>A few beds or a small plot</b><i>2 to 20 m²</i></span></label>\n  <label><input type=\"radio\" name=\"sp\"><span class=\"ot\"><b>An allotment</b><i>Over 20 m²</i></span></label>\n</div></section></section>\n<section class=\"dz-mod\" data-mod=\"result\" aria-label=\"Live recommendation\">\n<aside class=\"rc\"><span class=\"lb\">Based on Edinburgh, 2 to 20 m²</span>\n<h2>A nine-packet start</h2>\n<ul class=\"pk\"><li><img src=\"https://designlookbook.dev/assets/img/seed-index-seeds.webp\" alt=\"Assorted seeds arranged in a grid on pale paper\"><span>Rocket</span></li><li><img src=\"https://designlookbook.dev/assets/img/seed-index-sprout.webp\" alt=\"A single sprout emerging from pale soil\"><span>Lettuce</span></li><li><img src=\"https://designlookbook.dev/assets/img/seed-index-crate.webp\" alt=\"A shallow crate of leafy produce shot from above\"><span>Mizuna</span></li><li><img src=\"https://designlookbook.dev/assets/img/seed-index-packet.webp\" alt=\"A plain paper seed packet standing against a mint wall\"><span>Corn salad</span></li><li class=\"more\"><span>+5</span></li></ul>\n<p class=\"rn\">Nine packets, £16.80, free postage. Sown in succession this fills three beds from May to October with one gap in August.</p>\n<div class=\"ac2\"><button type=\"button\" class=\"buy\">Continue</button><button type=\"button\" class=\"sec\">See the whole catalogue instead</button></div></aside></section>\n</div>",
  "css": "\n.dz-seed-index-first { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 34px 30px; max-width: 760px; margin: 0 auto; display: grid; gap: 26px; }\n.dz-seed-index-first .si { display: flex; align-items: center; gap: 18px; }\n.dz-seed-index-first .si ol { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }\n.dz-seed-index-first .si li { display: flex; align-items: center; gap: 8px; font-family: var(--pv-mono); font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); background: var(--secondary); border-radius: 9999px; padding: 6px 16px 6px 6px; }\n.dz-seed-index-first .si li.on { background: var(--primary); color: var(--primary-foreground); }\n.dz-seed-index-first .si li.done { background: var(--card); }\n.dz-seed-index-first .si .n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 9999px; background: color-mix(in oklab, var(--foreground) 12%, transparent); }\n.dz-seed-index-first .sk { margin-left: auto; font-size: 13px; color: var(--muted-foreground); }\n.dz-seed-index-first h1 { font-family: var(--pv-display); font-size: 34px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.02em; }\n.dz-seed-index-first .sub { margin: 0 0 20px; font-size: 14.5px; color: var(--muted-foreground); line-height: 1.6; }\n.dz-seed-index-first .opts { display: grid; gap: 10px; }\n.dz-seed-index-first .opts label { display: flex; gap: 12px; align-items: center; background: var(--card); border-radius: var(--pv-radius); padding: 16px; cursor: pointer; box-shadow: 0 6px 20px -8px color-mix(in oklab, var(--foreground) 22%, transparent); }\n.dz-seed-index-first .opts label.on { outline: 2px solid var(--primary); }\n.dz-seed-index-first .ot b { display: block; font-size: 15px; font-weight: 700; }\n.dz-seed-index-first .ot i { font-family: var(--pv-mono); font-size: 12.5px; font-weight: 500; font-style: normal; color: var(--muted-foreground); }\n.dz-seed-index-first .rc { background: var(--card); border-radius: var(--pv-radius-xl); padding: 26px; box-shadow: 0 6px 20px -8px color-mix(in oklab, var(--foreground) 22%, transparent); }\n.dz-seed-index-first .lb { font-family: var(--pv-mono); font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); }\n.dz-seed-index-first h2 { font-family: var(--pv-display); font-size: 24px; font-weight: 700; margin: 6px 0 16px; }\n.dz-seed-index-first .pk { list-style: none; display: flex; gap: 10px; margin: 0 0 16px; padding: 0; }\n.dz-seed-index-first .pk li { text-align: center; }\n.dz-seed-index-first .pk img { width: 60px; height: 60px; object-fit: cover; border-radius: 9999px; display: block; filter: var(--img-filter); margin-bottom: 5px; }\n.dz-seed-index-first .pk span { font-family: var(--pv-mono); font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); }\n.dz-seed-index-first .pk .more { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 9999px; background: var(--secondary); }\n.dz-seed-index-first .rn { font-size: 14px; line-height: 1.6; margin: 0 0 20px; }\n.dz-seed-index-first .ac2 { display: flex; gap: 12px; align-items: center; }\n.dz-seed-index-first button { border-radius: 9999px; padding: 13px 26px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; border: 0; }\n.dz-seed-index-first .buy { background: var(--accent); color: var(--accent-foreground); }\n.dz-seed-index-first .sec { background: transparent; color: var(--muted-foreground); font-weight: 400; padding-left: 4px; }\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"
}