{
  "id": "tonic-room-dose",
  "name": "Dose First",
  "theme": "tonic-room",
  "category": "Commerce",
  "description": "A product page that opens on the specification: amount, frequency and duration across the full measure at 60px, with the photograph deliberately below and small.",
  "layout": "A three-cell specification block spanning the measure above everything, then a 16:9 image at half width beside the description, then the refill action.",
  "modules": [
    {
      "key": "crumb",
      "name": "Identity line",
      "html": "\n<header class=\"id\"><span class=\"k\">Vitamin D3</span><h1>Cholecalciferol 1000 IU</h1><p class=\"cd\">NDC <b>50090-3345</b> · Lot <b>K4482B</b> · Exp <b>2028-04</b></p></header>"
    },
    {
      "key": "spec",
      "name": "Specification block",
      "html": "\n<section class=\"sp\"><div><b>1000<span class=\"u\"> IU</span></b><span class=\"l\">amount</span></div><div><b>1<span class=\"u\">×</span></b><span class=\"l\">daily, with food</span></div><div><b>90<span class=\"u\"> d</span></b><span class=\"l\">supply per pack</span></div></section>"
    },
    {
      "key": "body",
      "name": "Description and image",
      "html": "\n<section class=\"bd\"><div class=\"tx\"><span class=\"k\">What it is</span><p>A single-ingredient D3 in a medium-chain triglyceride carrier, which is why it is taken with food. Ninety softgels, one per day, no other actives and no fillers beyond the carrier oil.</p><p class=\"chips\"><span class=\"ch\">Morning</span><span class=\"ch\">With food</span><span class=\"ch\">Softgel</span></p><div class=\"buy\"><button class=\"pri\">Refill 90 softgels</button><span class=\"pz\">£11.40 · £0.13 per dose</span></div></div><figure><img src=\"{{ART flatlay}}\" alt=\"{{ARTALT flatlay}}\"></figure></section>"
    },
    {
      "key": "warn",
      "name": "Interaction note",
      "html": "\n<section class=\"wn\"><span class=\"k\">Check before you take this</span><p>Higher-dose vitamin D interacts with thiazide diuretics and with digoxin. If either is on your list, this will be held for pharmacist review before dispatch.</p></section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "tonic-room-dose",
    "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-dose.json",
  "structure": "A three-cell specification block spanning the measure above everything, then a 16:9 image at half width beside the description, then the refill action.",
  "html": "<div class=\"dz dz-tonic-room-dose\" data-design=\"tonic-room-dose\" data-theme=\"tonic-room\">\n<section class=\"dz-mod\" data-mod=\"crumb\" aria-label=\"Identity line\">\n<header class=\"id\"><span class=\"k\">Vitamin D3</span><h1>Cholecalciferol 1000 IU</h1><p class=\"cd\">NDC <b>50090-3345</b> · Lot <b>K4482B</b> · Exp <b>2028-04</b></p></header></section>\n<section class=\"dz-mod\" data-mod=\"spec\" aria-label=\"Specification block\">\n<section class=\"sp\"><div><b>1000<span class=\"u\"> IU</span></b><span class=\"l\">amount</span></div><div><b>1<span class=\"u\">×</span></b><span class=\"l\">daily, with food</span></div><div><b>90<span class=\"u\"> d</span></b><span class=\"l\">supply per pack</span></div></section></section>\n<section class=\"dz-mod\" data-mod=\"body\" aria-label=\"Description and image\">\n<section class=\"bd\"><div class=\"tx\"><span class=\"k\">What it is</span><p>A single-ingredient D3 in a medium-chain triglyceride carrier, which is why it is taken with food. Ninety softgels, one per day, no other actives and no fillers beyond the carrier oil.</p><p class=\"chips\"><span class=\"ch\">Morning</span><span class=\"ch\">With food</span><span class=\"ch\">Softgel</span></p><div class=\"buy\"><button class=\"pri\">Refill 90 softgels</button><span class=\"pz\">£11.40 · £0.13 per dose</span></div></div><figure><img src=\"https://designlookbook.dev/assets/img/tonic-room-flatlay.webp\" alt=\"A flat-lay of plain white discs on a pale ground\"></figure></section></section>\n<section class=\"dz-mod\" data-mod=\"warn\" aria-label=\"Interaction note\">\n<section class=\"wn\"><span class=\"k\">Check before you take this</span><p>Higher-dose vitamin D interacts with thiazide diuretics and with digoxin. If either is on your list, this will be held for pharmacist review before dispatch.</p></section></section>\n</div>",
  "css": "\n.dz-tonic-room-dose { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px; max-width: 1000px; }\n.dz-tonic-room-dose .k { text-transform: uppercase; letter-spacing: .13em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); }\n.dz-tonic-room-dose .id { margin-bottom: 20px; }\n.dz-tonic-room-dose 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-dose .cd { font-family: var(--pv-mono); font-size: 13px; color: var(--muted-foreground); margin: 0; }\n.dz-tonic-room-dose .cd b { color: var(--foreground); font-weight: 400; }\n\n.dz-tonic-room-dose .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-dose .sp > div { padding: 18px 20px; border-right: 1px solid var(--border); }\n.dz-tonic-room-dose .sp > div:last-child { border-right: 0; }\n.dz-tonic-room-dose .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-dose .sp .u { font-size: 15px; font-weight: 400; letter-spacing: 0; }\n.dz-tonic-room-dose .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-dose .bd { display: grid; grid-template-columns: 1fr 340px; gap: 28px; margin-top: 28px; align-items: start; }\n.dz-tonic-room-dose .bd p { margin: 8px 0 14px; font-size: 15px; line-height: 1.62; }\n.dz-tonic-room-dose .chips { display: flex; gap: 8px; }\n.dz-tonic-room-dose .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: 6px 12px; }\n.dz-tonic-room-dose .buy { display: flex; align-items: center; gap: 16px; margin-top: 20px; }\n.dz-tonic-room-dose .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 9999px; padding: 13px 22px; font: inherit; font-weight: 600; cursor: pointer; }\n.dz-tonic-room-dose .pz { font-family: var(--pv-mono); font-size: 13px; color: var(--muted-foreground); }\n.dz-tonic-room-dose figure { margin: 0; }\n.dz-tonic-room-dose figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 14px; filter: var(--img-filter); }\n.dz-tonic-room-dose .wn { margin-top: 28px; border-left: 3px solid var(--destructive); background: color-mix(in oklab, var(--destructive) 8%, transparent); padding: 14px 18px; border-radius: 0 10px 10px 0; }\n.dz-tonic-room-dose .wn p { margin: 6px 0 0; font-size: 15px; line-height: 1.62; }\n@media (prefers-reduced-motion: reduce) { .dz-tonic-room-dose *, .dz-tonic-room-dose *::before, .dz-tonic-room-dose *::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"
}