{
  "id": "atoll-market-bleed",
  "name": "Bleed Row",
  "theme": "atoll-market",
  "category": "Commerce",
  "description": "The signature arrangement: one product image runs past the right edge of the page while its name and price sit far to the left with two columns of nothing between them.",
  "layout": "A 12-column grid at 1400px where the image spans 7–12 and bleeds past the margin, the name sits in 1–4, and columns 5–6 are deliberately empty.",
  "modules": [
    {
      "key": "mark",
      "name": "Collection mark",
      "html": "\n<header class=\"cm\"><span class=\"k\">Collection 04</span><span class=\"rule\"></span><span class=\"k r\">Resort · 18 pieces</span></header>"
    },
    {
      "key": "row1",
      "name": "Bleed row, left text",
      "html": "\n<section class=\"br\"><div class=\"tx\"><h2>The Long Crimson Coat</h2><p class=\"pr\">£620</p><p class=\"ds\">Unlined, single seam at the shoulder, cut to fall straight from the collar. Made in a wool-linen that creases and is meant to.</p><a class=\"lk\" href=\"#\">Sizes and fit</a></div><figure class=\"im bleed-r\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure></section>"
    },
    {
      "key": "row2",
      "name": "Bleed row, right text",
      "html": "\n<section class=\"br rev\"><figure class=\"im bleed-l\"><img src=\"{{ART fabric}}\" alt=\"{{ARTALT fabric}}\"></figure><div class=\"tx\"><h2>Folded Silk, Aqua</h2><p class=\"pr\">£240</p><p class=\"ds\">A square, two metres, hand-rolled at the edge. The only piece in this collection that is not made to a size.</p><a class=\"lk\" href=\"#\">About the cloth</a></div></section>"
    },
    {
      "key": "small",
      "name": "Small centred piece",
      "html": "\n<section class=\"sm\"><figure><img src=\"{{ART still}}\" alt=\"{{ARTALT still}}\"></figure><div><h2>Two Objects, Bone and Crimson</h2><p class=\"pr\">£145 the pair</p></div></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "atoll-market-bleed",
    "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-bleed.json",
  "structure": "A 12-column grid at 1400px where the image spans 7–12 and bleeds past the margin, the name sits in 1–4, and columns 5–6 are deliberately empty.",
  "html": "<div class=\"dz dz-atoll-market-bleed\" data-design=\"atoll-market-bleed\" data-theme=\"atoll-market\">\n<section class=\"dz-mod\" data-mod=\"mark\" aria-label=\"Collection mark\">\n<header class=\"cm\"><span class=\"k\">Collection 04</span><span class=\"rule\"></span><span class=\"k r\">Resort · 18 pieces</span></header></section>\n<section class=\"dz-mod\" data-mod=\"row1\" aria-label=\"Bleed row, left text\">\n<section class=\"br\"><div class=\"tx\"><h2>The Long Crimson Coat</h2><p class=\"pr\">£620</p><p class=\"ds\">Unlined, single seam at the shoulder, cut to fall straight from the collar. Made in a wool-linen that creases and is meant to.</p><a class=\"lk\" href=\"#\">Sizes and fit</a></div><figure class=\"im bleed-r\"><img src=\"https://designlookbook.dev/assets/img/atoll-market-hero.webp\" alt=\"A crimson garment hanging against an aqua wall\"></figure></section></section>\n<section class=\"dz-mod\" data-mod=\"row2\" aria-label=\"Bleed row, right text\">\n<section class=\"br rev\"><figure class=\"im bleed-l\"><img src=\"https://designlookbook.dev/assets/img/atoll-market-fabric.webp\" alt=\"Crimson fabric folded against an aqua ground\"></figure><div class=\"tx\"><h2>Folded Silk, Aqua</h2><p class=\"pr\">£240</p><p class=\"ds\">A square, two metres, hand-rolled at the edge. The only piece in this collection that is not made to a size.</p><a class=\"lk\" href=\"#\">About the cloth</a></div></section></section>\n<section class=\"dz-mod\" data-mod=\"small\" aria-label=\"Small centred piece\">\n<section class=\"sm\"><figure><img src=\"https://designlookbook.dev/assets/img/atoll-market-still.webp\" alt=\"Two objects arranged on aqua with hard shadows\"></figure><div><h2>Two Objects, Bone and Crimson</h2><p class=\"pr\">£145 the pair</p></div></section></section>\n</div>",
  "css": "\n.dz-atoll-market-bleed { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 30px 0 72px; overflow: hidden; }\n.dz-atoll-market-bleed .k { text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-atoll-market-bleed .cm { display: flex; align-items: center; gap: 20px; padding: 0 38px 30px; }\n.dz-atoll-market-bleed .rule { flex: 1; height: 1px; background: var(--border); }\n.dz-atoll-market-bleed .br { display: grid; grid-template-columns: repeat(12, 1fr); gap: 26px; align-items: center; padding: 0 38px; margin-bottom: 72px; }\n.dz-atoll-market-bleed .tx { grid-column: 1 / span 4; }\n.dz-atoll-market-bleed .im { grid-column: 7 / -1; margin: 0; }\n.dz-atoll-market-bleed .bleed-r { margin-right: -80px; }\n.dz-atoll-market-bleed .rev .im { grid-column: 1 / span 6; margin-left: -80px; margin-right: 0; }\n.dz-atoll-market-bleed .rev .tx { grid-column: 9 / -1; }\n.dz-atoll-market-bleed .im img { width: 100%; height: 420px; object-fit: cover; display: block; filter: var(--img-filter); box-shadow: 0 20px 50px -22px color-mix(in oklab, var(--foreground) 40%, transparent); }\n.dz-atoll-market-bleed h2 { font-family: var(--pv-display); font-weight: 400; font-size: 38px; line-height: 1.14; margin: 0 0 8px; letter-spacing: -.01em; }\n.dz-atoll-market-bleed .pr { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .02em; margin: 0 0 16px; }\n.dz-atoll-market-bleed .ds { margin: 0 0 16px; font-size: 14.5px; line-height: 1.58; color: var(--muted-foreground); }\n.dz-atoll-market-bleed .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; }\n.dz-atoll-market-bleed .sm { display: grid; grid-template-columns: repeat(12, 1fr); gap: 26px; padding: 0 38px; align-items: center; }\n.dz-atoll-market-bleed .sm figure { grid-column: 5 / span 3; margin: 0; }\n.dz-atoll-market-bleed .sm img { width: 100%; height: 260px; object-fit: cover; display: block; filter: var(--img-filter); box-shadow: 0 20px 50px -22px color-mix(in oklab, var(--foreground) 40%, transparent); }\n.dz-atoll-market-bleed .sm div { grid-column: 9 / span 3; }\n.dz-atoll-market-bleed .sm h2 { font-size: 24px; }\n@media (prefers-reduced-motion: reduce) { .dz-atoll-market-bleed *, .dz-atoll-market-bleed *::before, .dz-atoll-market-bleed *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\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"
}