{
  "id": "curated-catalog-gift-finder",
  "name": "Gift Finder",
  "theme": "curated-catalog",
  "category": "App Shell",
  "description": "A three-question finder where every answer is a photograph, and the result appears in place rather than on a new page.",
  "layout": "A single centred panel that swaps its own content; answers are 3-up image tiles with the label overlaid, and a thin progress rule sits under the question.",
  "modules": [
    {
      "key": "step",
      "name": "Question step",
      "html": "\n<div class=\"q\">\n  <div class=\"q-top\"><span class=\"q-n\">Question 2 of 3</span><div class=\"q-rule\"><i></i></div></div>\n  <h1>What does the room already look like?</h1>\n  <div class=\"opts\">\n    <button type=\"button\" class=\"opt on\"><img src=\"{{ART gallery}}\" alt=\"{{ARTALT gallery}}\"><span>Spare and pale</span></button>\n    <button type=\"button\" class=\"opt\"><img src=\"{{ART textile}}\" alt=\"{{ARTALT textile}}\"><span>Layered and warm</span></button>\n    <button type=\"button\" class=\"opt\"><img src=\"{{IMG interior 400 300}}\" alt=\"{{ALT interior}}\"><span>Honestly, chaotic</span></button>\n  </div>\n</div>"
    },
    {
      "key": "nav",
      "name": "Step navigation",
      "html": "\n<div class=\"qn\"><button type=\"button\" class=\"back\">Back</button><button type=\"button\" class=\"next\">Next question</button><button type=\"button\" class=\"skip\">Skip, just show me everything</button></div>"
    },
    {
      "key": "result",
      "name": "Result preview",
      "html": "\n<div class=\"res\">\n  <h2>Based on the first two answers</h2>\n  <div class=\"rrow\">\n    <a href=\"#\"><img src=\"{{ART object}}\" alt=\"{{ARTALT object}}\"><b>Turned Walnut Bowl</b><span>£186</span></a>\n    <a href=\"#\"><img src=\"{{IMG product 300 300}}\" alt=\"{{ALT product}}\"><b>Everyday Bowl</b><span>£42</span></a>\n    <a href=\"#\"><img src=\"{{IMG texture 300 300}}\" alt=\"{{ALT texture}}\"><b>Marbled Endpapers</b><span>£29</span></a>\n  </div>\n  <p class=\"rnote\">These will narrow again after the last question. Nothing is added to your bag until you say so.</p>\n</div>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "curated-catalog-gift-finder",
    "model": "Claude Fable 5.1",
    "author": "Claude Code",
    "createdAt": "2026-09-02T16:52:47+09:00",
    "updatedAt": "2026-09-02T16:58:37+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/curated-catalog-gift-finder.json",
  "structure": "A single centred panel that swaps its own content; answers are 3-up image tiles with the label overlaid, and a thin progress rule sits under the question.",
  "html": "<div class=\"dz dz-curated-catalog-gift-finder\" data-design=\"curated-catalog-gift-finder\" data-theme=\"curated-catalog\">\n<div class=\"panel\"><section class=\"dz-mod\" data-mod=\"step\" aria-label=\"Question step\">\n<div class=\"q\">\n  <div class=\"q-top\"><span class=\"q-n\">Question 2 of 3</span><div class=\"q-rule\"><i></i></div></div>\n  <h1>What does the room already look like?</h1>\n  <div class=\"opts\">\n    <button type=\"button\" class=\"opt on\"><img src=\"https://designlookbook.dev/assets/img/curated-catalog-gallery.webp\" alt=\"A quiet gallery corner with one framed piece and a bench\"><span>Spare and pale</span></button>\n    <button type=\"button\" class=\"opt\"><img src=\"https://designlookbook.dev/assets/img/curated-catalog-textile.webp\" alt=\"A folded woven textile with a fine sage and bordeaux stripe\"><span>Layered and warm</span></button>\n    <button type=\"button\" class=\"opt\"><img src=\"https://images.unsplash.com/photo-1543007630-9710e4a00a20?w=400&h=300&q=70&auto=format&fit=crop\" alt=\"Warm bar interior lit by rows of pendant lamps\"><span>Honestly, chaotic</span></button>\n  </div>\n</div></section><section class=\"dz-mod\" data-mod=\"nav\" aria-label=\"Step navigation\">\n<div class=\"qn\"><button type=\"button\" class=\"back\">Back</button><button type=\"button\" class=\"next\">Next question</button><button type=\"button\" class=\"skip\">Skip, just show me everything</button></div></section><section class=\"dz-mod\" data-mod=\"result\" aria-label=\"Result preview\">\n<div class=\"res\">\n  <h2>Based on the first two answers</h2>\n  <div class=\"rrow\">\n    <a href=\"#\"><img src=\"https://designlookbook.dev/assets/img/curated-catalog-object.webp\" alt=\"A brass and walnut object photographed against warm white\"><b>Turned Walnut Bowl</b><span>£186</span></a>\n    <a href=\"#\"><img src=\"https://images.unsplash.com/photo-1517849845537-4d257902454a?w=300&h=300&q=70&auto=format&fit=crop\" alt=\"A red running shoe on a saturated red background\"><b>Everyday Bowl</b><span>£42</span></a>\n    <a href=\"#\"><img src=\"https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=300&h=300&q=70&auto=format&fit=crop\" alt=\"Two latte cups held over a dark table, seen from above\"><b>Marbled Endpapers</b><span>£29</span></a>\n  </div>\n  <p class=\"rnote\">These will narrow again after the last question. Nothing is added to your bag until you say so.</p>\n</div></section></div>\n</div>",
  "css": "\n.dz-curated-catalog-gift-finder { background: var(--muted); color: var(--foreground); font-family: var(--pv-body); padding: 34px 30px 34px; }\n.dz-curated-catalog-gift-finder .panel { max-width: 46rem; margin: 0 auto; background: var(--card); border-radius: var(--pv-radius-xl); padding: 28px 30px 26px; box-shadow: 0 14px 44px color-mix(in srgb, var(--foreground) 14%, transparent); }\n.dz-curated-catalog-gift-finder .q-top { display: flex; align-items: center; gap: 16px; }\n.dz-curated-catalog-gift-finder .q-n { font-size: 12.5px; color: var(--primary); white-space: nowrap; }\n.dz-curated-catalog-gift-finder .q-rule { flex: 1; height: 3px; background: var(--muted); border-radius: var(--pv-radius-xl); overflow: hidden; }\n.dz-curated-catalog-gift-finder .q-rule i { display: block; height: 100%; width: 66%; background: var(--primary); transition: width var(--dur-slow) var(--ease); }\n.dz-curated-catalog-gift-finder .q h1 { font-family: var(--pv-display); font-size: 30px; line-height: 1.14; margin: 14px 0 20px; }\n.dz-curated-catalog-gift-finder .opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }\n.dz-curated-catalog-gift-finder .opt { position: relative; padding: 0; border: 3px solid transparent; border-radius: var(--pv-radius); overflow: hidden; background: none; cursor: pointer; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }\n.dz-curated-catalog-gift-finder .opt:hover { transform: translateY(-3px); }\n.dz-curated-catalog-gift-finder .opt.on { border-color: var(--primary); }\n.dz-curated-catalog-gift-finder .opt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }\n.dz-curated-catalog-gift-finder .opt span { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; font-family: var(--pv-display); font-size: 15px; color: var(--background); text-align: left; background: linear-gradient(to top, color-mix(in srgb, var(--foreground) 84%, transparent), transparent); }\n.dz-curated-catalog-gift-finder .qn { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: var(--pv-bw) solid var(--border); }\n.dz-curated-catalog-gift-finder .qn button { font: inherit; font-size: 13.5px; padding: 10px 20px; border-radius: var(--pv-radius-xl); cursor: pointer; }\n.dz-curated-catalog-gift-finder .back { border: var(--pv-bw) solid var(--border); background: var(--background); color: var(--foreground); }\n.dz-curated-catalog-gift-finder .next { border: 0; background: var(--primary); color: var(--primary-foreground); font-weight: 600; }\n.dz-curated-catalog-gift-finder .skip { margin-left: auto; border: 0; background: none; color: var(--muted-foreground); text-decoration: underline; }\n.dz-curated-catalog-gift-finder .res { margin-top: 24px; padding-top: 20px; border-top: var(--pv-bw) dashed var(--border); }\n.dz-curated-catalog-gift-finder .res h2 { font-family: var(--pv-display); font-size: 18px; margin: 0 0 14px; color: var(--muted-foreground); }\n.dz-curated-catalog-gift-finder .rrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }\n.dz-curated-catalog-gift-finder .rrow a { text-decoration: none; color: var(--foreground); }\n.dz-curated-catalog-gift-finder .rrow img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--pv-radius-sm); display: block; }\n.dz-curated-catalog-gift-finder .rrow b { display: block; font-family: var(--pv-display); font-size: 14.5px; font-weight: 400; margin-top: 7px; }\n.dz-curated-catalog-gift-finder .rrow span { font-size: 12.5px; color: var(--primary); }\n.dz-curated-catalog-gift-finder .rnote { margin: 14px 0 0; font-size: 12.5px; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-curated-catalog-gift-finder *, .dz-curated-catalog-gift-finder *::before, .dz-curated-catalog-gift-finder *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/curated-catalog.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&family=Karla:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}