{
  "id": "neon-arcade-merch",
  "name": "Merch Grid",
  "theme": "neon-arcade",
  "category": "Commerce",
  "description": "A shop grid where each product card takes a different hue for its border and its offset, so a wall of six reads as a set of stickers rather than a table.",
  "layout": "A three-across grid where every card has a different coloured offset and the second card is rotated, with a sticky basket bar clamped to the bottom edge.",
  "modules": [
    {
      "key": "head",
      "name": "Header",
      "html": "\n<header class=\"hd\"><h1>Shop</h1><span class=\"m\">Everything printed here. Nothing drop-shipped.</span><div class=\"ft\"><button type=\"button\" class=\"on\">All</button><button type=\"button\">Shirts</button><button type=\"button\">Print</button><button type=\"button\">Stickers</button></div></header>"
    },
    {
      "key": "grid",
      "name": "Product grid",
      "html": "\n<section class=\"gr\">\n  <article class=\"c1\"><figure><img src=\"{{ART tube}}\" alt=\"{{ARTALT tube}}\"></figure><div><b>Neon tube tee</b><span class=\"m\">Heavy cotton · S–3XL</span><span class=\"p\">£28</span></div></article>\n  <article class=\"c2 tilt\"><figure><img src=\"{{ART confetti}}\" alt=\"{{ARTALT confetti}}\"></figure><div><b>Confetti sticker pack</b><span class=\"m\">Twelve die-cut · vinyl</span><span class=\"p\">£9</span></div></article>\n  <article class=\"c3\"><figure><img src=\"{{ART grid}}\" alt=\"{{ARTALT grid}}\"></figure><div><b>Grid poster, A1</b><span class=\"m\">Riso, two colour</span><span class=\"p\">£34</span></div></article>\n  <article class=\"c4\"><figure><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure><div><b>Cabinet print, A2</b><span class=\"m\">Giclée, signed</span><span class=\"p\">£48</span></div></article>\n  <article class=\"c5\"><figure><img src=\"{{ART crowd}}\" alt=\"{{ARTALT crowd}}\"></figure><div><b>Season 04 hoodie</b><span class=\"m\">Heavyweight · S–3XL</span><span class=\"p\">£62</span></div></article>\n  <article class=\"c1\"><figure><img src=\"{{ART tube}}\" alt=\"{{ARTALT tube}}\"></figure><div><b>Enamel pin, set of 3</b><span class=\"m\">20mm · butterfly clutch</span><span class=\"p\">£16</span></div></article>\n</section>"
    },
    {
      "key": "basket",
      "name": "Basket bar",
      "html": "\n<footer class=\"bs\"><span class=\"k\">Basket</span><span class=\"it\">Confetti sticker pack × 2 · Grid poster × 1</span><b>£52</b><button type=\"button\" class=\"go\">Check out</button></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "neon-arcade-merch",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T19:56:24+09:00",
    "updatedAt": "2026-09-01T19:56:24+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/neon-arcade-merch.json",
  "structure": "A three-across grid where every card has a different coloured offset and the second card is rotated, with a sticky basket bar clamped to the bottom edge.",
  "html": "<div class=\"dz dz-neon-arcade-merch\" data-design=\"neon-arcade-merch\" data-theme=\"neon-arcade\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Header\">\n<header class=\"hd\"><h1>Shop</h1><span class=\"m\">Everything printed here. Nothing drop-shipped.</span><div class=\"ft\"><button type=\"button\" class=\"on\">All</button><button type=\"button\">Shirts</button><button type=\"button\">Print</button><button type=\"button\">Stickers</button></div></header></section>\n<section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Product grid\">\n<section class=\"gr\">\n  <article class=\"c1\"><figure><img src=\"https://designlookbook.dev/assets/img/neon-arcade-tube.webp\" alt=\"A bent neon tube in magenta against black\"></figure><div><b>Neon tube tee</b><span class=\"m\">Heavy cotton · S–3XL</span><span class=\"p\">£28</span></div></article>\n  <article class=\"c2 tilt\"><figure><img src=\"https://designlookbook.dev/assets/img/neon-arcade-confetti.webp\" alt=\"Saturated confetti shapes scattered on black\"></figure><div><b>Confetti sticker pack</b><span class=\"m\">Twelve die-cut · vinyl</span><span class=\"p\">£9</span></div></article>\n  <article class=\"c3\"><figure><img src=\"https://designlookbook.dev/assets/img/neon-arcade-grid.webp\" alt=\"A magenta perspective grid receding over black\"></figure><div><b>Grid poster, A1</b><span class=\"m\">Riso, two colour</span><span class=\"p\">£34</span></div></article>\n  <article class=\"c4\"><figure><img src=\"https://designlookbook.dev/assets/img/neon-arcade-hero.webp\" alt=\"Arcade cabinets glowing magenta and cyan in a dark room\"></figure><div><b>Cabinet print, A2</b><span class=\"m\">Giclée, signed</span><span class=\"p\">£48</span></div></article>\n  <article class=\"c5\"><figure><img src=\"https://designlookbook.dev/assets/img/neon-arcade-crowd.webp\" alt=\"Silhouetted hands raised under magenta and cyan stage light\"></figure><div><b>Season 04 hoodie</b><span class=\"m\">Heavyweight · S–3XL</span><span class=\"p\">£62</span></div></article>\n  <article class=\"c1\"><figure><img src=\"https://designlookbook.dev/assets/img/neon-arcade-tube.webp\" alt=\"A bent neon tube in magenta against black\"></figure><div><b>Enamel pin, set of 3</b><span class=\"m\">20mm · butterfly clutch</span><span class=\"p\">£16</span></div></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"basket\" aria-label=\"Basket bar\">\n<footer class=\"bs\"><span class=\"k\">Basket</span><span class=\"it\">Confetti sticker pack × 2 · Grid poster × 1</span><b>£52</b><button type=\"button\" class=\"go\">Check out</button></footer></section>\n</div>",
  "css": "\n.dz-neon-arcade-merch { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 26px 26px; }\n.dz-neon-arcade-merch .hd { display: flex; align-items: center; gap: 18px; padding: 22px 0 24px; }\n.dz-neon-arcade-merch .hd h1 { font-family: var(--pv-display); font-size: 46px; font-weight: 700; text-transform: uppercase; letter-spacing: -.04em; margin: 0; }\n.dz-neon-arcade-merch .m { font-size: 12px; color: var(--muted-foreground); }\n.dz-neon-arcade-merch .ft { display: flex; gap: 8px; margin-left: auto; }\n.dz-neon-arcade-merch .ft button { font: inherit; font-size: 12.5px; background: transparent; color: var(--muted-foreground); border: 2px solid var(--border); border-radius: var(--pv-radius-md); padding: 7px 14px; cursor: pointer; }\n.dz-neon-arcade-merch .ft .on { color: var(--foreground); border-color: var(--primary); }\n.dz-neon-arcade-merch .gr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }\n.dz-neon-arcade-merch .gr article { border: 2px solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 5px 5px 0 var(--chart-1); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); background: var(--card); overflow: hidden; cursor: pointer; }\n.dz-neon-arcade-merch .c2 { box-shadow: 5px 5px 0 var(--chart-2); } .dz-neon-arcade-merch .c3 { box-shadow: 5px 5px 0 var(--chart-3); }\n.dz-neon-arcade-merch .c4 { box-shadow: 5px 5px 0 var(--chart-4); } .dz-neon-arcade-merch .c5 { box-shadow: 5px 5px 0 var(--chart-5); }\n.dz-neon-arcade-merch .tilt { transform: rotate(-2deg); }\n.dz-neon-arcade-merch .gr article:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--primary); }\n.dz-neon-arcade-merch .tilt:hover { transform: rotate(-2deg) translate(2px, 2px); }\n.dz-neon-arcade-merch .gr figure { margin: 0; }\n.dz-neon-arcade-merch .gr img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-neon-arcade-merch .gr div { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }\n.dz-neon-arcade-merch .gr b { font-family: var(--pv-display); font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; }\n.dz-neon-arcade-merch .p { font-family: var(--pv-mono); font-size: 20px; font-weight: 700; color: var(--accent); margin-top: 4px; }\n.dz-neon-arcade-merch .bs { display: flex; align-items: center; gap: 18px; margin-top: 26px; border: 2px solid var(--foreground); border-radius: var(--pv-radius); box-shadow: 5px 5px 0 var(--accent); background: var(--card); padding: 14px 18px; }\n.dz-neon-arcade-merch .k { font-size: 11.5px; color: var(--accent); }\n.dz-neon-arcade-merch .it { flex: 1; font-size: 13px; color: var(--muted-foreground); }\n.dz-neon-arcade-merch .bs b { font-family: var(--pv-mono); font-size: 26px; font-weight: 700; }\n.dz-neon-arcade-merch .go { font: inherit; font-size: 14px; background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--foreground); border-radius: var(--pv-radius-md); padding: 11px 24px; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-neon-arcade-merch *, .dz-neon-arcade-merch *::before, .dz-neon-arcade-merch *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/neon-arcade.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;500;600;700&display=swap"
}