{
  "id": "powder-room-front",
  "name": "Front",
  "theme": "powder-room",
  "category": "Landing",
  "description": "A landing page that leads with a row of discs and states the rule as the offer — shade first, photograph after, and no text on any image.",
  "layout": "A disc row as the hero object beside the claim, then a photograph with its caption beneath it, then three ruled promises.",
  "modules": [
    {
      "key": "hero",
      "name": "Disc hero",
      "html": "\n<header class=\"hr\"><div class=\"tx\"><span class=\"k\">Powder Room</span><h1>Shade first. The photo can wait.</h1><p>Every product here renders as a circle of its actual recorded colour before it renders as a photograph, so two shades can be compared without trusting two different lighting setups.</p><button class=\"pri\">Open the shade wall</button></div><div class=\"discs\"><span class=\"dc lg\" style=\"background:#B4515F\"></span><span class=\"dc lg\" style=\"background:#D66A55\"></span><span class=\"dc lg\" style=\"background:#CE9791\"></span><span class=\"dc lg\" style=\"background:#8E2F45\"></span><span class=\"dc lg\" style=\"background:#DDC3A5\"></span><span class=\"dc lg\" style=\"background:#A33F51\"></span></div></header>"
    },
    {
      "key": "photo",
      "name": "Pigment photograph",
      "html": "\n<figure class=\"ph\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><figcaption>Loose pigment, unmixed. There is no type set over this image, and there is none over any image in this shop.</figcaption></figure>"
    },
    {
      "key": "promises",
      "name": "Three promises",
      "html": "\n<section class=\"pm\"><article><h2>The disc is data</h2><p>It is generated from the shade's stored value, so a new colour appears correctly without anyone shooting it, and it is the reference the photograph is checked against.</p></article><article><h2>Pale shades cannot vanish</h2><p>Every disc carries a 1px inset ring. It is the only inset effect in the system and it exists because a swatch that disappears into the page is a broken swatch.</p></article><article><h2>The wall sorts by hue</h2><p>Not by brand, not by price, not by newness. Around the hue circle, which is the order a person actually compares colour in.</p></article></section>"
    },
    {
      "key": "end",
      "name": "Closing row",
      "html": "\n<footer class=\"en\"><div class=\"discs sm-row\"><span class=\"dc\" style=\"background:#3E7B63\"></span><span class=\"dc\" style=\"background:#358C8C\"></span><span class=\"dc\" style=\"background:#2E6D93\"></span><span class=\"dc\" style=\"background:#463F76\"></span><span class=\"dc\" style=\"background:#843A6C\"></span></div><h2>One hundred and eighty-four shades, all of them a circle first</h2><button class=\"pri\">Open the shade wall</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "powder-room-front",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:32:49+09:00",
    "updatedAt": "2026-09-02T01:32:49+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/powder-room-front.json",
  "structure": "A disc row as the hero object beside the claim, then a photograph with its caption beneath it, then three ruled promises.",
  "html": "<div class=\"dz dz-powder-room-front\" data-design=\"powder-room-front\" data-theme=\"powder-room\">\n<section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Disc hero\">\n<header class=\"hr\"><div class=\"tx\"><span class=\"k\">Powder Room</span><h1>Shade first. The photo can wait.</h1><p>Every product here renders as a circle of its actual recorded colour before it renders as a photograph, so two shades can be compared without trusting two different lighting setups.</p><button class=\"pri\">Open the shade wall</button></div><div class=\"discs\"><span class=\"dc lg\" style=\"background:#B4515F\"></span><span class=\"dc lg\" style=\"background:#D66A55\"></span><span class=\"dc lg\" style=\"background:#CE9791\"></span><span class=\"dc lg\" style=\"background:#8E2F45\"></span><span class=\"dc lg\" style=\"background:#DDC3A5\"></span><span class=\"dc lg\" style=\"background:#A33F51\"></span></div></header></section>\n<section class=\"dz-mod\" data-mod=\"photo\" aria-label=\"Pigment photograph\">\n<figure class=\"ph\"><img src=\"https://designlookbook.dev/assets/img/powder-room-hero.webp\" alt=\"Loose pigment powders arranged in a row on a mint surface\"><figcaption>Loose pigment, unmixed. There is no type set over this image, and there is none over any image in this shop.</figcaption></figure></section>\n<section class=\"dz-mod\" data-mod=\"promises\" aria-label=\"Three promises\">\n<section class=\"pm\"><article><h2>The disc is data</h2><p>It is generated from the shade's stored value, so a new colour appears correctly without anyone shooting it, and it is the reference the photograph is checked against.</p></article><article><h2>Pale shades cannot vanish</h2><p>Every disc carries a 1px inset ring. It is the only inset effect in the system and it exists because a swatch that disappears into the page is a broken swatch.</p></article><article><h2>The wall sorts by hue</h2><p>Not by brand, not by price, not by newness. Around the hue circle, which is the order a person actually compares colour in.</p></article></section></section>\n<section class=\"dz-mod\" data-mod=\"end\" aria-label=\"Closing row\">\n<footer class=\"en\"><div class=\"discs sm-row\"><span class=\"dc\" style=\"background:#3E7B63\"></span><span class=\"dc\" style=\"background:#358C8C\"></span><span class=\"dc\" style=\"background:#2E6D93\"></span><span class=\"dc\" style=\"background:#463F76\"></span><span class=\"dc\" style=\"background:#843A6C\"></span></div><h2>One hundred and eighty-four shades, all of them a circle first</h2><button class=\"pri\">Open the shade wall</button></footer></section>\n</div>",
  "css": "\n.dz-powder-room-front { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-powder-room-front .k { text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); }\n\n.dz-powder-room-front .dc { width: 64px; height: 64px; border-radius: 9999px; flex: none; display: block; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 12%, transparent); }\n.dz-powder-room-front .dc.sm { width: 40px; height: 40px; }\n.dz-powder-room-front .dc.lg { width: 96px; height: 96px; }\n.dz-powder-room-front .dc.kit { outline: 2px solid var(--accent); outline-offset: 3px; }\n.dz-powder-room-front .hr { display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: center; padding: 48px 30px; }\n.dz-powder-room-front h1 { font-family: var(--pv-display); font-weight: 400; font-size: 66px; line-height: 1.04; letter-spacing: -.02em; margin: 10px 0 16px; }\n.dz-powder-room-front .hr p { margin: 0 0 24px; font-size: 16px; line-height: 1.62; color: var(--muted-foreground); max-width: 52ch; }\n.dz-powder-room-front .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 9999px; padding: 13px 26px; font: inherit; font-weight: 600; cursor: pointer; }\n.dz-powder-room-front .discs { display: grid; grid-template-columns: repeat(3, 96px); gap: 20px; justify-content: center; }\n.dz-powder-room-front .ph { margin: 0 30px; }\n.dz-powder-room-front .ph img { width: 100%; height: 340px; object-fit: cover; display: block; border-radius: 18px; filter: var(--img-filter); }\n.dz-powder-room-front figcaption { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--muted-foreground); margin-top: 10px; }\n.dz-powder-room-front .pm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 44px 30px; }\n.dz-powder-room-front .pm article { border-top: 2px solid var(--primary); padding-top: 14px; }\n.dz-powder-room-front h2 { font-family: var(--pv-display); font-weight: 400; font-size: 21px; margin: 0 0 8px; }\n.dz-powder-room-front .pm p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted-foreground); }\n.dz-powder-room-front .en { text-align: center; padding: 0 30px 52px; }\n.dz-powder-room-front .sm-row { grid-template-columns: repeat(5, 64px); margin-bottom: 20px; }\n.dz-powder-room-front .en h2 { font-family: var(--pv-display); font-weight: 400; font-size: 36px; margin: 0 0 20px; }\n@media (prefers-reduced-motion: reduce) { .dz-powder-room-front *, .dz-powder-room-front *::before, .dz-powder-room-front *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/powder-room.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=DM+Serif+Display:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Syne+Mono:wght@400;500;600;700&display=swap"
}