{
  "id": "atoll-market-shop",
  "name": "Shop Grid",
  "theme": "atoll-market",
  "category": "Search & Browse",
  "description": "A browse view where products have no containers at all — image, name, price — and the filters are a single line of text rather than a rail.",
  "layout": "A one-line text filter above a 4-up grid of uncontained products, with one deliberately empty cell to keep the grid from reading as a catalogue.",
  "modules": [
    {
      "key": "filter",
      "name": "Text filter",
      "html": "\n<header class=\"tf\"><h1>Everything</h1><p class=\"fl\">Showing <a href=\"#\">all 18 pieces</a> in <a href=\"#\">Collection 04</a>, sorted by <a href=\"#\">how they were photographed</a>. <a class=\"mut\" href=\"#\">Sort by price</a></p></header>"
    },
    {
      "key": "grid",
      "name": "Product grid",
      "html": "\n<section class=\"pg\">\n  <article><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><b>The Long Crimson Coat</b><span class=\"pr\">£620</span></article>\n  <article><img src=\"{{ART fabric}}\" alt=\"{{ARTALT fabric}}\"><b>Folded Silk, Aqua</b><span class=\"pr\">£240</span></article>\n  <article><img src=\"{{ART still}}\" alt=\"{{ARTALT still}}\"><b>Two Objects, Bone and Crimson</b><span class=\"pr\">£145</span></article>\n  <article class=\"gap\"></article>\n  <article><img src=\"{{ART model}}\" alt=\"{{ARTALT model}}\"><b>The Bone Shirt</b><span class=\"pr\">£280</span></article>\n  <article><img src=\"{{ART water}}\" alt=\"{{ARTALT water}}\"><b>Wide Trouser, Aqua</b><span class=\"pr\">£340</span></article>\n  <article class=\"out\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><b>The Short Crimson Coat</b><span class=\"pr\">Sold out</span></article>\n  <article><img src=\"{{ART fabric}}\" alt=\"{{ARTALT fabric}}\"><b>Silk Square, Small</b><span class=\"pr\">£140</span></article>\n</section>"
    },
    {
      "key": "more",
      "name": "Load more",
      "html": "\n<footer class=\"lm\"><span class=\"k\">8 of 18</span><a class=\"lk\" href=\"#\">Show the rest</a></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "atoll-market-shop",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T00:13:22+09:00",
    "updatedAt": "2026-09-02T00:13:22+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/atoll-market-shop.json",
  "structure": "A one-line text filter above a 4-up grid of uncontained products, with one deliberately empty cell to keep the grid from reading as a catalogue.",
  "html": "<div class=\"dz dz-atoll-market-shop\" data-design=\"atoll-market-shop\" data-theme=\"atoll-market\">\n<section class=\"dz-mod\" data-mod=\"filter\" aria-label=\"Text filter\">\n<header class=\"tf\"><h1>Everything</h1><p class=\"fl\">Showing <a href=\"#\">all 18 pieces</a> in <a href=\"#\">Collection 04</a>, sorted by <a href=\"#\">how they were photographed</a>. <a class=\"mut\" href=\"#\">Sort by price</a></p></header></section>\n<section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Product grid\">\n<section class=\"pg\">\n  <article><img src=\"https://designlookbook.dev/assets/img/atoll-market-hero.webp\" alt=\"A crimson garment hanging against an aqua wall\"><b>The Long Crimson Coat</b><span class=\"pr\">£620</span></article>\n  <article><img src=\"https://designlookbook.dev/assets/img/atoll-market-fabric.webp\" alt=\"Crimson fabric folded against an aqua ground\"><b>Folded Silk, Aqua</b><span class=\"pr\">£240</span></article>\n  <article><img src=\"https://designlookbook.dev/assets/img/atoll-market-still.webp\" alt=\"Two objects arranged on aqua with hard shadows\"><b>Two Objects, Bone and Crimson</b><span class=\"pr\">£145</span></article>\n  <article class=\"gap\"></article>\n  <article><img src=\"https://designlookbook.dev/assets/img/atoll-market-model.webp\" alt=\"A figure in crimson against a bright aqua backdrop\"><b>The Bone Shirt</b><span class=\"pr\">£280</span></article>\n  <article><img src=\"https://designlookbook.dev/assets/img/atoll-market-water.webp\" alt=\"Shallow turquoise water over pale sand\"><b>Wide Trouser, Aqua</b><span class=\"pr\">£340</span></article>\n  <article class=\"out\"><img src=\"https://designlookbook.dev/assets/img/atoll-market-hero.webp\" alt=\"A crimson garment hanging against an aqua wall\"><b>The Short Crimson Coat</b><span class=\"pr\">Sold out</span></article>\n  <article><img src=\"https://designlookbook.dev/assets/img/atoll-market-fabric.webp\" alt=\"Crimson fabric folded against an aqua ground\"><b>Silk Square, Small</b><span class=\"pr\">£140</span></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"more\" aria-label=\"Load more\">\n<footer class=\"lm\"><span class=\"k\">8 of 18</span><a class=\"lk\" href=\"#\">Show the rest</a></footer></section>\n</div>",
  "css": "\n.dz-atoll-market-shop { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 30px 38px 72px; }\n.dz-atoll-market-shop .k { text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-atoll-market-shop h1 { font-family: var(--pv-display); font-weight: 400; font-size: 56px; margin: 0 0 10px; letter-spacing: -.02em; }\n.dz-atoll-market-shop .fl { margin: 0 0 38px; font-size: 15.5px; line-height: 1.6; max-width: 56ch; }\n.dz-atoll-market-shop .fl a { color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--primary); }\n.dz-atoll-market-shop .fl .mut { color: var(--muted-foreground); border-bottom-color: var(--border); margin-left: 10px; }\n.dz-atoll-market-shop .pg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 38px 26px; }\n.dz-atoll-market-shop .pg article { display: grid; gap: 6px; align-content: start; }\n.dz-atoll-market-shop .pg img { width: 100%; height: 300px; object-fit: cover; display: block; filter: var(--img-filter); box-shadow: 0 20px 50px -22px color-mix(in oklab, var(--foreground) 40%, transparent); margin-bottom: 8px; }\n.dz-atoll-market-shop .pg b { font-family: var(--pv-display); font-weight: 400; font-size: 20px; font-weight: 400; }\n.dz-atoll-market-shop .pr { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--muted-foreground); }\n.dz-atoll-market-shop .gap { }\n.dz-atoll-market-shop .out img { filter: var(--img-filter) grayscale(.55); }\n.dz-atoll-market-shop .out .pr { color: var(--foreground); }\n.dz-atoll-market-shop .lm { display: flex; align-items: center; gap: 16px; margin-top: 46px; padding-top: 18px; border-top: 1px solid var(--border); }\n.dz-atoll-market-shop .lk { text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; font-weight: 600; color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--primary); padding-bottom: 2px; margin-left: auto; }\n",
  "requiredTheme": "/api/v1/themes/atoll-market.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Prata:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600;700&display=swap"
}