{
  "id": "powder-room-compare",
  "name": "Comparison Tray",
  "theme": "powder-room",
  "category": "Profile & Social",
  "description": "Four shades from a customer’s kit at 96px side by side on a neutral card, with codes beneath in mono and no photographs in the view at all.",
  "layout": "A kit header, then a four-disc comparison tray on a neutral card, then a ruled kit list where each row begins with a 40px disc.",
  "modules": [
    {
      "key": "head",
      "name": "Kit header",
      "html": "\n<header class=\"kh\"><span class=\"k\">Your kit · 11 shades</span><h1>Marta Reyes</h1><p>Sorted by hue, as the wall is. Four are in the comparison tray; you can hold four and no more, which is roughly how many a person can actually hold in their head.</p></header>"
    },
    {
      "key": "tray",
      "name": "Comparison tray",
      "html": "\n<section class=\"tr\"><span class=\"k\">Comparing</span><div class=\"row\"><figure><span class=\"dc lg\" style=\"background:#B4515F\"></span><figcaption><b>Quince Preserve</b><span class=\"cd\">PR-1140 · warm mid</span></figcaption></figure><figure><span class=\"dc lg\" style=\"background:#A33F51\"></span><figcaption><b>Damson Skin</b><span class=\"cd\">PR-1148 · cool deep</span></figcaption></figure><figure><span class=\"dc lg\" style=\"background:#D66A55\"></span><figcaption><b>Terracotta Post</b><span class=\"cd\">PR-0904 · warm mid</span></figcaption></figure><figure><span class=\"dc lg\" style=\"background:#CE9791\"></span><figcaption><b>Bare Plaster</b><span class=\"cd\">PR-0221 · neutral light</span></figcaption></figure></div><p class=\"nt\">No photographs appear in this view. Two products shot under two lighting setups cannot be compared, and the discs can.</p></section>"
    },
    {
      "key": "kit",
      "name": "Kit list",
      "html": "\n<section class=\"kt\"><span class=\"k\">Everything in the kit</span>\n<div class=\"rw\"><span class=\"dc sm\" style=\"background:#D4636B\"></span><span class=\"nm\">Rosehip Jam</span><span class=\"cd\">PR-1102</span><span class=\"fn\">Satin</span><span class=\"dt\">Bought Jan</span></div>\n<div class=\"rw on\"><span class=\"dc sm kit\" style=\"background:#B4515F\"></span><span class=\"nm\">Quince Preserve</span><span class=\"cd\">PR-1140</span><span class=\"fn\">Matte</span><span class=\"dt\">Bought Mar</span></div>\n<div class=\"rw on\"><span class=\"dc sm kit\" style=\"background:#A33F51\"></span><span class=\"nm\">Damson Skin</span><span class=\"cd\">PR-1148</span><span class=\"fn\">Matte</span><span class=\"dt\">Bought Mar</span></div>\n<div class=\"rw on\"><span class=\"dc sm kit\" style=\"background:#D66A55\"></span><span class=\"nm\">Terracotta Post</span><span class=\"cd\">PR-0904</span><span class=\"fn\">Satin</span><span class=\"dt\">Bought Nov</span></div>\n<div class=\"rw on\"><span class=\"dc sm kit\" style=\"background:#CE9791\"></span><span class=\"nm\">Bare Plaster</span><span class=\"cd\">PR-0221</span><span class=\"fn\">Sheer</span><span class=\"dt\">Bought Nov</span></div>\n<div class=\"rw\"><span class=\"dc sm\" style=\"background:#8E2F45\"></span><span class=\"nm\">Ink Cap</span><span class=\"cd\">PR-1201</span><span class=\"fn\">Matte</span><span class=\"dt\">Bought Sep</span></div>\n</section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "powder-room-compare",
    "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-compare.json",
  "structure": "A kit header, then a four-disc comparison tray on a neutral card, then a ruled kit list where each row begins with a 40px disc.",
  "html": "<div class=\"dz dz-powder-room-compare\" data-design=\"powder-room-compare\" data-theme=\"powder-room\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Kit header\">\n<header class=\"kh\"><span class=\"k\">Your kit · 11 shades</span><h1>Marta Reyes</h1><p>Sorted by hue, as the wall is. Four are in the comparison tray; you can hold four and no more, which is roughly how many a person can actually hold in their head.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"tray\" aria-label=\"Comparison tray\">\n<section class=\"tr\"><span class=\"k\">Comparing</span><div class=\"row\"><figure><span class=\"dc lg\" style=\"background:#B4515F\"></span><figcaption><b>Quince Preserve</b><span class=\"cd\">PR-1140 · warm mid</span></figcaption></figure><figure><span class=\"dc lg\" style=\"background:#A33F51\"></span><figcaption><b>Damson Skin</b><span class=\"cd\">PR-1148 · cool deep</span></figcaption></figure><figure><span class=\"dc lg\" style=\"background:#D66A55\"></span><figcaption><b>Terracotta Post</b><span class=\"cd\">PR-0904 · warm mid</span></figcaption></figure><figure><span class=\"dc lg\" style=\"background:#CE9791\"></span><figcaption><b>Bare Plaster</b><span class=\"cd\">PR-0221 · neutral light</span></figcaption></figure></div><p class=\"nt\">No photographs appear in this view. Two products shot under two lighting setups cannot be compared, and the discs can.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"kit\" aria-label=\"Kit list\">\n<section class=\"kt\"><span class=\"k\">Everything in the kit</span>\n<div class=\"rw\"><span class=\"dc sm\" style=\"background:#D4636B\"></span><span class=\"nm\">Rosehip Jam</span><span class=\"cd\">PR-1102</span><span class=\"fn\">Satin</span><span class=\"dt\">Bought Jan</span></div>\n<div class=\"rw on\"><span class=\"dc sm kit\" style=\"background:#B4515F\"></span><span class=\"nm\">Quince Preserve</span><span class=\"cd\">PR-1140</span><span class=\"fn\">Matte</span><span class=\"dt\">Bought Mar</span></div>\n<div class=\"rw on\"><span class=\"dc sm kit\" style=\"background:#A33F51\"></span><span class=\"nm\">Damson Skin</span><span class=\"cd\">PR-1148</span><span class=\"fn\">Matte</span><span class=\"dt\">Bought Mar</span></div>\n<div class=\"rw on\"><span class=\"dc sm kit\" style=\"background:#D66A55\"></span><span class=\"nm\">Terracotta Post</span><span class=\"cd\">PR-0904</span><span class=\"fn\">Satin</span><span class=\"dt\">Bought Nov</span></div>\n<div class=\"rw on\"><span class=\"dc sm kit\" style=\"background:#CE9791\"></span><span class=\"nm\">Bare Plaster</span><span class=\"cd\">PR-0221</span><span class=\"fn\">Sheer</span><span class=\"dt\">Bought Nov</span></div>\n<div class=\"rw\"><span class=\"dc sm\" style=\"background:#8E2F45\"></span><span class=\"nm\">Ink Cap</span><span class=\"cd\">PR-1201</span><span class=\"fn\">Matte</span><span class=\"dt\">Bought Sep</span></div>\n</section></section>\n</div>",
  "css": "\n.dz-powder-room-compare { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 30px; max-width: 900px; }\n.dz-powder-room-compare .k { text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); display: block; margin-bottom: 10px; }\n\n.dz-powder-room-compare .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-compare .dc.sm { width: 40px; height: 40px; }\n.dz-powder-room-compare .dc.lg { width: 96px; height: 96px; }\n.dz-powder-room-compare .dc.kit { outline: 2px solid var(--accent); outline-offset: 3px; }\n.dz-powder-room-compare h1 { font-family: var(--pv-display); font-weight: 400; font-size: 36px; line-height: 1.16; letter-spacing: -.012em; margin: 0 0 10px; }\n.dz-powder-room-compare .kh p { margin: 0 0 26px; font-size: 14.5px; line-height: 1.6; color: var(--muted-foreground); max-width: 62ch; }\n.dz-powder-room-compare .tr { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px; margin-bottom: 28px; }\n.dz-powder-room-compare .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }\n.dz-powder-room-compare .row figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }\n.dz-powder-room-compare figcaption b { font-family: var(--pv-display); font-weight: 400; font-size: 18px; font-weight: 400; display: block; }\n.dz-powder-room-compare .cd { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--muted-foreground); }\n.dz-powder-room-compare .nt { margin: 20px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted-foreground); max-width: 64ch; }\n.dz-powder-room-compare .rw { display: grid; grid-template-columns: 40px 1fr 110px 90px 110px; gap: 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }\n.dz-powder-room-compare .nm { font-family: var(--pv-display); font-weight: 400; font-size: 19px; }\n.dz-powder-room-compare .fn { text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); }\n.dz-powder-room-compare .dt { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--muted-foreground); text-align: right; }\n@media (prefers-reduced-motion: reduce) { .dz-powder-room-compare *, .dz-powder-room-compare *::before, .dz-powder-room-compare *::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"
}