{
  "id": "powder-room-shade",
  "name": "Shade Page",
  "theme": "powder-room",
  "category": "Commerce",
  "description": "A product page that opens on the disc, the shade name in DM Serif and the code in Syne Mono, with the photograph arriving afterwards and carrying no text.",
  "layout": "A 96px disc beside the name and code above the fold, then the finish chips, then a photograph placed below with its caption beneath rather than over it.",
  "modules": [
    {
      "key": "head",
      "name": "Shade identity",
      "html": "\n<header class=\"sh\"><span class=\"dc lg\" style=\"background:#B4515F\"></span><div><span class=\"k\">Cream lipstick · matte</span><h1>Quince Preserve</h1><p class=\"cd\">PR-1140 · warm mid · 3.4 g</p></div></header>"
    },
    {
      "key": "chips",
      "name": "Finish and family",
      "html": "\n<section class=\"fc\"><span class=\"ch\">Matte</span><span class=\"ch\">Warm</span><span class=\"ch\">Mid depth</span><span class=\"ch\">Buildable</span></section>"
    },
    {
      "key": "body",
      "name": "Description and price",
      "html": "\n<section class=\"bd\"><p>A blue-leaning red that goes on sheer and builds to full without going flat. Reformulated in 2025 to drop the drying alcohol, which changed the wear time and did not change the colour.</p><div class=\"buy\"><span class=\"pz\">£24</span><button class=\"pri\">Add to bag</button><a class=\"lk\" href=\"#\">Compare with three shades</a></div></section>"
    },
    {
      "key": "photo",
      "name": "Texture photograph",
      "html": "\n<figure class=\"ph\"><img src=\"{{ART texture}}\" alt=\"{{ARTALT texture}}\"><figcaption>Drawn down at full opacity. Photographed in daylight at 5500K with no correction, which is why it does not exactly match the disc — the disc is the reference, not this.</figcaption></figure>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "powder-room-shade",
    "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-shade.json",
  "structure": "A 96px disc beside the name and code above the fold, then the finish chips, then a photograph placed below with its caption beneath rather than over it.",
  "html": "<div class=\"dz dz-powder-room-shade\" data-design=\"powder-room-shade\" data-theme=\"powder-room\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Shade identity\">\n<header class=\"sh\"><span class=\"dc lg\" style=\"background:#B4515F\"></span><div><span class=\"k\">Cream lipstick · matte</span><h1>Quince Preserve</h1><p class=\"cd\">PR-1140 · warm mid · 3.4 g</p></div></header></section>\n<section class=\"dz-mod\" data-mod=\"chips\" aria-label=\"Finish and family\">\n<section class=\"fc\"><span class=\"ch\">Matte</span><span class=\"ch\">Warm</span><span class=\"ch\">Mid depth</span><span class=\"ch\">Buildable</span></section></section>\n<section class=\"dz-mod\" data-mod=\"body\" aria-label=\"Description and price\">\n<section class=\"bd\"><p>A blue-leaning red that goes on sheer and builds to full without going flat. Reformulated in 2025 to drop the drying alcohol, which changed the wear time and did not change the colour.</p><div class=\"buy\"><span class=\"pz\">£24</span><button class=\"pri\">Add to bag</button><a class=\"lk\" href=\"#\">Compare with three shades</a></div></section></section>\n<section class=\"dz-mod\" data-mod=\"photo\" aria-label=\"Texture photograph\">\n<figure class=\"ph\"><img src=\"https://designlookbook.dev/assets/img/powder-room-texture.webp\" alt=\"A cream swatch drawn down on a mint surface\"><figcaption>Drawn down at full opacity. Photographed in daylight at 5500K with no correction, which is why it does not exactly match the disc — the disc is the reference, not this.</figcaption></figure></section>\n</div>",
  "css": "\n.dz-powder-room-shade { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 30px; max-width: 860px; }\n.dz-powder-room-shade .k { text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); }\n\n.dz-powder-room-shade .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-shade .dc.sm { width: 40px; height: 40px; }\n.dz-powder-room-shade .dc.lg { width: 96px; height: 96px; }\n.dz-powder-room-shade .dc.kit { outline: 2px solid var(--accent); outline-offset: 3px; }\n.dz-powder-room-shade .sh { display: flex; gap: 24px; align-items: center; margin-bottom: 22px; }\n.dz-powder-room-shade h1 { font-family: var(--pv-display); font-weight: 400; font-size: 36px; line-height: 1.16; letter-spacing: -.012em; margin: 6px 0 4px; }\n.dz-powder-room-shade .cd { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--muted-foreground); margin: 0; }\n.dz-powder-room-shade .fc { display: flex; gap: 8px; margin-bottom: 22px; }\n.dz-powder-room-shade .ch { background: var(--accent); color: var(--accent-foreground); text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; border-radius: 9999px; padding: 7px 14px; }\n.dz-powder-room-shade .bd p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; max-width: 60ch; }\n.dz-powder-room-shade .buy { display: flex; align-items: center; gap: 20px; }\n.dz-powder-room-shade .pz { font-family: var(--pv-display); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -.015em; }\n.dz-powder-room-shade .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-shade .lk { color: var(--primary); text-decoration: none; font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--primary); }\n.dz-powder-room-shade .ph { margin: 28px 0 0; }\n.dz-powder-room-shade .ph img { width: 100%; height: 320px; object-fit: cover; display: block; border-radius: 12px; filter: var(--img-filter); }\n.dz-powder-room-shade figcaption { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--muted-foreground); margin-top: 10px; line-height: 1.6; max-width: 66ch; }\n@media (prefers-reduced-motion: reduce) { .dz-powder-room-shade *, .dz-powder-room-shade *::before, .dz-powder-room-shade *::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"
}