{
  "id": "kiln-clay-object",
  "name": "Object Page",
  "theme": "kiln-clay",
  "category": "Commerce",
  "description": "A single made object given the whole screen, with the firing details treated as part of the description rather than as a spec table nobody reads.",
  "layout": "A 7:5 split where the photograph bleeds off the left margin entirely and the buying column sits in a sunken panel that stops well short of the right edge.",
  "modules": [
    {
      "key": "nav",
      "name": "Navigation",
      "html": "\n<header class=\"nv\"><span class=\"br\">Kiln &amp; Clay</span><nav><a href=\"#\">Shop</a><a href=\"#\">Makers</a><a href=\"#\">Workshops</a><a href=\"#\">Journal</a></nav><span class=\"bag\">Bag · 2</span></header>"
    },
    {
      "key": "photo",
      "name": "Object photograph",
      "html": "\n<figure class=\"ph\"><img src=\"{{ART glaze}}\" alt=\"{{ARTALT glaze}}\"><figcaption>Firing 214 · reduction · cone 10</figcaption></figure>"
    },
    {
      "key": "buy",
      "name": "Buying panel",
      "html": "\n<div class=\"by\"><span class=\"k\">Stoneware · one of four</span>\n<h1>Deep plum bowl, wide</h1>\n<p class=\"price\">£128</p>\n<p>Thrown and glazed by Yumi Sandoval-Reyes at Marsh Lane. The plum breaks to umber where the glaze runs thin over the throwing rings, so no two are the same depth of colour.</p>\n<dl><div><dt>Diameter</dt><dd>240 mm</dd></div><div><dt>Height</dt><dd>96 mm</dd></div><div><dt>Weight</dt><dd>780 g</dd></div><div><dt>Firing</dt><dd>Reduction, cone 10</dd></div></dl>\n<button type=\"button\" class=\"go\">Add to bag</button>\n<span class=\"fine\">Dishwasher safe. Not for direct heat. Ships in five days.</span></div>"
    },
    {
      "key": "more",
      "name": "From the same firing",
      "html": "\n<section class=\"mr\"><h2 class=\"sh\">From the same firing</h2>\n<div class=\"row\">\n  <figure><img src=\"{{ART swatch}}\" alt=\"{{ARTALT swatch}}\"><figcaption><b>Plum beaker</b><span class=\"p\">£46</span></figcaption></figure>\n  <figure><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><figcaption><b>Umber jug</b><span class=\"p\">£92</span></figcaption></figure>\n  <figure><img src=\"{{ART kiln}}\" alt=\"{{ARTALT kiln}}\"><figcaption><b>Narrow vase</b><span class=\"p\">£74</span></figcaption></figure>\n</div></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "kiln-clay-object",
    "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-object.json",
  "structure": "A 7:5 split where the photograph bleeds off the left margin entirely and the buying column sits in a sunken panel that stops well short of the right edge.",
  "html": "<div class=\"dz dz-kiln-clay-object\" data-design=\"kiln-clay-object\" data-theme=\"kiln-clay\">\n<section class=\"dz-mod\" data-mod=\"nav\" aria-label=\"Navigation\">\n<header class=\"nv\"><span class=\"br\">Kiln &amp; Clay</span><nav><a href=\"#\">Shop</a><a href=\"#\">Makers</a><a href=\"#\">Workshops</a><a href=\"#\">Journal</a></nav><span class=\"bag\">Bag · 2</span></header></section><section class=\"dz-mod\" data-mod=\"photo\" aria-label=\"Object photograph\">\n<figure class=\"ph\"><img src=\"https://designlookbook.dev/assets/img/kiln-clay-glaze.webp\" alt=\"A plum glaze pooling in the base of a shallow bowl\"><figcaption>Firing 214 · reduction · cone 10</figcaption></figure></section><section class=\"dz-mod\" data-mod=\"buy\" aria-label=\"Buying panel\">\n<div class=\"by\"><span class=\"k\">Stoneware · one of four</span>\n<h1>Deep plum bowl, wide</h1>\n<p class=\"price\">£128</p>\n<p>Thrown and glazed by Yumi Sandoval-Reyes at Marsh Lane. The plum breaks to umber where the glaze runs thin over the throwing rings, so no two are the same depth of colour.</p>\n<dl><div><dt>Diameter</dt><dd>240 mm</dd></div><div><dt>Height</dt><dd>96 mm</dd></div><div><dt>Weight</dt><dd>780 g</dd></div><div><dt>Firing</dt><dd>Reduction, cone 10</dd></div></dl>\n<button type=\"button\" class=\"go\">Add to bag</button>\n<span class=\"fine\">Dishwasher safe. Not for direct heat. Ships in five days.</span></div></section><section class=\"dz-mod\" data-mod=\"more\" aria-label=\"From the same firing\">\n<section class=\"mr\"><h2 class=\"sh\">From the same firing</h2>\n<div class=\"row\">\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 beaker</b><span class=\"p\">£46</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>Umber jug</b><span class=\"p\">£92</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>Narrow vase</b><span class=\"p\">£74</span></figcaption></figure>\n</div></section></section>\n</div>",
  "css": "\n.dz-kiln-clay-object { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 7fr 5fr; column-gap: 40px; padding-right: 32px; }\n.dz-kiln-clay-object .nv { grid-column: 1 / -1; display: flex; align-items: center; gap: 26px; padding: 20px 0 20px 32px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-kiln-clay-object .br { font-family: var(--pv-display); font-size: 23px; font-weight: 600; }\n.dz-kiln-clay-object .nv nav { display: flex; gap: 22px; margin-left: 16px; }\n.dz-kiln-clay-object .nv a { font-size: 14px; color: var(--muted-foreground); text-decoration: none; }\n.dz-kiln-clay-object .nv a:hover { color: var(--primary); }\n.dz-kiln-clay-object .bag { margin-left: auto; font-family: var(--pv-mono); font-size: 12.5px; }\n.dz-kiln-clay-object .ph { margin: 0; }\n.dz-kiln-clay-object .ph img { width: 100%; height: 400px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-kiln-clay-object .ph figcaption { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); padding: 10px 0 0 32px; }\n.dz-kiln-clay-object .by { background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); align-self: start; margin-top: 34px; padding: 26px 26px 24px; position: relative; }\n.dz-kiln-clay-object .by::before { content: \"\"; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px; background: var(--accent); }\n.dz-kiln-clay-object .k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-kiln-clay-object .by h1 { font-family: var(--pv-display); font-size: 34px; font-weight: 600; line-height: 1.1; margin: 10px 0 6px; }\n.dz-kiln-clay-object .price { font-family: var(--pv-mono); font-size: 26px; color: var(--primary); margin: 0 0 16px; }\n.dz-kiln-clay-object .by p { font-size: 15.5px; line-height: 1.6; color: var(--muted-foreground); margin: 0 0 18px; }\n.dz-kiln-clay-object .by dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 0 0 22px; }\n.dz-kiln-clay-object .by dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 3px; }\n.dz-kiln-clay-object .by dd { margin: 0; font-family: var(--pv-mono); font-size: 14px; }\n.dz-kiln-clay-object .go { font: inherit; font-size: 15px; width: 100%; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: var(--pv-radius-md); padding: 14px; cursor: pointer; transition: filter var(--dur) var(--ease); }\n.dz-kiln-clay-object .go:hover { filter: brightness(.9); }\n.dz-kiln-clay-object .fine { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); padding-top: 12px; }\n.dz-kiln-clay-object .mr { grid-column: 1 / -1; padding: 44px 0 34px 32px; }\n.dz-kiln-clay-object .sh { font-family: var(--pv-display); font-size: 24px; font-weight: 600; margin: 0 0 18px; }\n.dz-kiln-clay-object .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }\n.dz-kiln-clay-object .row figure { margin: 0; }\n.dz-kiln-clay-object .row 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-object .row figcaption { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; }\n.dz-kiln-clay-object .row b { font-family: var(--pv-display); font-size: 17px; font-weight: 600; }\n.dz-kiln-clay-object .p { font-family: var(--pv-mono); font-size: 14px; color: var(--primary); }\n@media (prefers-reduced-motion: reduce) { .dz-kiln-clay-object *, .dz-kiln-clay-object *::before, .dz-kiln-clay-object *::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"
}