{
  "id": "sleeve-notes-front",
  "name": "Front",
  "theme": "sleeve-notes",
  "category": "Landing",
  "description": "A label front page with no wide hero at all: the newest release is a square, the page is squares, and the newest thing is marked in magenta.",
  "layout": "A single large 1:1 sleeve beside its notes, then a square grid of the rest, with no full-width image anywhere on the page.",
  "modules": [
    {
      "key": "new",
      "name": "New release",
      "html": "\n<header class=\"nw\"><figure class=\"sl tilt\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure><div class=\"tx\"><span class=\"k now\">Out now</span><h1>Undercoat</h1><p class=\"ar\">Iona Marek · SRR-041 · LP, 180g</p><p>Nine pieces made from recordings of paint being scraped off institutional walls, then played back through the rooms they were taken from. Pressed in Kilcarn, four hundred copies.</p><div class=\"cta\"><button class=\"pri\">Buy — £24</button><a class=\"lk\" href=\"#\">Listen</a></div></div></header>"
    },
    {
      "key": "rest",
      "name": "Recent squares",
      "html": "\n<section class=\"gd\"><article><figure class=\"sl\"><img src=\"{{ART press}}\" alt=\"{{ARTALT press}}\"></figure><h2>Ground Loop</h2><p class=\"ar\">Teodor Vance</p><p class=\"cat\">SRR-040</p></article><article><figure class=\"sl\"><img src=\"{{ART gear}}\" alt=\"{{ARTALT gear}}\"></figure><h2>Forty-One Minutes</h2><p class=\"ar\">Teodor Vance</p><p class=\"cat\">SRR-038</p></article><article><figure class=\"sl lbx\"><img src=\"{{ART crowd}}\" alt=\"{{ARTALT crowd}}\"></figure><h2>Kilcarn Tapes, Vol. 2</h2><p class=\"ar\">Various</p><p class=\"cat\">SRR-036</p></article><article><figure class=\"sl\"><img src=\"{{ART studio}}\" alt=\"{{ARTALT studio}}\"></figure><h2>Room Tone</h2><p class=\"ar\">Nuala Rennick</p><p class=\"cat\">SRR-034</p></article></section>"
    },
    {
      "key": "live",
      "name": "Live dates",
      "html": "\n<section class=\"lv\"><span class=\"k\">Live</span>\n<p class=\"tk\"><span class=\"ti\">Kunsthalle Kilcarn <em>Marek, solo</em></span><span class=\"dr\">22 Mar</span></p>\n<p class=\"tk\"><span class=\"ti\">Slade Row <em>Vance / Rennick</em></span><span class=\"dr\">04 Apr</span></p>\n<p class=\"tk\"><span class=\"ti\">Bergen Kunsthall <em>Marek, solo</em></span><span class=\"dr\">17 May</span></p>\n</section>"
    },
    {
      "key": "sub",
      "name": "Subscription",
      "html": "\n<footer class=\"sb\"><div><span class=\"k\">Every record, posted</span><p>Six or seven a year, sent the week they are cut, at less than the shop price.</p></div><button class=\"pri\">Subscribe</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "sleeve-notes-front",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:23:14+09:00",
    "updatedAt": "2026-09-02T01:23:14+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/sleeve-notes-front.json",
  "structure": "A single large 1:1 sleeve beside its notes, then a square grid of the rest, with no full-width image anywhere on the page.",
  "html": "<div class=\"dz dz-sleeve-notes-front\" data-design=\"sleeve-notes-front\" data-theme=\"sleeve-notes\">\n<section class=\"dz-mod\" data-mod=\"new\" aria-label=\"New release\">\n<header class=\"nw\"><figure class=\"sl tilt\"><img src=\"https://designlookbook.dev/assets/img/sleeve-notes-hero.webp\" alt=\"Abstract violet and magenta shapes printed on cream stock\"></figure><div class=\"tx\"><span class=\"k now\">Out now</span><h1>Undercoat</h1><p class=\"ar\">Iona Marek · SRR-041 · LP, 180g</p><p>Nine pieces made from recordings of paint being scraped off institutional walls, then played back through the rooms they were taken from. Pressed in Kilcarn, four hundred copies.</p><div class=\"cta\"><button class=\"pri\">Buy — £24</button><a class=\"lk\" href=\"#\">Listen</a></div></div></header></section>\n<section class=\"dz-mod\" data-mod=\"rest\" aria-label=\"Recent squares\">\n<section class=\"gd\"><article><figure class=\"sl\"><img src=\"https://designlookbook.dev/assets/img/sleeve-notes-press.webp\" alt=\"A stack of blank cream record sleeves seen from the front\"></figure><h2>Ground Loop</h2><p class=\"ar\">Teodor Vance</p><p class=\"cat\">SRR-040</p></article><article><figure class=\"sl\"><img src=\"https://designlookbook.dev/assets/img/sleeve-notes-gear.webp\" alt=\"A turntable tonearm on a record, close and warm\"></figure><h2>Forty-One Minutes</h2><p class=\"ar\">Teodor Vance</p><p class=\"cat\">SRR-038</p></article><article><figure class=\"sl lbx\"><img src=\"https://designlookbook.dev/assets/img/sleeve-notes-crowd.webp\" alt=\"A dark crowd lit from behind in magenta\"></figure><h2>Kilcarn Tapes, Vol. 2</h2><p class=\"ar\">Various</p><p class=\"cat\">SRR-036</p></article><article><figure class=\"sl\"><img src=\"https://designlookbook.dev/assets/img/sleeve-notes-studio.webp\" alt=\"A mixing desk in a dim studio with violet light\"></figure><h2>Room Tone</h2><p class=\"ar\">Nuala Rennick</p><p class=\"cat\">SRR-034</p></article></section></section>\n<section class=\"dz-mod\" data-mod=\"live\" aria-label=\"Live dates\">\n<section class=\"lv\"><span class=\"k\">Live</span>\n<p class=\"tk\"><span class=\"ti\">Kunsthalle Kilcarn <em>Marek, solo</em></span><span class=\"dr\">22 Mar</span></p>\n<p class=\"tk\"><span class=\"ti\">Slade Row <em>Vance / Rennick</em></span><span class=\"dr\">04 Apr</span></p>\n<p class=\"tk\"><span class=\"ti\">Bergen Kunsthall <em>Marek, solo</em></span><span class=\"dr\">17 May</span></p>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"sub\" aria-label=\"Subscription\">\n<footer class=\"sb\"><div><span class=\"k\">Every record, posted</span><p>Six or seven a year, sent the week they are cut, at less than the shop price.</p></div><button class=\"pri\">Subscribe</button></footer></section>\n</div>",
  "css": "\n.dz-sleeve-notes-front { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 30px; }\n.dz-sleeve-notes-front .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); display: block; margin-bottom: 10px; }\n.dz-sleeve-notes-front .now { color: var(--accent); }\n.dz-sleeve-notes-front .nw { display: grid; grid-template-columns: 420px 1fr; gap: 44px; align-items: center; margin-bottom: 44px; }\n\n.dz-sleeve-notes-front .sl { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--secondary); box-shadow: 1px 1px 0 0 var(--foreground); }\n.dz-sleeve-notes-front .sl img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-sleeve-notes-front .sl.lbx img { object-fit: contain; }\n.dz-sleeve-notes-front .tilt { transform: rotate(2deg); }\n.dz-sleeve-notes-front h1 { font-family: var(--pv-display); font-weight: 500; letter-spacing: -.015em; font-size: 68px; line-height: 1.02; letter-spacing: -.025em; margin: 0 0 8px; }\n.dz-sleeve-notes-front .ar { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; color: var(--muted-foreground); margin: 0 0 14px; }\n.dz-sleeve-notes-front .nw p { font-size: 16px; line-height: 1.62; margin: 0 0 20px; max-width: 56ch; }\n.dz-sleeve-notes-front .cta { display: flex; align-items: center; gap: 18px; }\n.dz-sleeve-notes-front .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 1px; padding: 12px 20px; font: inherit; text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; cursor: pointer; }\n.dz-sleeve-notes-front .lk { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }\n.dz-sleeve-notes-front .gd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 44px; }\n.dz-sleeve-notes-front h2 { font-family: var(--pv-display); font-weight: 500; letter-spacing: -.015em; font-size: 20px; line-height: 1.2; margin: 12px 0 2px; }\n.dz-sleeve-notes-front .gd .ar { font-size: 13px; font-family: var(--pv-body); letter-spacing: 0; margin: 0 0 4px; }\n.dz-sleeve-notes-front .cat { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; color: var(--muted-foreground); margin: 0; }\n.dz-sleeve-notes-front .lv { max-width: 62ch; margin-bottom: 44px; }\n.dz-sleeve-notes-front .tk { display: flex; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border); margin: 0; font-size: 16px; }\n.dz-sleeve-notes-front .ti em { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; font-style: normal; color: var(--muted-foreground); margin-left: 10px; }\n.dz-sleeve-notes-front .dr { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; margin-left: auto; }\n.dz-sleeve-notes-front .sb { display: flex; align-items: center; gap: 24px; padding-top: 20px; border-top: 1px solid var(--border); }\n.dz-sleeve-notes-front .sb p { margin: 0; font-size: 15px; color: var(--muted-foreground); }\n.dz-sleeve-notes-front .sb .pri { margin-left: auto; }\n@media (prefers-reduced-motion: reduce) { .dz-sleeve-notes-front *, .dz-sleeve-notes-front *::before, .dz-sleeve-notes-front *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/sleeve-notes.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;700&family=Epilogue:wght@400;500;600;700&family=Chivo+Mono:wght@400;500;600;700&display=swap"
}