{
  "id": "tonic-room-front",
  "name": "Counter",
  "theme": "tonic-room",
  "category": "Landing",
  "description": "A pharmacy front page that states its own rule in the hero — the dose comes before the photograph — and then demonstrates it immediately in a specification block.",
  "layout": "A left-weighted hero with the claim in Gabarito and a bright counter image at the right, followed by the live specification block as proof.",
  "modules": [
    {
      "key": "hero",
      "name": "Claim hero",
      "html": "\n<header class=\"hr\"><div class=\"tx\"><span class=\"k\">Pharmacy and supplements</span><h1>How much, how often, for how long.</h1><p>Every product here opens on its dose. The photograph is below it and it is small, because a picture of a bottle has never told anybody whether to take one or five.</p><div class=\"cta\"><button class=\"pri\">Start an order</button><a class=\"lk\" href=\"#\">Transfer a prescription</a></div></div><figure><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure></header>"
    },
    {
      "key": "proof",
      "name": "Specification proof",
      "html": "\n<section class=\"pr\"><span class=\"k\">This is what a product looks like here</span><div 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></div></section>"
    },
    {
      "key": "three",
      "name": "Three commitments",
      "html": "\n<section class=\"th\"><article><figure><img src=\"{{ART glass}}\" alt=\"{{ARTALT glass}}\"></figure><h2>Comparison drops the pictures</h2><p>When you compare two products we hide the photographs, because packaging is the least informative thing about a supplement.</p></article><article><figure><img src=\"{{ART counter}}\" alt=\"{{ARTALT counter}}\"></figure><h2>A pharmacist reads the list</h2><p>Interactions are checked against everything you told us, and a held order means a person is looking, not that a rule fired.</p></article><article><figure><img src=\"{{ART light}}\" alt=\"{{ARTALT light}}\"></figure><h2>Counters step, never blur</h2><p>When your remaining doses go from 12 to 11 the number ticks. It never animates through 11.5, because there is no such dose.</p></article></section>"
    },
    {
      "key": "end",
      "name": "Closing band",
      "html": "\n<footer class=\"en\"><h2>Bring your list. We will read it properly.</h2><button class=\"pri\">Set up your plan</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "tonic-room-front",
    "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-front.json",
  "structure": "A left-weighted hero with the claim in Gabarito and a bright counter image at the right, followed by the live specification block as proof.",
  "html": "<div class=\"dz dz-tonic-room-front\" data-design=\"tonic-room-front\" data-theme=\"tonic-room\">\n<section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Claim hero\">\n<header class=\"hr\"><div class=\"tx\"><span class=\"k\">Pharmacy and supplements</span><h1>How much, how often, for how long.</h1><p>Every product here opens on its dose. The photograph is below it and it is small, because a picture of a bottle has never told anybody whether to take one or five.</p><div class=\"cta\"><button class=\"pri\">Start an order</button><a class=\"lk\" href=\"#\">Transfer a prescription</a></div></div><figure><img src=\"https://designlookbook.dev/assets/img/tonic-room-hero.webp\" alt=\"A pale counter with glass vessels arranged in a widely spaced row\"></figure></header></section>\n<section class=\"dz-mod\" data-mod=\"proof\" aria-label=\"Specification proof\">\n<section class=\"pr\"><span class=\"k\">This is what a product looks like here</span><div 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></div></section></section>\n<section class=\"dz-mod\" data-mod=\"three\" aria-label=\"Three commitments\">\n<section class=\"th\"><article><figure><img src=\"https://designlookbook.dev/assets/img/tonic-room-glass.webp\" alt=\"A tall glass of water on a pale surface with a hard shadow\"></figure><h2>Comparison drops the pictures</h2><p>When you compare two products we hide the photographs, because packaging is the least informative thing about a supplement.</p></article><article><figure><img src=\"https://designlookbook.dev/assets/img/tonic-room-counter.webp\" alt=\"A jade tile counter edge in bright daylight\"></figure><h2>A pharmacist reads the list</h2><p>Interactions are checked against everything you told us, and a held order means a person is looking, not that a rule fired.</p></article><article><figure><img src=\"https://designlookbook.dev/assets/img/tonic-room-light.webp\" alt=\"Daylight falling across a pale wall in bands\"></figure><h2>Counters step, never blur</h2><p>When your remaining doses go from 12 to 11 the number ticks. It never animates through 11.5, because there is no such dose.</p></article></section></section>\n<section class=\"dz-mod\" data-mod=\"end\" aria-label=\"Closing band\">\n<footer class=\"en\"><h2>Bring your list. We will read it properly.</h2><button class=\"pri\">Set up your plan</button></footer></section>\n</div>",
  "css": "\n.dz-tonic-room-front { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-tonic-room-front .k { text-transform: uppercase; letter-spacing: .13em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); }\n.dz-tonic-room-front .hr { display: grid; grid-template-columns: 1fr 420px; gap: 40px; align-items: center; padding: 52px 28px; }\n.dz-tonic-room-front h1 { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.02em; font-size: 56px; line-height: 1.05; letter-spacing: -.03em; margin: 10px 0 14px; }\n.dz-tonic-room-front .hr p { margin: 0 0 24px; font-size: 16.5px; line-height: 1.66; color: var(--muted-foreground); max-width: 54ch; }\n.dz-tonic-room-front .cta { display: flex; align-items: center; gap: 18px; }\n.dz-tonic-room-front .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 9999px; padding: 13px 24px; font: inherit; font-weight: 600; cursor: pointer; }\n.dz-tonic-room-front .lk { color: var(--primary); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--primary); }\n.dz-tonic-room-front .hr figure { margin: 0; }\n.dz-tonic-room-front .hr img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: 20px; filter: var(--img-filter); }\n.dz-tonic-room-front .pr { padding: 0 28px 52px; }\n.dz-tonic-room-front .pr .k { display: block; margin-bottom: 10px; }\n\n.dz-tonic-room-front .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-front .sp > div { padding: 18px 20px; border-right: 1px solid var(--border); }\n.dz-tonic-room-front .sp > div:last-child { border-right: 0; }\n.dz-tonic-room-front .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-front .sp .u { font-size: 15px; font-weight: 400; letter-spacing: 0; }\n.dz-tonic-room-front .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-front .th { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 28px 52px; }\n.dz-tonic-room-front .th figure { margin: 0 0 14px; }\n.dz-tonic-room-front .th img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 14px; filter: var(--img-filter); }\n.dz-tonic-room-front h2 { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.02em; font-size: 21px; margin: 0 0 6px; letter-spacing: -.005em; }\n.dz-tonic-room-front .th p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--muted-foreground); }\n.dz-tonic-room-front .en { text-align: center; padding: 0 28px 60px; }\n.dz-tonic-room-front .en h2 { font-size: 32px; margin-bottom: 20px; }\n@media (prefers-reduced-motion: reduce) { .dz-tonic-room-front *, .dz-tonic-room-front *::before, .dz-tonic-room-front *::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"
}