{
  "id": "sleeve-notes-shelf",
  "name": "Shelf",
  "theme": "sleeve-notes",
  "category": "Search & Browse",
  "description": "Catalogue search across a square-only grid, with the filter rail using accent text for what is currently selected and a now-playing bar pinned at the foot.",
  "layout": "A 220px filter rail, a 4-up square grid, and a 72px now-playing bar carrying a 2-degree-rotated sleeve and a 2px progress rule.",
  "modules": [
    {
      "key": "q",
      "name": "Search line",
      "html": "\n<header class=\"sq\"><input value=\"marek\"><span class=\"ct mn\">11 releases · 3 artists · 2 out of print</span></header>"
    },
    {
      "key": "rail",
      "name": "Filter rail",
      "html": "\n<aside class=\"fr\"><span class=\"k\">Format</span><ul><li><a class=\"on\" href=\"#\">LP</a></li><li><a href=\"#\">12&quot;</a></li><li><a href=\"#\">7&quot;</a></li><li><a href=\"#\">Digital</a></li><li><a href=\"#\">Reissue</a></li></ul><span class=\"k\">Year</span><ul><li><a href=\"#\">2024—2026</a></li><li><a href=\"#\">2020—2023</a></li><li><a href=\"#\">2016—2019</a></li></ul><span class=\"k\">Availability</span><ul><li><a href=\"#\">In print</a></li><li><a href=\"#\">Out of print</a></li></ul></aside>"
    },
    {
      "key": "grid",
      "name": "Result grid",
      "html": "\n<section class=\"gd\">\n<article><figure class=\"sl\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure><h2>Undercoat</h2><p class=\"ar\">Iona Marek</p><p class=\"cat\">SRR-041</p></article>\n<article><figure class=\"sl\"><img src=\"{{ART press}}\" alt=\"{{ARTALT press}}\"></figure><h2>Skirting</h2><p class=\"ar\">Iona Marek</p><p class=\"cat\">SRR-031</p></article>\n<article><figure class=\"sl\"><img src=\"{{ART gear}}\" alt=\"{{ARTALT gear}}\"></figure><h2>Filled Hole</h2><p class=\"ar\">Iona Marek</p><p class=\"cat\">SRR-027</p></article>\n<article><figure class=\"sl lbx\"><img src=\"{{ART crowd}}\" alt=\"{{ARTALT crowd}}\"></figure><h2>Ground (I—IX)</h2><p class=\"ar\">Iona Marek</p><p class=\"cat\">SRR-024</p></article>\n<article><figure class=\"sl\"><img src=\"{{ART studio}}\" alt=\"{{ARTALT studio}}\"></figure><h2>Emulsion</h2><p class=\"ar\">Iona Marek</p><p class=\"cat\">SRR-019</p></article>\n<article><figure class=\"sl\"><img src=\"{{ART press}}\" alt=\"{{ARTALT press}}\"></figure><h2>Two Coats</h2><p class=\"ar\">Marek / Vance</p><p class=\"cat\">SRR-015</p></article>\n</section>"
    },
    {
      "key": "bar",
      "name": "Now playing bar",
      "html": "\n<footer class=\"np\"><figure class=\"sl tilt\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure><div class=\"in\"><p class=\"ti\">Filled Hole</p><p class=\"ar\">Iona Marek — Undercoat</p></div><div class=\"pg\"><span style=\"width:38%\"></span></div><span class=\"dr\">2:31 / 6:38</span></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "sleeve-notes-shelf",
    "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-shelf.json",
  "structure": "A 220px filter rail, a 4-up square grid, and a 72px now-playing bar carrying a 2-degree-rotated sleeve and a 2px progress rule.",
  "html": "<div class=\"dz dz-sleeve-notes-shelf\" data-design=\"sleeve-notes-shelf\" data-theme=\"sleeve-notes\">\n<section class=\"dz-mod\" data-mod=\"q\" aria-label=\"Search line\">\n<header class=\"sq\"><input value=\"marek\"><span class=\"ct mn\">11 releases · 3 artists · 2 out of print</span></header></section>\n<section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"Filter rail\">\n<aside class=\"fr\"><span class=\"k\">Format</span><ul><li><a class=\"on\" href=\"#\">LP</a></li><li><a href=\"#\">12&quot;</a></li><li><a href=\"#\">7&quot;</a></li><li><a href=\"#\">Digital</a></li><li><a href=\"#\">Reissue</a></li></ul><span class=\"k\">Year</span><ul><li><a href=\"#\">2024—2026</a></li><li><a href=\"#\">2020—2023</a></li><li><a href=\"#\">2016—2019</a></li></ul><span class=\"k\">Availability</span><ul><li><a href=\"#\">In print</a></li><li><a href=\"#\">Out of print</a></li></ul></aside></section>\n<section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Result grid\">\n<section class=\"gd\">\n<article><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><h2>Undercoat</h2><p class=\"ar\">Iona Marek</p><p class=\"cat\">SRR-041</p></article>\n<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>Skirting</h2><p class=\"ar\">Iona Marek</p><p class=\"cat\">SRR-031</p></article>\n<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>Filled Hole</h2><p class=\"ar\">Iona Marek</p><p class=\"cat\">SRR-027</p></article>\n<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>Ground (I—IX)</h2><p class=\"ar\">Iona Marek</p><p class=\"cat\">SRR-024</p></article>\n<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>Emulsion</h2><p class=\"ar\">Iona Marek</p><p class=\"cat\">SRR-019</p></article>\n<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>Two Coats</h2><p class=\"ar\">Marek / Vance</p><p class=\"cat\">SRR-015</p></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Now playing bar\">\n<footer class=\"np\"><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=\"in\"><p class=\"ti\">Filled Hole</p><p class=\"ar\">Iona Marek — Undercoat</p></div><div class=\"pg\"><span style=\"width:38%\"></span></div><span class=\"dr\">2:31 / 6:38</span></footer></section>\n</div>",
  "css": "\n.dz-sleeve-notes-shelf { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 30px 30px 102px; display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; position: relative; min-height: 620px; }\n.dz-sleeve-notes-shelf .k { text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); display: block; margin: 22px 0 8px; }\n.dz-sleeve-notes-shelf .mn { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; }\n.dz-sleeve-notes-shelf .sq { grid-column: 1 / -1; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }\n.dz-sleeve-notes-shelf .sq input { flex: 1; max-width: 440px; background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--foreground); font: inherit; font-family: var(--pv-display); font-weight: 500; letter-spacing: -.015em; font-size: 34px; padding: 4px 0; }\n.dz-sleeve-notes-shelf .sq input:focus { outline: none; border-bottom-color: var(--accent); }\n.dz-sleeve-notes-shelf .ct { color: var(--muted-foreground); }\n.dz-sleeve-notes-shelf .fr ul { list-style: none; margin: 0; padding: 0; }\n.dz-sleeve-notes-shelf .fr a { display: block; padding: 5px 0; color: var(--muted-foreground); text-decoration: none; font-size: 14px; }\n.dz-sleeve-notes-shelf .fr a.on { color: var(--accent); }\n.dz-sleeve-notes-shelf .fr .k:first-child { margin-top: 0; }\n.dz-sleeve-notes-shelf .gd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }\n\n.dz-sleeve-notes-shelf .sl { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--secondary); box-shadow: 1px 1px 0 0 var(--foreground); }\n.dz-sleeve-notes-shelf .sl img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-sleeve-notes-shelf .sl.lbx img { object-fit: contain; }\n.dz-sleeve-notes-shelf 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-shelf .ar { font-size: 13px; color: var(--muted-foreground); margin: 0 0 4px; }\n.dz-sleeve-notes-shelf .cat { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; color: var(--muted-foreground); margin: 0; }\n.dz-sleeve-notes-shelf .np { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; display: flex; align-items: center; gap: 16px; padding: 0 30px; border-top: 1px solid var(--border); background: var(--card); }\n.dz-sleeve-notes-shelf .np .sl { width: 56px; height: 56px; flex: none; }\n.dz-sleeve-notes-shelf .tilt { transform: rotate(2deg); }\n.dz-sleeve-notes-shelf .np .in { min-width: 200px; }\n.dz-sleeve-notes-shelf .np .ti { font-family: var(--pv-display); font-weight: 500; letter-spacing: -.015em; font-size: 16px; margin: 0; color: var(--accent); }\n.dz-sleeve-notes-shelf .np .ar { margin: 0; }\n.dz-sleeve-notes-shelf .pg { flex: 1; height: 2px; background: var(--border); position: relative; }\n.dz-sleeve-notes-shelf .pg span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); display: block; }\n.dz-sleeve-notes-shelf .dr { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .01em; margin-left: auto; }\n@media (prefers-reduced-motion: reduce) { .dz-sleeve-notes-shelf *, .dz-sleeve-notes-shelf *::before, .dz-sleeve-notes-shelf *::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"
}