{
  "id": "tonic-room-supply",
  "name": "Supply Plans",
  "theme": "tonic-room",
  "category": "Pricing",
  "description": "Pricing expressed the way the system thinks: cost per dose at 60px in the specification block, with the pack price demoted to a mono line beneath it.",
  "layout": "Three supply lengths as columns, each headed by a specification block whose middle cell is the per-dose cost rather than the pack price.",
  "modules": [
    {
      "key": "head",
      "name": "Plans header",
      "html": "\n<header class=\"ph\"><span class=\"k\">Subscription supply</span><h1>Priced per dose, not per box</h1><p>A 30-day box and a 90-day box are the same product at different unit prices. We show the unit price at the size the pack price is usually shown.</p></header>"
    },
    {
      "key": "plans",
      "name": "Supply columns",
      "html": "\n<section class=\"pl\">\n<article><span class=\"k\">30 days</span><div class=\"sp\"><div><b>£0.19</b><span class=\"l\">per dose</span></div><div><b>30</b><span class=\"l\">doses</span></div></div><p class=\"pk mn\">£5.70 per pack · cancel any time</p><ul><li>Delivered every 30 days</li><li>Change or pause from the app</li><li>Pharmacist review included</li></ul><button class=\"gh\">Choose 30 days</button></article>\n<article class=\"on\"><span class=\"k\">90 days</span><div class=\"sp\"><div><b>£0.13</b><span class=\"l\">per dose</span></div><div><b>90</b><span class=\"l\">doses</span></div></div><p class=\"pk mn\">£11.40 per pack · cancel any time</p><ul><li>Delivered every 90 days</li><li>Change or pause from the app</li><li>Pharmacist review included</li><li>Free delivery</li></ul><button class=\"pri\">Choose 90 days</button></article>\n<article><span class=\"k\">180 days</span><div class=\"sp\"><div><b>£0.11</b><span class=\"l\">per dose</span></div><div><b>180</b><span class=\"l\">doses</span></div></div><p class=\"pk mn\">£19.80 per pack · cancel any time</p><ul><li>Delivered every 180 days</li><li>Change or pause from the app</li><li>Pharmacist review included</li><li>Free delivery</li><li>Expiry always beyond the supply</li></ul><button class=\"gh\">Choose 180 days</button></article>\n</section>"
    },
    {
      "key": "note",
      "name": "Expiry note",
      "html": "\n<footer class=\"nt\"><span class=\"k\">On long supplies</span><p>We will not send you a pack that expires before you finish it. If the current lot cannot cover 180 days, the 180-day option disappears rather than shipping short-dated stock.</p></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "tonic-room-supply",
    "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-supply.json",
  "structure": "Three supply lengths as columns, each headed by a specification block whose middle cell is the per-dose cost rather than the pack price.",
  "html": "<div class=\"dz dz-tonic-room-supply\" data-design=\"tonic-room-supply\" data-theme=\"tonic-room\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Plans header\">\n<header class=\"ph\"><span class=\"k\">Subscription supply</span><h1>Priced per dose, not per box</h1><p>A 30-day box and a 90-day box are the same product at different unit prices. We show the unit price at the size the pack price is usually shown.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"plans\" aria-label=\"Supply columns\">\n<section class=\"pl\">\n<article><span class=\"k\">30 days</span><div class=\"sp\"><div><b>£0.19</b><span class=\"l\">per dose</span></div><div><b>30</b><span class=\"l\">doses</span></div></div><p class=\"pk mn\">£5.70 per pack · cancel any time</p><ul><li>Delivered every 30 days</li><li>Change or pause from the app</li><li>Pharmacist review included</li></ul><button class=\"gh\">Choose 30 days</button></article>\n<article class=\"on\"><span class=\"k\">90 days</span><div class=\"sp\"><div><b>£0.13</b><span class=\"l\">per dose</span></div><div><b>90</b><span class=\"l\">doses</span></div></div><p class=\"pk mn\">£11.40 per pack · cancel any time</p><ul><li>Delivered every 90 days</li><li>Change or pause from the app</li><li>Pharmacist review included</li><li>Free delivery</li></ul><button class=\"pri\">Choose 90 days</button></article>\n<article><span class=\"k\">180 days</span><div class=\"sp\"><div><b>£0.11</b><span class=\"l\">per dose</span></div><div><b>180</b><span class=\"l\">doses</span></div></div><p class=\"pk mn\">£19.80 per pack · cancel any time</p><ul><li>Delivered every 180 days</li><li>Change or pause from the app</li><li>Pharmacist review included</li><li>Free delivery</li><li>Expiry always beyond the supply</li></ul><button class=\"gh\">Choose 180 days</button></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"note\" aria-label=\"Expiry note\">\n<footer class=\"nt\"><span class=\"k\">On long supplies</span><p>We will not send you a pack that expires before you finish it. If the current lot cannot cover 180 days, the 180-day option disappears rather than shipping short-dated stock.</p></footer></section>\n</div>",
  "css": "\n.dz-tonic-room-supply { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 44px 28px; }\n.dz-tonic-room-supply .k { text-transform: uppercase; letter-spacing: .13em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); }\n.dz-tonic-room-supply .mn { font-family: var(--pv-mono); font-size: 12.5px; }\n.dz-tonic-room-supply .ph { text-align: center; margin-bottom: 32px; }\n.dz-tonic-room-supply h1 { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.02em; font-size: 56px; line-height: 1.05; letter-spacing: -.03em; margin: 8px 0 12px; }\n.dz-tonic-room-supply .ph p { margin: 0 auto; font-size: 16px; line-height: 1.62; color: var(--muted-foreground); max-width: 62ch; }\n.dz-tonic-room-supply .pl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; }\n.dz-tonic-room-supply .pl article { border: 1px solid var(--border); border-radius: 20px; padding: 24px; background: var(--card); }\n.dz-tonic-room-supply .pl .on { border-color: var(--primary); border-width: 2px; }\n.dz-tonic-room-supply .pl .k { display: block; margin-bottom: 12px; }\n.dz-tonic-room-supply .sp { grid-template-columns: 1fr 1fr; border-radius: 10px; }\n\n.dz-tonic-room-supply .sp { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--card); }\n.dz-tonic-room-supply .sp > div { padding: 18px 20px; border-right: 1px solid var(--border); }\n.dz-tonic-room-supply .sp > div:last-child { border-right: 0; }\n.dz-tonic-room-supply .sp b { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.02em; font-size: 60px; line-height: 1; display: block; letter-spacing: -.035em; }\n.dz-tonic-room-supply .sp .u { font-size: 15px; font-weight: 400; letter-spacing: 0; }\n.dz-tonic-room-supply .sp .l { text-transform: uppercase; letter-spacing: .13em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); display: block; margin-top: 8px; }\n.dz-tonic-room-supply .sp b { font-size: 44px; }\n.dz-tonic-room-supply .pk { color: var(--muted-foreground); margin: 12px 0 16px; }\n.dz-tonic-room-supply ul { list-style: none; margin: 0 0 20px; padding: 0; }\n.dz-tonic-room-supply li { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }\n.dz-tonic-room-supply button { width: 100%; border-radius: 9999px; padding: 13px; font: inherit; font-weight: 600; cursor: pointer; }\n.dz-tonic-room-supply .pri { background: var(--primary); color: var(--primary-foreground); border: 0; }\n.dz-tonic-room-supply .gh { background: transparent; color: var(--primary); border: 1px solid var(--primary); }\n.dz-tonic-room-supply .nt { max-width: 1100px; margin: 32px auto 0; }\n.dz-tonic-room-supply .nt p { margin: 6px 0 0; font-size: 15px; line-height: 1.62; color: var(--muted-foreground); max-width: 70ch; }\n@media (prefers-reduced-motion: reduce) { .dz-tonic-room-supply *, .dz-tonic-room-supply *::before, .dz-tonic-room-supply *::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"
}