{
  "id": "pearl-atelier-cloth",
  "name": "Cloth Library",
  "theme": "pearl-atelier",
  "category": "Search & Browse",
  "description": "A cloth library browsed by weight and hand rather than by colour, with the swatches as circles so no rectangle implies a garment.",
  "layout": "A pill-chip filter row above a grid of circular swatches at three sizes, where size encodes cloth weight and the caption carries mill, weight and price per metre.",
  "modules": [
    {
      "key": "head",
      "name": "Header",
      "html": "\n<header class=\"hd\"><h1>Cloth library</h1><span class=\"m\">Forty-one cloths we hold or can get within three weeks.</span></header>"
    },
    {
      "key": "filters",
      "name": "Filter chips",
      "html": "\n<div class=\"fl\"><span class=\"k\">Weight</span><button type=\"button\" class=\"on\">All</button><button type=\"button\">Under 300 g</button><button type=\"button\">300–450 g</button><button type=\"button\">Over 450 g</button><span class=\"sep\"></span><span class=\"k\">Fibre</span><button type=\"button\">Wool</button><button type=\"button\" class=\"on\">Linen</button><button type=\"button\">Silk</button><button type=\"button\">Cotton</button></div>"
    },
    {
      "key": "grid",
      "name": "Swatch grid",
      "html": "\n<section class=\"gr\">\n  <figure class=\"lg\"><img src=\"{{ART swatch}}\" alt=\"{{ARTALT swatch}}\"><figcaption><b>Rose double-face</b><span class=\"m\">Bertolini · 480 g · £84/m</span></figcaption></figure>\n  <figure class=\"md\"><img src=\"{{ART thread}}\" alt=\"{{ARTALT thread}}\"><figcaption><b>Undyed heavy linen</b><span class=\"m\">Libeco · 340 g · £46/m</span></figcaption></figure>\n  <figure class=\"sm\"><img src=\"{{ART pins}}\" alt=\"{{ARTALT pins}}\"><figcaption><b>Silk crêpe</b><span class=\"m\">Taroni · 190 g · £112/m</span></figcaption></figure>\n  <figure class=\"md\"><img src=\"{{ART arch}}\" alt=\"{{ARTALT arch}}\"><figcaption><b>Wool flannel</b><span class=\"m\">Fox Brothers · 380 g · £68/m</span></figcaption></figure>\n  <figure class=\"sm\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><figcaption><b>Cotton lawn</b><span class=\"m\">Alumo · 110 g · £34/m</span></figcaption></figure>\n  <figure class=\"lg\"><img src=\"{{ART swatch}}\" alt=\"{{ARTALT swatch}}\"><figcaption><b>Bouclé, rose ground</b><span class=\"m\">Bertolini · 520 g · £96/m</span></figcaption></figure>\n</section>"
    },
    {
      "key": "legend",
      "name": "Legend",
      "html": "\n<footer class=\"lg2\"><span class=\"k\">Reading this page</span><p>The circle is sized by cloth weight, not by how much we have. A large circle is a coat cloth; a small one will not hold a structured shoulder.</p></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "pearl-atelier-cloth",
    "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-cloth.json",
  "structure": "A pill-chip filter row above a grid of circular swatches at three sizes, where size encodes cloth weight and the caption carries mill, weight and price per metre.",
  "html": "<div class=\"dz dz-pearl-atelier-cloth\" data-design=\"pearl-atelier-cloth\" data-theme=\"pearl-atelier\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Header\">\n<header class=\"hd\"><h1>Cloth library</h1><span class=\"m\">Forty-one cloths we hold or can get within three weeks.</span></header></section>\n<section class=\"dz-mod\" data-mod=\"filters\" aria-label=\"Filter chips\">\n<div class=\"fl\"><span class=\"k\">Weight</span><button type=\"button\" class=\"on\">All</button><button type=\"button\">Under 300 g</button><button type=\"button\">300–450 g</button><button type=\"button\">Over 450 g</button><span class=\"sep\"></span><span class=\"k\">Fibre</span><button type=\"button\">Wool</button><button type=\"button\" class=\"on\">Linen</button><button type=\"button\">Silk</button><button type=\"button\">Cotton</button></div></section>\n<section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Swatch grid\">\n<section class=\"gr\">\n  <figure class=\"lg\"><img src=\"https://designlookbook.dev/assets/img/pearl-atelier-swatch.webp\" alt=\"Fabric swatches fanned from blush to deep rose\"><figcaption><b>Rose double-face</b><span class=\"m\">Bertolini · 480 g · £84/m</span></figcaption></figure>\n  <figure class=\"md\"><img src=\"https://designlookbook.dev/assets/img/pearl-atelier-thread.webp\" alt=\"Spools of thread in rose tones with one viridian\"><figcaption><b>Undyed heavy linen</b><span class=\"m\">Libeco · 340 g · £46/m</span></figcaption></figure>\n  <figure class=\"sm\"><img src=\"https://designlookbook.dev/assets/img/pearl-atelier-pins.webp\" alt=\"Pins pushed into a rose cushion in a loose arc\"><figcaption><b>Silk crêpe</b><span class=\"m\">Taroni · 190 g · £112/m</span></figcaption></figure>\n  <figure class=\"md\"><img src=\"https://designlookbook.dev/assets/img/pearl-atelier-arch.webp\" alt=\"A dress form in a pale rose atelier\"><figcaption><b>Wool flannel</b><span class=\"m\">Fox Brothers · 380 g · £68/m</span></figcaption></figure>\n  <figure class=\"sm\"><img src=\"https://designlookbook.dev/assets/img/pearl-atelier-hero.webp\" alt=\"Rose-coloured fabric draped against a rose wall with one green thread\"><figcaption><b>Cotton lawn</b><span class=\"m\">Alumo · 110 g · £34/m</span></figcaption></figure>\n  <figure class=\"lg\"><img src=\"https://designlookbook.dev/assets/img/pearl-atelier-swatch.webp\" alt=\"Fabric swatches fanned from blush to deep rose\"><figcaption><b>Bouclé, rose ground</b><span class=\"m\">Bertolini · 520 g · £96/m</span></figcaption></figure>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"legend\" aria-label=\"Legend\">\n<footer class=\"lg2\"><span class=\"k\">Reading this page</span><p>The circle is sized by cloth weight, not by how much we have. A large circle is a coat cloth; a small one will not hold a structured shoulder.</p></footer></section>\n</div>",
  "css": "\n.dz-pearl-atelier-cloth { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 34px 36px 40px; }\n.dz-pearl-atelier-cloth .hd { margin-bottom: 22px; }\n.dz-pearl-atelier-cloth .hd h1 { font-family: var(--pv-display); font-size: 44px; font-weight: 500; margin: 0 0 8px; }\n.dz-pearl-atelier-cloth .m { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-pearl-atelier-cloth .fl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 30px; }\n.dz-pearl-atelier-cloth .k { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-pearl-atelier-cloth .fl button { font: inherit; font-size: 13px; background: transparent; color: var(--muted-foreground); border: var(--pv-bw) solid var(--border); border-radius: 999px; padding: 8px 18px; cursor: pointer; transition: all var(--dur-slow) var(--ease); }\n.dz-pearl-atelier-cloth .fl button:hover { border-color: var(--primary); color: var(--foreground); }\n.dz-pearl-atelier-cloth .fl .on { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }\n.dz-pearl-atelier-cloth .sep { width: 1px; height: 18px; background: var(--border); margin: 0 8px; }\n.dz-pearl-atelier-cloth .gr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; justify-items: center; }\n.dz-pearl-atelier-cloth .gr figure { margin: 0; text-align: center; }\n.dz-pearl-atelier-cloth .gr img { object-fit: cover; display: block; border-radius: 999px; margin: 0 auto; filter: var(--img-filter); }\n.dz-pearl-atelier-cloth .lg img { width: 190px; height: 190px; }\n.dz-pearl-atelier-cloth .md img { width: 150px; height: 150px; }\n.dz-pearl-atelier-cloth .sm img { width: 112px; height: 112px; }\n.dz-pearl-atelier-cloth .gr figcaption { padding-top: 14px; }\n.dz-pearl-atelier-cloth .gr b { display: block; font-family: var(--pv-display); font-size: 19px; font-weight: 500; }\n.dz-pearl-atelier-cloth .lg2 { max-width: 60ch; margin: 40px auto 0; text-align: center; }\n.dz-pearl-atelier-cloth .lg2 p { font-size: 14.5px; line-height: 1.62; color: var(--muted-foreground); margin: 8px 0 0; }\n@media (prefers-reduced-motion: reduce) { .dz-pearl-atelier-cloth *, .dz-pearl-atelier-cloth *::before, .dz-pearl-atelier-cloth *::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"
}