{
  "id": "tonic-room-compare",
  "name": "Compare",
  "theme": "tonic-room",
  "category": "Search & Browse",
  "description": "Three products as parallel specification columns with the differing rows tinted, and no photographs at all — the view exists to compare doses, not packaging.",
  "layout": "A shared row-label column and three product columns; rows that differ between products are tinted, and the image slot is deliberately absent.",
  "modules": [
    {
      "key": "head",
      "name": "Comparison header",
      "html": "\n<header class=\"ch\"><span class=\"k\">Comparing 3 · Vitamin D3</span><h1>Same molecule, three specifications</h1><p>Photographs are hidden in this view. Two products that look identical on a shelf can differ by a factor of five in dose.</p></header>"
    },
    {
      "key": "table",
      "name": "Specification columns",
      "html": "\n<section class=\"tb\"><div class=\"hd\"><span></span><span class=\"pn\">Cholecalciferol 1000 IU</span><span class=\"pn\">D3 + K2 Complex</span><span class=\"pn\">High-Dose D3 5000 IU</span></div>\n<div class=\"rw diff\"><span class=\"lb\">Amount per dose</span><b>1000 IU</b><b>1000 IU</b><b class=\"hi\">5000 IU</b></div>\n<div class=\"rw\"><span class=\"lb\">Frequency</span><b>1× daily</b><b>1× daily</b><b>1× daily</b></div>\n<div class=\"rw diff\"><span class=\"lb\">Doses per pack</span><b>90</b><b>60</b><b class=\"hi\">120</b></div>\n<div class=\"rw diff\"><span class=\"lb\">Other actives</span><b>None</b><b class=\"hi\">K2 as MK-7, 100 µg</b><b>None</b></div>\n<div class=\"rw\"><span class=\"lb\">Form</span><b>Softgel</b><b>Softgel</b><b>Softgel</b></div>\n<div class=\"rw diff\"><span class=\"lb\">Cost per dose</span><b>£0.13</b><b class=\"hi\">£0.29</b><b>£0.11</b></div>\n<div class=\"rw\"><span class=\"lb\">Take with food</span><b>Yes</b><b>Yes</b><b>Yes</b></div>\n<div class=\"rw diff\"><span class=\"lb\">Pharmacist review</span><b>No</b><b>No</b><b class=\"hi\">Required</b></div>\n</section>"
    },
    {
      "key": "act",
      "name": "Action row",
      "html": "\n<footer class=\"ac\"><span></span><button class=\"gh\">Add 90</button><button class=\"gh\">Add 60</button><button class=\"pri\">Add 120 · review</button></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "tonic-room-compare",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:09:36+09:00",
    "updatedAt": "2026-09-02T01:09:36+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/tonic-room-compare.json",
  "structure": "A shared row-label column and three product columns; rows that differ between products are tinted, and the image slot is deliberately absent.",
  "html": "<div class=\"dz dz-tonic-room-compare\" data-design=\"tonic-room-compare\" data-theme=\"tonic-room\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Comparison header\">\n<header class=\"ch\"><span class=\"k\">Comparing 3 · Vitamin D3</span><h1>Same molecule, three specifications</h1><p>Photographs are hidden in this view. Two products that look identical on a shelf can differ by a factor of five in dose.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"table\" aria-label=\"Specification columns\">\n<section class=\"tb\"><div class=\"hd\"><span></span><span class=\"pn\">Cholecalciferol 1000 IU</span><span class=\"pn\">D3 + K2 Complex</span><span class=\"pn\">High-Dose D3 5000 IU</span></div>\n<div class=\"rw diff\"><span class=\"lb\">Amount per dose</span><b>1000 IU</b><b>1000 IU</b><b class=\"hi\">5000 IU</b></div>\n<div class=\"rw\"><span class=\"lb\">Frequency</span><b>1× daily</b><b>1× daily</b><b>1× daily</b></div>\n<div class=\"rw diff\"><span class=\"lb\">Doses per pack</span><b>90</b><b>60</b><b class=\"hi\">120</b></div>\n<div class=\"rw diff\"><span class=\"lb\">Other actives</span><b>None</b><b class=\"hi\">K2 as MK-7, 100 µg</b><b>None</b></div>\n<div class=\"rw\"><span class=\"lb\">Form</span><b>Softgel</b><b>Softgel</b><b>Softgel</b></div>\n<div class=\"rw diff\"><span class=\"lb\">Cost per dose</span><b>£0.13</b><b class=\"hi\">£0.29</b><b>£0.11</b></div>\n<div class=\"rw\"><span class=\"lb\">Take with food</span><b>Yes</b><b>Yes</b><b>Yes</b></div>\n<div class=\"rw diff\"><span class=\"lb\">Pharmacist review</span><b>No</b><b>No</b><b class=\"hi\">Required</b></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"act\" aria-label=\"Action row\">\n<footer class=\"ac\"><span></span><button class=\"gh\">Add 90</button><button class=\"gh\">Add 60</button><button class=\"pri\">Add 120 · review</button></footer></section>\n</div>",
  "css": "\n.dz-tonic-room-compare { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px; }\n.dz-tonic-room-compare .k { text-transform: uppercase; letter-spacing: .13em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); }\n.dz-tonic-room-compare .ch { margin-bottom: 24px; }\n.dz-tonic-room-compare h1 { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.02em; font-size: 32px; line-height: 1.18; margin: 6px 0 6px; }\n.dz-tonic-room-compare .ch p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--muted-foreground); max-width: 64ch; }\n.dz-tonic-room-compare .tb { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--card); }\n.dz-tonic-room-compare .hd, .dz-tonic-room-compare .rw, .dz-tonic-room-compare .ac { display: grid; grid-template-columns: 220px repeat(3, 1fr); gap: 20px; align-items: center; padding: 0 20px; }\n.dz-tonic-room-compare .hd { height: 56px; border-bottom: 1px solid var(--border); }\n.dz-tonic-room-compare .pn { font-weight: 600; font-size: 15px; }\n.dz-tonic-room-compare .rw { min-height: 52px; border-bottom: 1px solid var(--border); }\n.dz-tonic-room-compare .rw:last-child { border-bottom: 0; }\n.dz-tonic-room-compare .rw.diff { background: color-mix(in oklab, var(--accent) 10%, transparent); }\n.dz-tonic-room-compare .lb { text-transform: uppercase; letter-spacing: .13em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); }\n.dz-tonic-room-compare .rw b { font-family: var(--pv-mono); font-size: 13px; font-size: 14px; font-weight: 400; }\n.dz-tonic-room-compare .rw .hi { color: var(--primary); font-weight: 700; }\n.dz-tonic-room-compare .ac { padding: 20px; }\n.dz-tonic-room-compare button { border-radius: 9999px; padding: 12px; font: inherit; font-weight: 600; cursor: pointer; }\n.dz-tonic-room-compare .pri { background: var(--primary); color: var(--primary-foreground); border: 0; }\n.dz-tonic-room-compare .gh { background: transparent; color: var(--primary); border: 1px solid var(--primary); }\n@media (prefers-reduced-motion: reduce) { .dz-tonic-room-compare *, .dz-tonic-room-compare *::before, .dz-tonic-room-compare *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/tonic-room.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Fira+Code:wght@400;500;600;700&display=swap"
}