{
  "id": "studio-vellum-atelier",
  "name": "Atelier Piece",
  "theme": "studio-vellum",
  "category": "Commerce",
  "description": "A luxury product page with no add-to-bag button in the first screen — the object is presented before it is priced.",
  "layout": "A 60/40 split where the image column is full-height and the right column holds only a name and a paragraph; price, size and purchase live below the fold in a ruled block.",
  "modules": [
    {
      "key": "plate",
      "name": "Object plate",
      "html": "\n<figure class=\"ob\"><img src=\"{{ART marble}}\" alt=\"{{ARTALT marble}}\"><figcaption>Piece No. 4 · one of nine</figcaption></figure>"
    },
    {
      "key": "presentation",
      "name": "Presentation",
      "html": "\n<div class=\"pr\">\n  <span class=\"k\">Atelier · Autumn</span>\n  <h1>Slab, Ivory</h1>\n  <p>Cut from a single block quarried in 2019 and left outside for four winters before it was worked. The vein was not chosen; it is where the block opened.</p>\n  <p class=\"sm\">Each of the nine is a different depth of the same stone, so no two are the same weight.</p>\n</div>"
    },
    {
      "key": "terms",
      "name": "Purchase block",
      "html": "\n<div class=\"tm\">\n  <dl><div><dt>Edition</dt><dd>Nine, numbered</dd></div><div><dt>Dimensions</dt><dd>420 × 280 × 40mm</dd></div><div><dt>Weight</dt><dd>11.2kg – 12.9kg</dd></div><div><dt>Lead time</dt><dd>Ships within 10 days</dd></div></dl>\n  <div class=\"buy\"><span class=\"price\">£2,400</span><button type=\"button\">Reserve this piece</button></div>\n  <p class=\"fine\">Reserving holds the piece for 72 hours without payment. We will call you.</p>\n</div>"
    },
    {
      "key": "also",
      "name": "From the same block",
      "html": "\n<footer class=\"al\"><span class=\"k\">From the same block</span><div class=\"row\"><a href=\"#\"><img src=\"{{ART vellum}}\" alt=\"{{ARTALT vellum}}\"><b>Piece No. 2</b><span>Reserved</span></a><a href=\"#\"><img src=\"{{ART gold}}\" alt=\"{{ARTALT gold}}\"><b>Piece No. 6</b><span>£2,400</span></a><a href=\"#\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><b>Piece No. 7</b><span>£2,650</span></a></div></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "studio-vellum-atelier",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:47:06+09:00",
    "updatedAt": "2026-08-29T18:47:06+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/studio-vellum-atelier.json",
  "structure": "A 60/40 split where the image column is full-height and the right column holds only a name and a paragraph; price, size and purchase live below the fold in a ruled block.",
  "html": "<div class=\"dz dz-studio-vellum-atelier\" data-design=\"studio-vellum-atelier\" data-theme=\"studio-vellum\">\n<div class=\"top\"><section class=\"dz-mod\" data-mod=\"plate\" aria-label=\"Object plate\">\n<figure class=\"ob\"><img src=\"https://designlookbook.dev/assets/img/studio-vellum-marble.webp\" alt=\"Ivory marble with a faint gold vein\"><figcaption>Piece No. 4 · one of nine</figcaption></figure></section><section class=\"dz-mod\" data-mod=\"presentation\" aria-label=\"Presentation\">\n<div class=\"pr\">\n  <span class=\"k\">Atelier · Autumn</span>\n  <h1>Slab, Ivory</h1>\n  <p>Cut from a single block quarried in 2019 and left outside for four winters before it was worked. The vein was not chosen; it is where the block opened.</p>\n  <p class=\"sm\">Each of the nine is a different depth of the same stone, so no two are the same weight.</p>\n</div></section></div><section class=\"dz-mod\" data-mod=\"terms\" aria-label=\"Purchase block\">\n<div class=\"tm\">\n  <dl><div><dt>Edition</dt><dd>Nine, numbered</dd></div><div><dt>Dimensions</dt><dd>420 × 280 × 40mm</dd></div><div><dt>Weight</dt><dd>11.2kg – 12.9kg</dd></div><div><dt>Lead time</dt><dd>Ships within 10 days</dd></div></dl>\n  <div class=\"buy\"><span class=\"price\">£2,400</span><button type=\"button\">Reserve this piece</button></div>\n  <p class=\"fine\">Reserving holds the piece for 72 hours without payment. We will call you.</p>\n</div></section><section class=\"dz-mod\" data-mod=\"also\" aria-label=\"From the same block\">\n<footer class=\"al\"><span class=\"k\">From the same block</span><div class=\"row\"><a href=\"#\"><img src=\"https://designlookbook.dev/assets/img/studio-vellum-vellum.webp\" alt=\"A folded sheet of ivory vellum resting on a dark slate surface\"><b>Piece No. 2</b><span>Reserved</span></a><a href=\"#\"><img src=\"https://designlookbook.dev/assets/img/studio-vellum-gold.webp\" alt=\"Torn gold leaf on an ivory ground\"><b>Piece No. 6</b><span>£2,400</span></a><a href=\"#\"><img src=\"https://designlookbook.dev/assets/img/studio-vellum-hero.webp\" alt=\"A plaster cast in an ivory room with vast empty wall\"><b>Piece No. 7</b><span>£2,650</span></a></div></footer></section>\n</div>",
  "css": "\n.dz-studio-vellum-atelier { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-studio-vellum-atelier .top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }\n.dz-studio-vellum-atelier .ob { margin: 0; }\n.dz-studio-vellum-atelier .ob img { width: 100%; height: 420px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-studio-vellum-atelier .ob figcaption { padding: 10px 0 0 44px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-studio-vellum-atelier .pr { padding: 50px 44px 0 44px; }\n.dz-studio-vellum-atelier .k { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-studio-vellum-atelier .pr h1 { font-family: var(--pv-display); font-size: 52px; font-weight: 400; letter-spacing: -.025em; margin: 12px 0 20px; }\n.dz-studio-vellum-atelier .pr p { margin: 0 0 14px; font-size: 15px; line-height: 1.8; color: var(--muted-foreground); max-width: 34ch; }\n.dz-studio-vellum-atelier .pr .sm { font-size: 13px; }\n.dz-studio-vellum-atelier .tm { max-width: 46rem; margin: 44px auto 0; padding: 0 44px; }\n.dz-studio-vellum-atelier .tm dl { margin: 0 0 26px; border-top: var(--pv-bw) solid var(--foreground); }\n.dz-studio-vellum-atelier .tm dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-studio-vellum-atelier .tm dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); padding-top: 2px; }\n.dz-studio-vellum-atelier .tm dd { margin: 0; font-size: 14.5px; }\n.dz-studio-vellum-atelier .buy { display: flex; align-items: center; gap: 26px; }\n.dz-studio-vellum-atelier .price { font-family: var(--pv-display); font-size: 36px; }\n.dz-studio-vellum-atelier .buy button { font: inherit; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; padding: 15px 34px; border: var(--pv-bw) solid var(--foreground); background: none; color: var(--foreground); cursor: pointer; transition: background var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease); }\n.dz-studio-vellum-atelier .buy button:hover { background: var(--foreground); color: var(--background); }\n.dz-studio-vellum-atelier .fine { margin: 14px 0 0; font-size: 12px; color: var(--muted-foreground); }\n.dz-studio-vellum-atelier .al { max-width: 46rem; margin: 44px auto 0; padding: 0 44px 44px; }\n.dz-studio-vellum-atelier .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 16px; }\n.dz-studio-vellum-atelier .row a { text-decoration: none; color: var(--foreground); }\n.dz-studio-vellum-atelier .row img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; filter: var(--img-filter); transition: filter var(--dur-slow) var(--ease); }\n.dz-studio-vellum-atelier .row a:hover img { filter: none; }\n.dz-studio-vellum-atelier .row b { display: block; font-family: var(--pv-display); font-size: 17px; font-weight: 400; margin-top: 10px; }\n.dz-studio-vellum-atelier .row span { font-size: 12px; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-studio-vellum-atelier *, .dz-studio-vellum-atelier *::before, .dz-studio-vellum-atelier *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/studio-vellum.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}