{
  "id": "powder-room-match",
  "name": "Match Settings",
  "theme": "powder-room",
  "category": "Settings & Forms",
  "description": "A matching profile built from discs rather than dropdowns: undertone, depth and coverage are each chosen by picking a circle.",
  "layout": "Three ruled sections where the control is a row of discs; the selected disc scales to 112% from its centre and nothing translates.",
  "modules": [
    {
      "key": "head",
      "name": "Profile header",
      "html": "\n<header class=\"ph\"><span class=\"k\">Matching profile</span><h1>Three questions, answered in colour</h1><p>No dropdowns. Pick the circle nearest to what you see in daylight, and pick badly if you must — you can change it after you see the recommendations.</p></header>"
    },
    {
      "key": "depth",
      "name": "Depth row",
      "html": "\n<section class=\"sc\"><span class=\"k\">Depth</span><div class=\"row\"><span class=\"dc\" style=\"background:#F6E5DA\"></span><span class=\"dc\" style=\"background:#EBD3C2\"></span><span class=\"dc\" style=\"background:#DCBBA3\"></span><span class=\"dc sel\" style=\"background:#C49F82\"></span><span class=\"dc\" style=\"background:#A87F60\"></span><span class=\"dc\" style=\"background:#8A6446\"></span><span class=\"dc\" style=\"background:#6B4B33\"></span><span class=\"dc\" style=\"background:#4E3624\"></span></div><p class=\"nt mn\">SELECTED · DEPTH 4 OF 8</p></section>"
    },
    {
      "key": "undertone",
      "name": "Undertone row",
      "html": "\n<section class=\"sc\"><span class=\"k\">Undertone</span><div class=\"row\"><span class=\"dc\" style=\"background:#C9A182\"></span><span class=\"dc sel\" style=\"background:#C49F82\"></span><span class=\"dc\" style=\"background:#BE9C86\"></span><span class=\"dc\" style=\"background:#B99B8B\"></span></div><div class=\"lbl\"><span>Warm</span><span>Warm neutral</span><span>Neutral</span><span>Cool neutral</span></div><p class=\"nt\">These four differ by about eight degrees of hue and almost nothing else. Photographed side by side they would look identical; as discs they do not.</p></section>"
    },
    {
      "key": "coverage",
      "name": "Coverage row",
      "html": "\n<section class=\"sc\"><span class=\"k\">Coverage</span><div class=\"row\"><span class=\"dc\" style=\"background:#C49F8244\"></span><span class=\"dc sel\" style=\"background:#C49F8299\"></span><span class=\"dc\" style=\"background:#C49F82\"></span></div><div class=\"lbl three\"><span>Sheer</span><span>Buildable</span><span>Full</span></div><button class=\"pri\">See 14 matches</button></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "powder-room-match",
    "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-match.json",
  "structure": "Three ruled sections where the control is a row of discs; the selected disc scales to 112% from its centre and nothing translates.",
  "html": "<div class=\"dz dz-powder-room-match\" data-design=\"powder-room-match\" data-theme=\"powder-room\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Profile header\">\n<header class=\"ph\"><span class=\"k\">Matching profile</span><h1>Three questions, answered in colour</h1><p>No dropdowns. Pick the circle nearest to what you see in daylight, and pick badly if you must — you can change it after you see the recommendations.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"depth\" aria-label=\"Depth row\">\n<section class=\"sc\"><span class=\"k\">Depth</span><div class=\"row\"><span class=\"dc\" style=\"background:#F6E5DA\"></span><span class=\"dc\" style=\"background:#EBD3C2\"></span><span class=\"dc\" style=\"background:#DCBBA3\"></span><span class=\"dc sel\" style=\"background:#C49F82\"></span><span class=\"dc\" style=\"background:#A87F60\"></span><span class=\"dc\" style=\"background:#8A6446\"></span><span class=\"dc\" style=\"background:#6B4B33\"></span><span class=\"dc\" style=\"background:#4E3624\"></span></div><p class=\"nt mn\">SELECTED · DEPTH 4 OF 8</p></section></section>\n<section class=\"dz-mod\" data-mod=\"undertone\" aria-label=\"Undertone row\">\n<section class=\"sc\"><span class=\"k\">Undertone</span><div class=\"row\"><span class=\"dc\" style=\"background:#C9A182\"></span><span class=\"dc sel\" style=\"background:#C49F82\"></span><span class=\"dc\" style=\"background:#BE9C86\"></span><span class=\"dc\" style=\"background:#B99B8B\"></span></div><div class=\"lbl\"><span>Warm</span><span>Warm neutral</span><span>Neutral</span><span>Cool neutral</span></div><p class=\"nt\">These four differ by about eight degrees of hue and almost nothing else. Photographed side by side they would look identical; as discs they do not.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"coverage\" aria-label=\"Coverage row\">\n<section class=\"sc\"><span class=\"k\">Coverage</span><div class=\"row\"><span class=\"dc\" style=\"background:#C49F8244\"></span><span class=\"dc sel\" style=\"background:#C49F8299\"></span><span class=\"dc\" style=\"background:#C49F82\"></span></div><div class=\"lbl three\"><span>Sheer</span><span>Buildable</span><span>Full</span></div><button class=\"pri\">See 14 matches</button></section></section>\n</div>",
  "css": "\n.dz-powder-room-match { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 30px; max-width: 760px; }\n.dz-powder-room-match .k { text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); display: block; margin-bottom: 14px; }\n.dz-powder-room-match .mn { font-family: var(--pv-mono); font-size: 12.5px; letter-spacing: .02em; }\n\n.dz-powder-room-match .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-match .dc.sm { width: 40px; height: 40px; }\n.dz-powder-room-match .dc.lg { width: 96px; height: 96px; }\n.dz-powder-room-match .dc.kit { outline: 2px solid var(--accent); outline-offset: 3px; }\n.dz-powder-room-match .dc.sel { transform: scale(1.12); outline: 2px solid var(--primary); outline-offset: 4px; }\n.dz-powder-room-match 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-match .ph p { margin: 0 0 30px; font-size: 14.5px; line-height: 1.6; color: var(--muted-foreground); max-width: 60ch; }\n.dz-powder-room-match .sc { padding: 22px 0; border-bottom: 1px solid var(--border); }\n.dz-powder-room-match .row { display: flex; gap: 18px; align-items: center; padding: 6px 0; }\n.dz-powder-room-match .lbl { display: flex; gap: 18px; margin-top: 12px; }\n.dz-powder-room-match .lbl span { width: 64px; text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); text-align: center; line-height: 1.4; }\n.dz-powder-room-match .nt { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted-foreground); max-width: 60ch; }\n.dz-powder-room-match .nt.mn { text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; }\n.dz-powder-room-match .pri { margin-top: 22px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 9999px; padding: 13px 26px; font: inherit; font-weight: 600; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-powder-room-match *, .dz-powder-room-match *::before, .dz-powder-room-match *::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"
}