{
  "id": "pearl-atelier-house",
  "name": "House Front",
  "theme": "pearl-atelier",
  "category": "Landing",
  "description": "A fashion house homepage with one arch photograph, one sentence and one green link, on a page that is unmistakably pink rather than blush white.",
  "layout": "An asymmetric hero where the arch image occupies columns 7 to 12 running past the top edge, and the sentence sits in columns 1 to 5 with a whole empty column between.",
  "modules": [
    {
      "key": "nav",
      "name": "Navigation",
      "html": "\n<header class=\"nv\"><span class=\"br\">Pearl</span><nav><a href=\"#\">Atelier</a><a href=\"#\">Collection</a><a href=\"#\">Journal</a><a href=\"#\">Visit</a></nav><a class=\"ap\" href=\"#\">Book a fitting</a></header>"
    },
    {
      "key": "say",
      "name": "The sentence",
      "html": "\n<div class=\"sy\"><span class=\"k\">Made to order, Northfield</span><h1>Three people make everything that leaves this building.</h1><p>Coats, jackets and one dress, cut after you order them, in cloth we can name the mill for.</p><a class=\"un\" href=\"#\">See what is being made this month</a></div>"
    },
    {
      "key": "arch",
      "name": "Arch plate",
      "html": "\n<figure class=\"ar\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure>"
    },
    {
      "key": "pieces",
      "name": "Piece row",
      "html": "\n<section class=\"pc\">\n  <figure><img src=\"{{ART arch}}\" alt=\"{{ARTALT arch}}\"><figcaption><b>The Marsh coat</b><span class=\"m\">Rose wool · £1,240</span></figcaption></figure>\n  <figure><img src=\"{{ART thread}}\" alt=\"{{ARTALT thread}}\"><figcaption><b>The Kilbride jacket</b><span class=\"m\">Undyed linen · £780</span></figcaption></figure>\n  <figure><img src=\"{{ART swatch}}\" alt=\"{{ARTALT swatch}}\"><figcaption><b>The one dress</b><span class=\"m\">Silk crêpe · £940</span></figcaption></figure>\n</section>"
    },
    {
      "key": "visit",
      "name": "Visit line",
      "html": "\n<footer class=\"vs\"><span class=\"k\">Visit</span><p>11 Marsh Lane, Northfield. Fittings by appointment, Tuesday to Friday. There is no shop.</p></footer>"
    }
  ],
  "moduleCount": 5,
  "reorderable": false,
  "meta": {
    "id": "pearl-atelier-house",
    "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-house.json",
  "structure": "An asymmetric hero where the arch image occupies columns 7 to 12 running past the top edge, and the sentence sits in columns 1 to 5 with a whole empty column between.",
  "html": "<div class=\"dz dz-pearl-atelier-house\" data-design=\"pearl-atelier-house\" 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=\"#\">Collection</a><a href=\"#\">Journal</a><a href=\"#\">Visit</a></nav><a class=\"ap\" href=\"#\">Book a fitting</a></header></section><section class=\"dz-mod\" data-mod=\"say\" aria-label=\"The sentence\">\n<div class=\"sy\"><span class=\"k\">Made to order, Northfield</span><h1>Three people make everything that leaves this building.</h1><p>Coats, jackets and one dress, cut after you order them, in cloth we can name the mill for.</p><a class=\"un\" href=\"#\">See what is being made this month</a></div></section><section class=\"dz-mod\" data-mod=\"arch\" aria-label=\"Arch plate\">\n<figure class=\"ar\"><img src=\"https://designlookbook.dev/assets/img/pearl-atelier-hero.webp\" alt=\"Rose-coloured fabric draped against a rose wall with one green thread\"></figure></section><section class=\"dz-mod\" data-mod=\"pieces\" aria-label=\"Piece row\">\n<section class=\"pc\">\n  <figure><img src=\"https://designlookbook.dev/assets/img/pearl-atelier-arch.webp\" alt=\"A dress form in a pale rose atelier\"><figcaption><b>The Marsh coat</b><span class=\"m\">Rose wool · £1,240</span></figcaption></figure>\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>The Kilbride jacket</b><span class=\"m\">Undyed linen · £780</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>The one dress</b><span class=\"m\">Silk crêpe · £940</span></figcaption></figure>\n</section></section><section class=\"dz-mod\" data-mod=\"visit\" aria-label=\"Visit line\">\n<footer class=\"vs\"><span class=\"k\">Visit</span><p>11 Marsh Lane, Northfield. Fittings by appointment, Tuesday to Friday. There is no shop.</p></footer></section>\n</div>",
  "css": "\n.dz-pearl-atelier-house { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding-bottom: 40px; }\n.dz-pearl-atelier-house .nv { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 26px; padding: 22px 36px; }\n.dz-pearl-atelier-house .br { font-family: var(--pv-display); font-size: 26px; font-weight: 500; }\n.dz-pearl-atelier-house .nv nav { display: flex; gap: 24px; margin-left: 18px; }\n.dz-pearl-atelier-house .nv a { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); text-decoration: none; }\n.dz-pearl-atelier-house .nv a:hover { color: var(--primary); }\n.dz-pearl-atelier-house .ap { margin-left: auto; background: var(--primary); color: var(--primary-foreground) !important; border-radius: 999px; padding: 9px 20px; letter-spacing: .14em !important; }\n.dz-pearl-atelier-house .sy { grid-column: 1 / 6; align-self: center; padding: 40px 0 40px 36px; }\n.dz-pearl-atelier-house .k { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); display: block; }\n.dz-pearl-atelier-house .sy h1 { font-family: var(--pv-display); font-size: 52px; font-weight: 500; line-height: 1.08; margin: 12px 0 18px; }\n.dz-pearl-atelier-house .sy p { font-size: 17px; line-height: 1.64; color: var(--muted-foreground); margin: 0 0 24px; }\n.dz-pearl-atelier-house .un { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); text-decoration: none; padding-bottom: 5px; background-image: linear-gradient(var(--primary), var(--primary)); background-size: 30% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur-slow) var(--ease); }\n.dz-pearl-atelier-house .un:hover { background-size: 100% 1px; }\n.dz-pearl-atelier-house .ar { grid-column: 7 / -1; grid-row: 2; margin: -60px 0 0; }\n.dz-pearl-atelier-house .ar img { width: 100%; height: 420px; object-fit: cover; display: block; border-radius: 999px 999px 24px 24px; border-bottom-right-radius: 0; filter: var(--img-filter); }\n.dz-pearl-atelier-house .pc { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding: 50px 36px 34px; }\n.dz-pearl-atelier-house .pc figure { margin: 0; }\n.dz-pearl-atelier-house .pc img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 999px 999px 24px 24px; filter: var(--img-filter); }\n.dz-pearl-atelier-house .pc figcaption { padding-top: 12px; }\n.dz-pearl-atelier-house .pc b { display: block; font-family: var(--pv-display); font-size: 21px; font-weight: 500; }\n.dz-pearl-atelier-house .m { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-pearl-atelier-house .vs { grid-column: 1 / -1; padding: 0 36px; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; }\n.dz-pearl-atelier-house .vs p { font-size: 15.5px; line-height: 1.62; color: var(--muted-foreground); margin: 0; max-width: 56ch; }\n@media (prefers-reduced-motion: reduce) { .dz-pearl-atelier-house *, .dz-pearl-atelier-house *::before, .dz-pearl-atelier-house *::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"
}