{
  "id": "pearl-atelier-piece",
  "name": "Piece Page",
  "theme": "pearl-atelier",
  "category": "Commerce",
  "description": "A made-to-order garment page where the size choice is a row of pill outlines and the lead time is stated before the price, because that is the real question.",
  "layout": "A 6:6 split with the arch-masked photograph running from the very top edge on the left and the buying column floating in a pill card that overlaps its lower corner.",
  "modules": [
    {
      "key": "nav",
      "name": "Navigation",
      "html": "\n<header class=\"nv\"><span class=\"br\">Pearl</span><nav><a href=\"#\">Atelier</a><a href=\"#\">Ready to wear</a><a href=\"#\">Made to order</a><a href=\"#\">Appointments</a></nav><span class=\"bag\">Bag · 1</span></header>"
    },
    {
      "key": "photo",
      "name": "Arch photograph",
      "html": "\n<figure class=\"ph\"><img src=\"{{ART arch}}\" alt=\"{{ARTALT arch}}\"><figcaption>Second fitting, atelier, August.</figcaption></figure>"
    },
    {
      "key": "buy",
      "name": "Buying column",
      "html": "\n<div class=\"by\"><span class=\"k\">Made to order · four to six weeks</span>\n<h1>The Marsh coat, rose wool</h1>\n<p class=\"pr\">£1,240</p>\n<p>Double-faced wool from a mill in Biella, cut with no lining because the cloth does not need one. Every coat is made after it is ordered, by one of three people, whose name is on the label.</p>\n<div class=\"sz\"><span class=\"k\">Size</span><div class=\"opts\"><button type=\"button\">6</button><button type=\"button\">8</button><button type=\"button\" class=\"on\">10</button><button type=\"button\">12</button><button type=\"button\">14</button><button type=\"button\">16</button></div></div>\n<div class=\"cl\"><span class=\"k\">Cloth</span><div class=\"sw\"><i class=\"c1 on\"></i><i class=\"c2\"></i><i class=\"c3\"></i><i class=\"c4\"></i></div></div>\n<button type=\"button\" class=\"go\">Begin an order</button>\n<span class=\"fine\">A 30% deposit is taken now. The balance is due when it ships.</span></div>"
    },
    {
      "key": "detail",
      "name": "Making detail",
      "html": "\n<section class=\"dt\"><h2 class=\"sh\">How it is made</h2>\n<div class=\"row\">\n  <figure><img src=\"{{ART thread}}\" alt=\"{{ARTALT thread}}\"><figcaption><b>Cloth chosen</b><span class=\"m\">Week one</span></figcaption></figure>\n  <figure><img src=\"{{ART pins}}\" alt=\"{{ARTALT pins}}\"><figcaption><b>Toile fitted</b><span class=\"m\">Week two</span></figcaption></figure>\n  <figure><img src=\"{{ART swatch}}\" alt=\"{{ARTALT swatch}}\"><figcaption><b>Cut and made</b><span class=\"m\">Weeks three to five</span></figcaption></figure>\n</div></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "pearl-atelier-piece",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T20:10:44+09:00",
    "updatedAt": "2026-09-01T20:10:44+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/pearl-atelier-piece.json",
  "structure": "A 6:6 split with the arch-masked photograph running from the very top edge on the left and the buying column floating in a pill card that overlaps its lower corner.",
  "html": "<div class=\"dz dz-pearl-atelier-piece\" data-design=\"pearl-atelier-piece\" data-theme=\"pearl-atelier\">\n<section class=\"dz-mod\" data-mod=\"nav\" aria-label=\"Navigation\">\n<header class=\"nv\"><span class=\"br\">Pearl</span><nav><a href=\"#\">Atelier</a><a href=\"#\">Ready to wear</a><a href=\"#\">Made to order</a><a href=\"#\">Appointments</a></nav><span class=\"bag\">Bag · 1</span></header></section><section class=\"dz-mod\" data-mod=\"photo\" aria-label=\"Arch photograph\">\n<figure class=\"ph\"><img src=\"https://designlookbook.dev/assets/img/pearl-atelier-arch.webp\" alt=\"A dress form in a pale rose atelier\"><figcaption>Second fitting, atelier, August.</figcaption></figure></section><section class=\"dz-mod\" data-mod=\"buy\" aria-label=\"Buying column\">\n<div class=\"by\"><span class=\"k\">Made to order · four to six weeks</span>\n<h1>The Marsh coat, rose wool</h1>\n<p class=\"pr\">£1,240</p>\n<p>Double-faced wool from a mill in Biella, cut with no lining because the cloth does not need one. Every coat is made after it is ordered, by one of three people, whose name is on the label.</p>\n<div class=\"sz\"><span class=\"k\">Size</span><div class=\"opts\"><button type=\"button\">6</button><button type=\"button\">8</button><button type=\"button\" class=\"on\">10</button><button type=\"button\">12</button><button type=\"button\">14</button><button type=\"button\">16</button></div></div>\n<div class=\"cl\"><span class=\"k\">Cloth</span><div class=\"sw\"><i class=\"c1 on\"></i><i class=\"c2\"></i><i class=\"c3\"></i><i class=\"c4\"></i></div></div>\n<button type=\"button\" class=\"go\">Begin an order</button>\n<span class=\"fine\">A 30% deposit is taken now. The balance is due when it ships.</span></div></section><section class=\"dz-mod\" data-mod=\"detail\" aria-label=\"Making detail\">\n<section class=\"dt\"><h2 class=\"sh\">How it is made</h2>\n<div class=\"row\">\n  <figure><img src=\"https://designlookbook.dev/assets/img/pearl-atelier-thread.webp\" alt=\"Spools of thread in rose tones with one viridian\"><figcaption><b>Cloth chosen</b><span class=\"m\">Week one</span></figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/pearl-atelier-pins.webp\" alt=\"Pins pushed into a rose cushion in a loose arc\"><figcaption><b>Toile fitted</b><span class=\"m\">Week two</span></figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/pearl-atelier-swatch.webp\" alt=\"Fabric swatches fanned from blush to deep rose\"><figcaption><b>Cut and made</b><span class=\"m\">Weeks three to five</span></figcaption></figure>\n</div></section></section>\n</div>",
  "css": "\n.dz-pearl-atelier-piece { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 6fr 6fr; column-gap: 40px; padding-right: 36px; }\n.dz-pearl-atelier-piece .nv { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 26px; padding: 22px 0 22px 36px; }\n.dz-pearl-atelier-piece .br { font-family: var(--pv-display); font-size: 26px; font-weight: 500; }\n.dz-pearl-atelier-piece .nv nav { display: flex; gap: 24px; margin-left: 18px; }\n.dz-pearl-atelier-piece .nv a { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); text-decoration: none; }\n.dz-pearl-atelier-piece .nv a:hover { color: var(--primary); }\n.dz-pearl-atelier-piece .bag { margin-left: auto; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-pearl-atelier-piece .ph { margin: 0; }\n.dz-pearl-atelier-piece .ph img { width: 100%; height: 420px; object-fit: cover; display: block; border-radius: 999px 999px 24px 24px; border-radius: 0 0 999px 0; filter: var(--img-filter); }\n.dz-pearl-atelier-piece .ph figcaption { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); padding: 12px 0 0 36px; }\n.dz-pearl-atelier-piece .by { background: var(--card); border-radius: var(--pv-radius); box-shadow: 0 18px 44px -26px color-mix(in srgb, var(--accent) 55%, transparent); align-self: center; padding: 30px 32px 28px; margin-top: -30px; }\n.dz-pearl-atelier-piece .k { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); display: block; }\n.dz-pearl-atelier-piece .by h1 { font-family: var(--pv-display); font-size: 40px; font-weight: 500; line-height: 1.1; margin: 10px 0 6px; }\n.dz-pearl-atelier-piece .pr { font-family: var(--pv-mono); font-size: 22px; color: var(--accent); margin: 0 0 16px; }\n.dz-pearl-atelier-piece .by p { font-size: 15.5px; line-height: 1.64; color: var(--muted-foreground); margin: 0 0 22px; }\n.dz-pearl-atelier-piece .sz, .dz-pearl-atelier-piece .cl { margin-bottom: 20px; }\n.dz-pearl-atelier-piece .opts { display: flex; gap: 8px; margin-top: 10px; }\n.dz-pearl-atelier-piece .opts button { font: inherit; font-family: var(--pv-mono); font-size: 13px; background: transparent; color: var(--muted-foreground); border: var(--pv-bw) solid var(--border); border-radius: 999px; width: 42px; height: 42px; cursor: pointer; transition: all var(--dur-slow) var(--ease); }\n.dz-pearl-atelier-piece .opts button:hover { border-color: var(--primary); color: var(--foreground); }\n.dz-pearl-atelier-piece .opts .on { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }\n.dz-pearl-atelier-piece .sw { display: flex; gap: 10px; margin-top: 10px; }\n.dz-pearl-atelier-piece .sw i { width: 34px; height: 34px; border-radius: 999px; display: block; border: 2px solid transparent; cursor: pointer; }\n.dz-pearl-atelier-piece .c1 { background: var(--accent); } .dz-pearl-atelier-piece .c2 { background: var(--muted); } .dz-pearl-atelier-piece .c3 { background: var(--chart-4); } .dz-pearl-atelier-piece .c4 { background: var(--chart-5); }\n.dz-pearl-atelier-piece .sw .on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--card); outline: 2px solid var(--primary); }\n.dz-pearl-atelier-piece .go { font: inherit; font-size: 15px; width: 100%; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 999px; padding: 15px; cursor: pointer; transition: filter var(--dur-slow) var(--ease); }\n.dz-pearl-atelier-piece .go:hover { filter: brightness(1.1); }\n.dz-pearl-atelier-piece .fine { display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); padding-top: 12px; text-align: center; }\n.dz-pearl-atelier-piece .dt { grid-column: 1 / -1; padding: 50px 0 40px 36px; }\n.dz-pearl-atelier-piece .sh { font-family: var(--pv-display); font-size: 30px; font-weight: 500; margin: 0 0 20px; }\n.dz-pearl-atelier-piece .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }\n.dz-pearl-atelier-piece .row figure { margin: 0; }\n.dz-pearl-atelier-piece .row img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: 999px 999px 24px 24px; filter: var(--img-filter); }\n.dz-pearl-atelier-piece .row figcaption { padding-top: 12px; }\n.dz-pearl-atelier-piece .row b { display: block; font-family: var(--pv-display); font-size: 19px; font-weight: 500; }\n.dz-pearl-atelier-piece .m { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-pearl-atelier-piece *, .dz-pearl-atelier-piece *::before, .dz-pearl-atelier-piece *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/pearl-atelier.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Jost:wght@400;500;600;700&family=DM+Mono:wght@400;500;600;700&display=swap"
}