{
  "id": "tonic-room-adherence",
  "name": "Adherence",
  "theme": "tonic-room",
  "category": "Profile & Social",
  "description": "A personal plan built from dose chips and a thirty-cell strip, where taken is a filled cell and missed is an outline, and there is no third colour.",
  "layout": "A plan header with the remaining count at 60px, then a per-product row carrying its own 30-cell strip, then the next-dose card.",
  "modules": [
    {
      "key": "head",
      "name": "Plan header",
      "html": "\n<header class=\"ph\"><span class=\"k\">Your plan · March</span><h1>Four things, once a day</h1><div class=\"sp\"><div><b>27</b><span class=\"l\">days remaining</span></div><div><b>93<span class=\"u\">%</span></b><span class=\"l\">taken this month</span></div><div><b>08:00</b><span class=\"l\">usual time</span></div></div></header>"
    },
    {
      "key": "items",
      "name": "Plan items",
      "html": "\n<section class=\"it\">\n<article><div class=\"nm\"><h2>Cholecalciferol 1000 IU</h2><p class=\"chips\"><span class=\"ch\">Morning</span><span class=\"ch\">With food</span></p></div><div class=\"strip\"><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i></div><span class=\"rm mn\">27 left</span></article>\n<article><div class=\"nm\"><h2>Omega-3 EPA/DHA 1000 mg</h2><p class=\"chips\"><span class=\"ch\">Evening</span><span class=\"ch\">With food</span></p></div><div class=\"strip\"><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i></i><i></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i></div><span class=\"rm mn\">12 left</span></article>\n<article><div class=\"nm\"><h2>Magnesium glycinate 200 mg</h2><p class=\"chips\"><span class=\"ch\">Bedtime</span></p></div><div class=\"strip\"><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i></div><span class=\"rm mn\">41 left</span></article>\n</section>"
    },
    {
      "key": "next",
      "name": "Next dose",
      "html": "\n<footer class=\"nx\"><div><span class=\"k\">Next dose</span><p class=\"t\">Tonight, 21:00 — Magnesium glycinate 200 mg</p></div><button class=\"pri\">Mark today as taken</button></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "tonic-room-adherence",
    "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-adherence.json",
  "structure": "A plan header with the remaining count at 60px, then a per-product row carrying its own 30-cell strip, then the next-dose card.",
  "html": "<div class=\"dz dz-tonic-room-adherence\" data-design=\"tonic-room-adherence\" data-theme=\"tonic-room\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Plan header\">\n<header class=\"ph\"><span class=\"k\">Your plan · March</span><h1>Four things, once a day</h1><div class=\"sp\"><div><b>27</b><span class=\"l\">days remaining</span></div><div><b>93<span class=\"u\">%</span></b><span class=\"l\">taken this month</span></div><div><b>08:00</b><span class=\"l\">usual time</span></div></div></header></section>\n<section class=\"dz-mod\" data-mod=\"items\" aria-label=\"Plan items\">\n<section class=\"it\">\n<article><div class=\"nm\"><h2>Cholecalciferol 1000 IU</h2><p class=\"chips\"><span class=\"ch\">Morning</span><span class=\"ch\">With food</span></p></div><div class=\"strip\"><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i></div><span class=\"rm mn\">27 left</span></article>\n<article><div class=\"nm\"><h2>Omega-3 EPA/DHA 1000 mg</h2><p class=\"chips\"><span class=\"ch\">Evening</span><span class=\"ch\">With food</span></p></div><div class=\"strip\"><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i></i><i></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i></div><span class=\"rm mn\">12 left</span></article>\n<article><div class=\"nm\"><h2>Magnesium glycinate 200 mg</h2><p class=\"chips\"><span class=\"ch\">Bedtime</span></p></div><div class=\"strip\"><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i><i class=\"on\"></i></div><span class=\"rm mn\">41 left</span></article>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"next\" aria-label=\"Next dose\">\n<footer class=\"nx\"><div><span class=\"k\">Next dose</span><p class=\"t\">Tonight, 21:00 — Magnesium glycinate 200 mg</p></div><button class=\"pri\">Mark today as taken</button></footer></section>\n</div>",
  "css": "\n.dz-tonic-room-adherence { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px; max-width: 1000px; }\n.dz-tonic-room-adherence .k { text-transform: uppercase; letter-spacing: .13em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); }\n.dz-tonic-room-adherence .mn { font-family: var(--pv-mono); font-size: 12.5px; }\n.dz-tonic-room-adherence h1 { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.02em; font-size: 32px; line-height: 1.18; margin: 6px 0 20px; }\n\n.dz-tonic-room-adherence .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-adherence .sp > div { padding: 18px 20px; border-right: 1px solid var(--border); }\n.dz-tonic-room-adherence .sp > div:last-child { border-right: 0; }\n.dz-tonic-room-adherence .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-adherence .sp .u { font-size: 15px; font-weight: 400; letter-spacing: 0; }\n.dz-tonic-room-adherence .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-adherence .it { margin-top: 28px; }\n.dz-tonic-room-adherence .it article { display: grid; grid-template-columns: 300px 1fr 80px; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--border); }\n.dz-tonic-room-adherence h2 { font-size: 17px; font-weight: 600; margin: 0 0 8px; }\n.dz-tonic-room-adherence .chips { display: flex; gap: 6px; margin: 0; }\n.dz-tonic-room-adherence .ch { background: var(--accent); color: var(--accent-foreground); text-transform: uppercase; letter-spacing: .13em; font-size: 10.5px; font-weight: 700; border-radius: 9999px; padding: 5px 10px; }\n.dz-tonic-room-adherence .strip { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; }\n.dz-tonic-room-adherence .strip i { display: block; height: 22px; border-radius: 3px; border: 1px solid var(--border); }\n.dz-tonic-room-adherence .strip i.on { background: var(--accent); border-color: var(--accent); }\n.dz-tonic-room-adherence .rm { color: var(--muted-foreground); text-align: right; }\n.dz-tonic-room-adherence .nx { display: flex; align-items: center; gap: 20px; margin-top: 24px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }\n.dz-tonic-room-adherence .t { font-size: 17px; margin: 6px 0 0; }\n.dz-tonic-room-adherence .pri { margin-left: auto; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 9999px; padding: 13px 22px; font: inherit; font-weight: 600; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-tonic-room-adherence *, .dz-tonic-room-adherence *::before, .dz-tonic-room-adherence *::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"
}