{
  "id": "kiln-clay-shelf",
  "name": "Shelf Browse",
  "theme": "kiln-clay",
  "category": "Search & Browse",
  "description": "Browsing by glaze rather than by category, with the filter rail showing actual glaze swatches instead of colour names in a dropdown.",
  "layout": "A 220px rail of glaze swatch chips beside a three-up grid whose first tile is double width, so the featured piece is a shape difference and not a badge.",
  "modules": [
    {
      "key": "rail",
      "name": "Glaze rail",
      "html": "\n<aside class=\"rl\">\n  <span class=\"k\">Glaze</span>\n  <ul class=\"gz\"><li class=\"on\"><i style=\"background:var(--primary)\"></i>Plum</li><li><i style=\"background:var(--accent)\"></i>Ochre</li><li><i style=\"background:var(--chart-3)\"></i>Umber</li><li><i style=\"background:var(--chart-4)\"></i>Bone</li><li><i style=\"background:var(--chart-5)\"></i>Ash</li></ul>\n  <span class=\"k\">Form</span>\n  <ul class=\"fm\"><li>Bowls</li><li class=\"on\">Wide bowls</li><li>Beakers</li><li>Jugs</li><li>Vases</li><li>Plates</li></ul>\n  <span class=\"k\">Price</span>\n  <ul class=\"fm\"><li>Under £50</li><li class=\"on\">£50–£150</li><li>Over £150</li></ul>\n</aside>"
    },
    {
      "key": "bar",
      "name": "Result bar",
      "html": "\n<div class=\"rb\"><h1>Plum, wide bowls</h1><span class=\"ct\">11 pieces from 3 makers</span><select aria-label=\"Sort\"><option>Newest firing</option><option>Price, low to high</option><option>Maker</option></select></div>"
    },
    {
      "key": "grid",
      "name": "Shelf grid",
      "html": "\n<section class=\"gr\">\n  <figure class=\"wide\"><img src=\"{{ART glaze}}\" alt=\"{{ARTALT glaze}}\"><figcaption><span class=\"k\">Firing 214 · Sandoval-Reyes</span><b>Deep plum bowl, wide</b><span class=\"p\">£128</span></figcaption></figure>\n  <figure><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><figcaption><b>Plum bowl, shallow</b><span class=\"p\">£96</span></figcaption></figure>\n  <figure><img src=\"{{ART swatch}}\" alt=\"{{ARTALT swatch}}\"><figcaption><b>Plum over umber</b><span class=\"p\">£112</span></figcaption></figure>\n  <figure><img src=\"{{ART kiln}}\" alt=\"{{ARTALT kiln}}\"><figcaption><b>Plum, thin walled</b><span class=\"p\">£140</span></figcaption></figure>\n  <figure><img src=\"{{ART hands}}\" alt=\"{{ARTALT hands}}\"><figcaption><b>Plum, footed</b><span class=\"p\">£154</span></figcaption></figure>\n</section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "kiln-clay-shelf",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T19:50:29+09:00",
    "updatedAt": "2026-09-01T19:50:29+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/kiln-clay-shelf.json",
  "structure": "A 220px rail of glaze swatch chips beside a three-up grid whose first tile is double width, so the featured piece is a shape difference and not a badge.",
  "html": "<div class=\"dz dz-kiln-clay-shelf\" data-design=\"kiln-clay-shelf\" data-theme=\"kiln-clay\">\n<section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"Glaze rail\">\n<aside class=\"rl\">\n  <span class=\"k\">Glaze</span>\n  <ul class=\"gz\"><li class=\"on\"><i style=\"background:var(--primary)\"></i>Plum</li><li><i style=\"background:var(--accent)\"></i>Ochre</li><li><i style=\"background:var(--chart-3)\"></i>Umber</li><li><i style=\"background:var(--chart-4)\"></i>Bone</li><li><i style=\"background:var(--chart-5)\"></i>Ash</li></ul>\n  <span class=\"k\">Form</span>\n  <ul class=\"fm\"><li>Bowls</li><li class=\"on\">Wide bowls</li><li>Beakers</li><li>Jugs</li><li>Vases</li><li>Plates</li></ul>\n  <span class=\"k\">Price</span>\n  <ul class=\"fm\"><li>Under £50</li><li class=\"on\">£50–£150</li><li>Over £150</li></ul>\n</aside></section><section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Result bar\">\n<div class=\"rb\"><h1>Plum, wide bowls</h1><span class=\"ct\">11 pieces from 3 makers</span><select aria-label=\"Sort\"><option>Newest firing</option><option>Price, low to high</option><option>Maker</option></select></div></section><section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Shelf grid\">\n<section class=\"gr\">\n  <figure class=\"wide\"><img src=\"https://designlookbook.dev/assets/img/kiln-clay-glaze.webp\" alt=\"A plum glaze pooling in the base of a shallow bowl\"><figcaption><span class=\"k\">Firing 214 · Sandoval-Reyes</span><b>Deep plum bowl, wide</b><span class=\"p\">£128</span></figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/kiln-clay-hero.webp\" alt=\"Unfired clay vessels drying on a wooden board\"><figcaption><b>Plum bowl, shallow</b><span class=\"p\">£96</span></figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/kiln-clay-swatch.webp\" alt=\"Test tiles showing clay glazes from ochre to plum\"><figcaption><b>Plum over umber</b><span class=\"p\">£112</span></figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/kiln-clay-kiln.webp\" alt=\"The open door of a kiln with warm shelves inside\"><figcaption><b>Plum, thin walled</b><span class=\"p\">£140</span></figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/kiln-clay-hands.webp\" alt=\"Clay-covered hands shaping a vessel on a wheel\"><figcaption><b>Plum, footed</b><span class=\"p\">£154</span></figcaption></figure>\n</section></section>\n</div>",
  "css": "\n.dz-kiln-clay-shelf { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 34px; padding: 26px 32px 34px; align-content: start; }\n.dz-kiln-clay-shelf .rl { grid-row: 1 / 3; }\n.dz-kiln-clay-shelf .k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); display: block; margin-bottom: 10px; }\n.dz-kiln-clay-shelf .rl ul { list-style: none; margin: 0 0 24px; padding: 0; }\n.dz-kiln-clay-shelf .gz li, .dz-kiln-clay-shelf .fm li { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 8px 10px; border-radius: var(--pv-radius-sm); color: var(--muted-foreground); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }\n.dz-kiln-clay-shelf .gz li:hover, .dz-kiln-clay-shelf .fm li:hover { background: var(--secondary); color: var(--foreground); }\n.dz-kiln-clay-shelf .gz .on, .dz-kiln-clay-shelf .fm .on { background: var(--card); color: var(--foreground); border: var(--pv-bw) solid var(--border); }\n.dz-kiln-clay-shelf .gz i { width: 16px; height: 16px; border-radius: 50%; display: block; border: var(--pv-bw) solid var(--border); }\n.dz-kiln-clay-shelf .rb { display: flex; align-items: baseline; gap: 16px; padding-bottom: 20px; }\n.dz-kiln-clay-shelf .rb h1 { font-family: var(--pv-display); font-size: 32px; font-weight: 600; margin: 0; }\n.dz-kiln-clay-shelf .ct { font-family: var(--pv-mono); font-size: 12.5px; color: var(--muted-foreground); }\n.dz-kiln-clay-shelf .rb select { font: inherit; font-size: 13px; margin-left: auto; background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); padding: 8px 12px; color: var(--foreground); }\n.dz-kiln-clay-shelf .gr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }\n.dz-kiln-clay-shelf .gr figure { margin: 0; }\n.dz-kiln-clay-shelf .wide { grid-column: span 2; }\n.dz-kiln-clay-shelf .gr img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--pv-radius-md); filter: var(--img-filter); }\n.dz-kiln-clay-shelf .wide img { aspect-ratio: 16 / 9; }\n.dz-kiln-clay-shelf .gr figcaption { padding-top: 10px; display: flex; flex-direction: column; gap: 3px; }\n.dz-kiln-clay-shelf .gr b { font-family: var(--pv-display); font-size: 17px; font-weight: 600; }\n.dz-kiln-clay-shelf .wide b { font-size: 24px; }\n.dz-kiln-clay-shelf .p { font-family: var(--pv-mono); font-size: 14px; color: var(--primary); }\n@media (prefers-reduced-motion: reduce) { .dz-kiln-clay-shelf *, .dz-kiln-clay-shelf *::before, .dz-kiln-clay-shelf *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/kiln-clay.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;700&family=Karla:wght@400;500;600;700&family=Space+Mono:wght@400;500;600;700&display=swap"
}