{
  "id": "sleeve-notes-release",
  "name": "Release",
  "theme": "sleeve-notes",
  "category": "Editorial",
  "description": "A release page where the sleeve sticks at 480px on the left and the track list on the right has the only hard right edge in the system, made of durations.",
  "layout": "A sticky 480px 1:1 sleeve and a 62ch notes column; track lines are title flush left, duration flush right, with nothing between them but space.",
  "modules": [
    {
      "key": "sleeve",
      "name": "Sticky sleeve",
      "html": "\n<aside class=\"sk\"><figure class=\"sl\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure><p class=\"mt\"><span class=\"cat\">SRR-041</span> <span class=\"fmt\">LP · 180g</span></p><p class=\"cat\">Released 14 March 2026 · 41:22</p><button class=\"pri\">Buy the record — £24</button></aside>"
    },
    {
      "key": "head",
      "name": "Release title",
      "html": "\n<header class=\"rh\"><span class=\"k\">Iona Marek</span><h1>Undercoat</h1><p class=\"ld\">Nine pieces made from recordings of paint being scraped off institutional walls, then played back through the rooms they were taken from.</p></header>"
    },
    {
      "key": "tracks",
      "name": "Track list",
      "html": "\n<section class=\"tl\"><span class=\"k\">Side A</span>\n<p class=\"tk\"><span class=\"ti\"><sup>1</sup>Ground</span><span class=\"dr\">4:12</span></p>\n<p class=\"tk playing\"><span class=\"ti\"><sup>2</sup>Filled Hole</span><span class=\"dr\">6:38</span></p>\n<p class=\"tk\"><span class=\"ti\"><sup>3</sup>Skirting (Kilcarn)</span><span class=\"dr\">3:51</span></p>\n<p class=\"tk\"><span class=\"ti\"><sup>4</sup>Undercoat I</span><span class=\"dr\">5:04</span></p>\n<span class=\"k side\">Side B</span>\n<p class=\"tk\"><span class=\"ti\"><sup>5</sup>Undercoat VI</span><span class=\"dr\">7:20</span></p>\n<p class=\"tk\"><span class=\"ti\"><sup>6</sup>Screw Hole</span><span class=\"dr\">2:44</span></p>\n<p class=\"tk\"><span class=\"ti\"><sup>7</sup>Gallery Two, Empty</span><span class=\"dr\">6:11</span></p>\n<p class=\"tk\"><span class=\"ti\"><sup>8</sup>Repainted</span><span class=\"dr\">5:22</span></p>\n</section>"
    },
    {
      "key": "notes",
      "name": "Sleeve notes",
      "html": "\n<section class=\"nt\"><span class=\"k\">Notes</span><p>Recorded over four nights in Gallery 2 of Kunsthalle Kilcarn while the room was being stripped, using contact microphones on the wall itself and a single omni at the far end.</p><p>Nothing here is synthesised. The low tone that runs through <em>Undercoat VI</em> is the building's ventilation, which could not be switched off and eventually became the piece.</p><p class=\"cr\">Mastered by P. Nkemdirim · Cut at Slade Row · Sleeve by Nuala Rennick</p></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "sleeve-notes-release",
    "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-release.json",
  "structure": "A sticky 480px 1:1 sleeve and a 62ch notes column; track lines are title flush left, duration flush right, with nothing between them but space.",
  "html": "<div class=\"dz dz-sleeve-notes-release\" data-design=\"sleeve-notes-release\" data-theme=\"sleeve-notes\">\n<section class=\"dz-mod\" data-mod=\"sleeve\" aria-label=\"Sticky sleeve\">\n<aside class=\"sk\"><figure class=\"sl\"><img src=\"https://designlookbook.dev/assets/img/sleeve-notes-hero.webp\" alt=\"Abstract violet and magenta shapes printed on cream stock\"></figure><p class=\"mt\"><span class=\"cat\">SRR-041</span> <span class=\"fmt\">LP · 180g</span></p><p class=\"cat\">Released 14 March 2026 · 41:22</p><button class=\"pri\">Buy the record — £24</button></aside></section>\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Release title\">\n<header class=\"rh\"><span class=\"k\">Iona Marek</span><h1>Undercoat</h1><p class=\"ld\">Nine pieces made from recordings of paint being scraped off institutional walls, then played back through the rooms they were taken from.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"tracks\" aria-label=\"Track list\">\n<section class=\"tl\"><span class=\"k\">Side A</span>\n<p class=\"tk\"><span class=\"ti\"><sup>1</sup>Ground</span><span class=\"dr\">4:12</span></p>\n<p class=\"tk playing\"><span class=\"ti\"><sup>2</sup>Filled Hole</span><span class=\"dr\">6:38</span></p>\n<p class=\"tk\"><span class=\"ti\"><sup>3</sup>Skirting (Kilcarn)</span><span class=\"dr\">3:51</span></p>\n<p class=\"tk\"><span class=\"ti\"><sup>4</sup>Undercoat I</span><span class=\"dr\">5:04</span></p>\n<span class=\"k side\">Side B</span>\n<p class=\"tk\"><span class=\"ti\"><sup>5</sup>Undercoat VI</span><span class=\"dr\">7:20</span></p>\n<p class=\"tk\"><span class=\"ti\"><sup>6</sup>Screw Hole</span><span class=\"dr\">2:44</span></p>\n<p class=\"tk\"><span class=\"ti\"><sup>7</sup>Gallery Two, Empty</span><span class=\"dr\">6:11</span></p>\n<p class=\"tk\"><span class=\"ti\"><sup>8</sup>Repainted</span><span class=\"dr\">5:22</span></p>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"notes\" aria-label=\"Sleeve notes\">\n<section class=\"nt\"><span class=\"k\">Notes</span><p>Recorded over four nights in Gallery 2 of Kunsthalle Kilcarn while the room was being stripped, using contact microphones on the wall itself and a single omni at the far end.</p><p>Nothing here is synthesised. The low tone that runs through <em>Undercoat VI</em> is the building's ventilation, which could not be switched off and eventually became the piece.</p><p class=\"cr\">Mastered by P. Nkemdirim · Cut at Slade Row · Sleeve by Nuala Rennick</p></section></section>\n</div>",
  "css": "\n.dz-sleeve-notes-release { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 30px; display: grid; grid-template-columns: 480px 1fr; gap: 48px; align-items: start; }\n.dz-sleeve-notes-release .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); }\n.dz-sleeve-notes-release .sk { grid-row: 1 / span 3; position: sticky; top: 30px; }\n\n.dz-sleeve-notes-release .sl { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--secondary); box-shadow: 1px 1px 0 0 var(--foreground); }\n.dz-sleeve-notes-release .sl img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-sleeve-notes-release .sl.lbx img { object-fit: contain; }\n.dz-sleeve-notes-release .mt { margin: 14px 0 4px; display: flex; gap: 10px; align-items: baseline; }\n.dz-sleeve-notes-release .cat { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; color: var(--muted-foreground); margin: 0; }\n.dz-sleeve-notes-release .fmt { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; color: var(--accent); }\n.dz-sleeve-notes-release .pri { width: 100%; margin-top: 18px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 1px; padding: 12px; font: inherit; text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; cursor: pointer; }\n.dz-sleeve-notes-release h1 { font-family: var(--pv-display); font-weight: 500; letter-spacing: -.015em; font-size: 68px; line-height: 1.02; letter-spacing: -.025em; margin: 8px 0 12px; }\n.dz-sleeve-notes-release .ld { font-size: 16px; line-height: 1.62; margin: 0; max-width: 62ch; }\n.dz-sleeve-notes-release .tl { max-width: 62ch; }\n.dz-sleeve-notes-release .side { display: block; margin-top: 24px; }\n.dz-sleeve-notes-release .tk { display: flex; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--border); margin: 0; font-size: 15px; }\n.dz-sleeve-notes-release .ti sup { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; color: var(--muted-foreground); margin-right: 10px; }\n.dz-sleeve-notes-release .dr { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; margin-left: auto; }\n.dz-sleeve-notes-release .playing .ti, .dz-sleeve-notes-release .playing .dr, .dz-sleeve-notes-release .playing sup { color: var(--accent); }\n.dz-sleeve-notes-release .nt { max-width: 62ch; }\n.dz-sleeve-notes-release .nt p { font-size: 14.5px; line-height: 1.66; margin: 10px 0 0; color: var(--muted-foreground); }\n.dz-sleeve-notes-release .nt em { font-style: italic; }\n.dz-sleeve-notes-release .cr { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; margin-top: 18px; }\n@media (prefers-reduced-motion: reduce) { .dz-sleeve-notes-release *, .dz-sleeve-notes-release *::before, .dz-sleeve-notes-release *::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"
}