{
  "id": "curated-catalog-collection-hall",
  "name": "Collection Hall",
  "theme": "curated-catalog",
  "category": "Commerce",
  "description": "A shop home page where one enormous still life sets the season and the collections beneath it are unequal sizes on purpose.",
  "layout": "Full-bleed hero at 320px with the copy inset bottom-left, then an intentionally uneven grid — one 2x tall feature beside four ordinary tiles, so the eye has somewhere to go.",
  "modules": [
    {
      "key": "nav",
      "name": "Shop navigation",
      "html": "\n<header class=\"nav\"><span class=\"brand\">Vessel &amp; Co.</span><nav><a href=\"#\">New</a><a href=\"#\">Ceramics</a><a href=\"#\">Textiles</a><a href=\"#\">Objects</a><a href=\"#\">Stories</a></nav><div class=\"nav-r\"><button type=\"button\">Search</button><button type=\"button\">Bag <b>2</b></button></div></header>"
    },
    {
      "key": "hero",
      "name": "Season hero",
      "html": "\n<section class=\"hero\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\">\n  <div class=\"hero-in\"><span class=\"eyebrow\">Autumn selection</span><h1>Things made slowly, by people we have met.</h1><a class=\"cta\" href=\"#\">See the selection</a></div>\n</section>"
    },
    {
      "key": "grid",
      "name": "Collection grid",
      "html": "\n<div class=\"cg\">\n  <a class=\"tile feat\" href=\"#\"><img src=\"{{ART textile}}\" alt=\"{{ARTALT textile}}\"><div class=\"tile-b\"><h3>Woven at Kilcarn</h3><p>Twelve pieces, undyed wool, limited to the fleece of one season.</p></div></a>\n  <a class=\"tile\" href=\"#\"><img src=\"{{ART object}}\" alt=\"{{ARTALT object}}\"><div class=\"tile-b\"><h3>Turned objects</h3></div></a>\n  <a class=\"tile\" href=\"#\"><img src=\"{{IMG product 500 400}}\" alt=\"{{ALT product}}\"><div class=\"tile-b\"><h3>Everyday glaze</h3></div></a>\n  <a class=\"tile\" href=\"#\"><img src=\"{{IMG interior 500 400}}\" alt=\"{{ALT interior}}\"><div class=\"tile-b\"><h3>For the table</h3></div></a>\n  <a class=\"tile\" href=\"#\"><img src=\"{{IMG texture 500 400}}\" alt=\"{{ALT texture}}\"><div class=\"tile-b\"><h3>Paper and ink</h3></div></a>\n</div>"
    },
    {
      "key": "note",
      "name": "Curator note",
      "html": "\n<footer class=\"cnote\"><p><span>A note on how we choose</span> Nothing appears here because it sells. Every maker is visited, and we buy the work outright — so if it stays on the shelf, that is our problem, not theirs.</p></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "curated-catalog-collection-hall",
    "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-collection-hall.json",
  "structure": "Full-bleed hero at 320px with the copy inset bottom-left, then an intentionally uneven grid — one 2x tall feature beside four ordinary tiles, so the eye has somewhere to go.",
  "html": "<div class=\"dz dz-curated-catalog-collection-hall\" data-design=\"curated-catalog-collection-hall\" data-theme=\"curated-catalog\">\n<section class=\"dz-mod\" data-mod=\"nav\" aria-label=\"Shop navigation\">\n<header class=\"nav\"><span class=\"brand\">Vessel &amp; Co.</span><nav><a href=\"#\">New</a><a href=\"#\">Ceramics</a><a href=\"#\">Textiles</a><a href=\"#\">Objects</a><a href=\"#\">Stories</a></nav><div class=\"nav-r\"><button type=\"button\">Search</button><button type=\"button\">Bag <b>2</b></button></div></header></section>\n<section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Season hero\">\n<section class=\"hero\"><img src=\"https://designlookbook.dev/assets/img/curated-catalog-hero.webp\" alt=\"A row of hand-thrown ceramic vessels on a pale plinth\">\n  <div class=\"hero-in\"><span class=\"eyebrow\">Autumn selection</span><h1>Things made slowly, by people we have met.</h1><a class=\"cta\" href=\"#\">See the selection</a></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Collection grid\">\n<div class=\"cg\">\n  <a class=\"tile feat\" href=\"#\"><img src=\"https://designlookbook.dev/assets/img/curated-catalog-textile.webp\" alt=\"A folded woven textile with a fine sage and bordeaux stripe\"><div class=\"tile-b\"><h3>Woven at Kilcarn</h3><p>Twelve pieces, undyed wool, limited to the fleece of one season.</p></div></a>\n  <a class=\"tile\" href=\"#\"><img src=\"https://designlookbook.dev/assets/img/curated-catalog-object.webp\" alt=\"A brass and walnut object photographed against warm white\"><div class=\"tile-b\"><h3>Turned objects</h3></div></a>\n  <a class=\"tile\" href=\"#\"><img src=\"https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=500&h=400&q=70&auto=format&fit=crop\" alt=\"A red running shoe on a saturated red background\"><div class=\"tile-b\"><h3>Everyday glaze</h3></div></a>\n  <a class=\"tile\" href=\"#\"><img src=\"https://images.unsplash.com/photo-1543007630-9710e4a00a20?w=500&h=400&q=70&auto=format&fit=crop\" alt=\"A bright minimal lounge with pale armchairs\"><div class=\"tile-b\"><h3>For the table</h3></div></a>\n  <a class=\"tile\" href=\"#\"><img src=\"https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=500&h=400&q=70&auto=format&fit=crop\" alt=\"Two latte cups held over a dark table, seen from above\"><div class=\"tile-b\"><h3>Paper and ink</h3></div></a>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"note\" aria-label=\"Curator note\">\n<footer class=\"cnote\"><p><span>A note on how we choose</span> Nothing appears here because it sells. Every maker is visited, and we buy the work outright — so if it stays on the shelf, that is our problem, not theirs.</p></footer></section>\n</div>",
  "css": "\n.dz-curated-catalog-collection-hall { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-curated-catalog-collection-hall .nav { display: flex; align-items: center; gap: 30px; padding: 16px 30px; }\n.dz-curated-catalog-collection-hall .brand { font-family: var(--pv-display); font-size: 21px; letter-spacing: -.01em; }\n.dz-curated-catalog-collection-hall .nav nav { display: flex; gap: 22px; }\n.dz-curated-catalog-collection-hall .nav a { font-size: 14px; color: var(--muted-foreground); text-decoration: none; transition: color var(--dur) var(--ease); }\n.dz-curated-catalog-collection-hall .nav a:hover { color: var(--primary); }\n.dz-curated-catalog-collection-hall .nav-r { margin-left: auto; display: flex; gap: 8px; }\n.dz-curated-catalog-collection-hall .nav-r button { font: inherit; font-size: 13px; padding: 8px 15px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-xl); background: var(--card); color: var(--foreground); cursor: pointer; }\n.dz-curated-catalog-collection-hall .nav-r b { font-weight: 600; color: var(--primary); }\n.dz-curated-catalog-collection-hall .hero { position: relative; height: 320px; overflow: hidden; }\n.dz-curated-catalog-collection-hall .hero img { width: 100%; height: 100%; object-fit: cover; display: block; }\n.dz-curated-catalog-collection-hall .hero-in { position: absolute; left: 30px; bottom: 26px; right: 30px; max-width: 34rem; background: var(--card); border-radius: var(--pv-radius-xl); padding: 22px 26px; box-shadow: 0 14px 40px color-mix(in srgb, var(--foreground) 18%, transparent); }\n.dz-curated-catalog-collection-hall .eyebrow { font-size: 12.5px; color: var(--primary); }\n.dz-curated-catalog-collection-hall .hero-in h1 { font-family: var(--pv-display); font-size: 34px; line-height: 1.1; margin: 6px 0 16px; }\n.dz-curated-catalog-collection-hall .cta { display: inline-block; background: var(--primary); color: var(--primary-foreground); font-size: 14px; padding: 11px 22px; border-radius: var(--pv-radius-xl); text-decoration: none; transition: transform var(--dur) var(--ease); }\n.dz-curated-catalog-collection-hall .cta:hover { transform: translateY(-2px); }\n.dz-curated-catalog-collection-hall .cg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 168px; gap: 16px; padding: 30px; }\n.dz-curated-catalog-collection-hall .tile { position: relative; overflow: hidden; border-radius: var(--pv-radius); background: var(--card); text-decoration: none; color: var(--foreground); box-shadow: 0 2px 10px color-mix(in srgb, var(--foreground) 8%, transparent); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-curated-catalog-collection-hall .tile:hover { transform: translateY(-4px); box-shadow: 0 16px 34px color-mix(in srgb, var(--foreground) 16%, transparent); }\n.dz-curated-catalog-collection-hall .tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }\n.dz-curated-catalog-collection-hall .tile:hover img { transform: scale(1.03); }\n.dz-curated-catalog-collection-hall .feat { grid-row: span 2; grid-column: span 2; }\n.dz-curated-catalog-collection-hall .tile-b { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; background: linear-gradient(to top, color-mix(in srgb, var(--foreground) 82%, transparent), transparent); color: var(--background); }\n.dz-curated-catalog-collection-hall .tile-b h3 { font-family: var(--pv-display); font-size: 19px; margin: 0; }\n.dz-curated-catalog-collection-hall .feat .tile-b h3 { font-size: 26px; }\n.dz-curated-catalog-collection-hall .tile-b p { margin: 5px 0 0; font-size: 13.5px; opacity: .85; max-width: 34ch; }\n.dz-curated-catalog-collection-hall .cnote { padding: 0 30px 30px; }\n.dz-curated-catalog-collection-hall .cnote p { margin: 0; padding: 18px 22px; background: var(--muted); border-radius: var(--pv-radius); font-size: 14px; line-height: 1.65; color: var(--muted-foreground); max-width: 68ch; }\n.dz-curated-catalog-collection-hall .cnote span { display: block; font-family: var(--pv-display); font-size: 16px; color: var(--foreground); margin-bottom: 5px; }\n@media (prefers-reduced-motion: reduce) { .dz-curated-catalog-collection-hall *, .dz-curated-catalog-collection-hall *::before, .dz-curated-catalog-collection-hall *::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"
}