{
  "id": "powder-room-wall",
  "name": "Shade Wall",
  "theme": "powder-room",
  "category": "Search & Browse",
  "description": "The signature screen: discs only, sorted by hue angle rather than by product, with names appearing in a fixed strip at the top instead of tooltips.",
  "layout": "A fixed name strip pinned above a dense grid of nothing but 64px discs at 20px gutters, ordered around the hue circle rather than by brand or price.",
  "modules": [
    {
      "key": "strip",
      "name": "Fixed name strip",
      "html": "\n<header class=\"ns\"><span class=\"k\">Hovering</span><div class=\"cur\"><span class=\"dc sm\" style=\"background:#B4515F\"></span><div><p class=\"nm\">Quince Preserve</p><p class=\"cd\">PR-1140 · warm mid · matte · £24</p></div></div><span class=\"ct mn\">184 SHADES · SORTED BY HUE ANGLE · 0° AT TOP LEFT</span></header>"
    },
    {
      "key": "grid",
      "name": "Disc grid",
      "html": "\n<section class=\"wl\">\n<span class=\"dc\" style=\"background:#D4636B\"></span><span class=\"dc\" style=\"background:#C8515D\"></span><span class=\"dc kit\" style=\"background:#B4515F\"></span><span class=\"dc\" style=\"background:#A33F51\"></span><span class=\"dc\" style=\"background:#8E2F45\"></span><span class=\"dc\" style=\"background:#75253A\"></span><span class=\"dc\" style=\"background:#E07A6A\"></span><span class=\"dc\" style=\"background:#D66A55\"></span><span class=\"dc\" style=\"background:#C25940\"></span><span class=\"dc\" style=\"background:#AC4A33\"></span><span class=\"dc\" style=\"background:#8F3B28\"></span><span class=\"dc\" style=\"background:#EE9A6E\"></span>\n<span class=\"dc\" style=\"background:#E8A874\"></span><span class=\"dc\" style=\"background:#DFB07E\"></span><span class=\"dc\" style=\"background:#D2A96F\"></span><span class=\"dc\" style=\"background:#C09A5C\"></span><span class=\"dc\" style=\"background:#A6853F\"></span><span class=\"dc\" style=\"background:#8B6E2C\"></span><span class=\"dc\" style=\"background:#C7C079\"></span><span class=\"dc\" style=\"background:#A8AE60\"></span><span class=\"dc\" style=\"background:#87994B\"></span><span class=\"dc\" style=\"background:#67833C\"></span><span class=\"dc\" style=\"background:#4E6F36\"></span><span class=\"dc\" style=\"background:#3C5C32\"></span>\n<span class=\"dc\" style=\"background:#3E7B63\"></span><span class=\"dc\" style=\"background:#3A8878\"></span><span class=\"dc\" style=\"background:#358C8C\"></span><span class=\"dc\" style=\"background:#2F7F94\"></span><span class=\"dc\" style=\"background:#2E6D93\"></span><span class=\"dc\" style=\"background:#31598B\"></span><span class=\"dc\" style=\"background:#3A4A80\"></span><span class=\"dc\" style=\"background:#463F76\"></span><span class=\"dc\" style=\"background:#5A3C74\"></span><span class=\"dc\" style=\"background:#6E3A70\"></span><span class=\"dc\" style=\"background:#843A6C\"></span><span class=\"dc\" style=\"background:#9B3C68\"></span>\n<span class=\"dc\" style=\"background:#F0D6D2\"></span><span class=\"dc\" style=\"background:#E7C3BE\"></span><span class=\"dc\" style=\"background:#DCAEA9\"></span><span class=\"dc\" style=\"background:#CE9791\"></span><span class=\"dc\" style=\"background:#BC7F79\"></span><span class=\"dc\" style=\"background:#A66862\"></span><span class=\"dc\" style=\"background:#F4E6D8\"></span><span class=\"dc\" style=\"background:#EBD6C0\"></span><span class=\"dc\" style=\"background:#DDC3A5\"></span><span class=\"dc\" style=\"background:#C9AB8A\"></span><span class=\"dc\" style=\"background:#B2916E\"></span><span class=\"dc\" style=\"background:#957656\"></span>\n</section>"
    },
    {
      "key": "filters",
      "name": "Wall filters",
      "html": "\n<footer class=\"fl\"><span class=\"k\">Narrow the wall</span><div class=\"ch-row\"><span class=\"ch on\">All</span><span class=\"ch\">Warm</span><span class=\"ch\">Cool</span><span class=\"ch\">Neutral</span><span class=\"ch\">Matte</span><span class=\"ch\">Satin</span><span class=\"ch\">Sheer</span><span class=\"ch\">In my kit</span></div><p class=\"nt\">One disc on this wall is ringed in violet. That is the shade already in your kit, and it is the only reason a disc ever gets a second ring.</p></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "powder-room-wall",
    "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-wall.json",
  "structure": "A fixed name strip pinned above a dense grid of nothing but 64px discs at 20px gutters, ordered around the hue circle rather than by brand or price.",
  "html": "<div class=\"dz dz-powder-room-wall\" data-design=\"powder-room-wall\" data-theme=\"powder-room\">\n<section class=\"dz-mod\" data-mod=\"strip\" aria-label=\"Fixed name strip\">\n<header class=\"ns\"><span class=\"k\">Hovering</span><div class=\"cur\"><span class=\"dc sm\" style=\"background:#B4515F\"></span><div><p class=\"nm\">Quince Preserve</p><p class=\"cd\">PR-1140 · warm mid · matte · £24</p></div></div><span class=\"ct mn\">184 SHADES · SORTED BY HUE ANGLE · 0° AT TOP LEFT</span></header></section>\n<section class=\"dz-mod\" data-mod=\"grid\" aria-label=\"Disc grid\">\n<section class=\"wl\">\n<span class=\"dc\" style=\"background:#D4636B\"></span><span class=\"dc\" style=\"background:#C8515D\"></span><span class=\"dc kit\" style=\"background:#B4515F\"></span><span class=\"dc\" style=\"background:#A33F51\"></span><span class=\"dc\" style=\"background:#8E2F45\"></span><span class=\"dc\" style=\"background:#75253A\"></span><span class=\"dc\" style=\"background:#E07A6A\"></span><span class=\"dc\" style=\"background:#D66A55\"></span><span class=\"dc\" style=\"background:#C25940\"></span><span class=\"dc\" style=\"background:#AC4A33\"></span><span class=\"dc\" style=\"background:#8F3B28\"></span><span class=\"dc\" style=\"background:#EE9A6E\"></span>\n<span class=\"dc\" style=\"background:#E8A874\"></span><span class=\"dc\" style=\"background:#DFB07E\"></span><span class=\"dc\" style=\"background:#D2A96F\"></span><span class=\"dc\" style=\"background:#C09A5C\"></span><span class=\"dc\" style=\"background:#A6853F\"></span><span class=\"dc\" style=\"background:#8B6E2C\"></span><span class=\"dc\" style=\"background:#C7C079\"></span><span class=\"dc\" style=\"background:#A8AE60\"></span><span class=\"dc\" style=\"background:#87994B\"></span><span class=\"dc\" style=\"background:#67833C\"></span><span class=\"dc\" style=\"background:#4E6F36\"></span><span class=\"dc\" style=\"background:#3C5C32\"></span>\n<span class=\"dc\" style=\"background:#3E7B63\"></span><span class=\"dc\" style=\"background:#3A8878\"></span><span class=\"dc\" style=\"background:#358C8C\"></span><span class=\"dc\" style=\"background:#2F7F94\"></span><span class=\"dc\" style=\"background:#2E6D93\"></span><span class=\"dc\" style=\"background:#31598B\"></span><span class=\"dc\" style=\"background:#3A4A80\"></span><span class=\"dc\" style=\"background:#463F76\"></span><span class=\"dc\" style=\"background:#5A3C74\"></span><span class=\"dc\" style=\"background:#6E3A70\"></span><span class=\"dc\" style=\"background:#843A6C\"></span><span class=\"dc\" style=\"background:#9B3C68\"></span>\n<span class=\"dc\" style=\"background:#F0D6D2\"></span><span class=\"dc\" style=\"background:#E7C3BE\"></span><span class=\"dc\" style=\"background:#DCAEA9\"></span><span class=\"dc\" style=\"background:#CE9791\"></span><span class=\"dc\" style=\"background:#BC7F79\"></span><span class=\"dc\" style=\"background:#A66862\"></span><span class=\"dc\" style=\"background:#F4E6D8\"></span><span class=\"dc\" style=\"background:#EBD6C0\"></span><span class=\"dc\" style=\"background:#DDC3A5\"></span><span class=\"dc\" style=\"background:#C9AB8A\"></span><span class=\"dc\" style=\"background:#B2916E\"></span><span class=\"dc\" style=\"background:#957656\"></span>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"filters\" aria-label=\"Wall filters\">\n<footer class=\"fl\"><span class=\"k\">Narrow the wall</span><div class=\"ch-row\"><span class=\"ch on\">All</span><span class=\"ch\">Warm</span><span class=\"ch\">Cool</span><span class=\"ch\">Neutral</span><span class=\"ch\">Matte</span><span class=\"ch\">Satin</span><span class=\"ch\">Sheer</span><span class=\"ch\">In my kit</span></div><p class=\"nt\">One disc on this wall is ringed in violet. That is the shade already in your kit, and it is the only reason a disc ever gets a second ring.</p></footer></section>\n</div>",
  "css": "\n.dz-powder-room-wall { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 24px 30px 30px; }\n.dz-powder-room-wall .k { text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); }\n.dz-powder-room-wall .mn { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .02em; }\n\n.dz-powder-room-wall .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-wall .dc.sm { width: 40px; height: 40px; }\n.dz-powder-room-wall .dc.lg { width: 96px; height: 96px; }\n.dz-powder-room-wall .dc.kit { outline: 2px solid var(--accent); outline-offset: 3px; }\n.dz-powder-room-wall .ns { display: flex; align-items: center; gap: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }\n.dz-powder-room-wall .cur { display: flex; align-items: center; gap: 14px; }\n.dz-powder-room-wall .nm { font-family: var(--pv-display); font-weight: 400; font-size: 21px; margin: 0; }\n.dz-powder-room-wall .cd { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--muted-foreground); margin: 2px 0 0; }\n.dz-powder-room-wall .ct { color: var(--muted-foreground); margin-left: auto; font-size: 11px; }\n.dz-powder-room-wall .wl { display: grid; grid-template-columns: repeat(12, 64px); gap: 20px; justify-content: start; }\n.dz-powder-room-wall .fl { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); }\n.dz-powder-room-wall .ch-row { display: flex; gap: 8px; margin: 10px 0 14px; }\n.dz-powder-room-wall .ch { text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; border: 1px solid var(--border); border-radius: 9999px; padding: 7px 14px; color: var(--muted-foreground); }\n.dz-powder-room-wall .ch.on { background: var(--accent); color: var(--accent-foreground); border-color: var(--accent); }\n.dz-powder-room-wall .nt { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted-foreground); max-width: 66ch; }\n@media (prefers-reduced-motion: reduce) { .dz-powder-room-wall *, .dz-powder-room-wall *::before, .dz-powder-room-wall *::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"
}