{
  "id": "tonic-room-brief",
  "name": "Dosage Brief",
  "theme": "tonic-room",
  "category": "Marketing",
  "description": "An explainer campaign page arguing the system’s own thesis, using a specification block as the illustration rather than a diagram of one.",
  "layout": "A narrow 64ch editorial column with full-bleed specification blocks breaking out of it at three points, and a bright still-life closing the page.",
  "modules": [
    {
      "key": "open",
      "name": "Opening argument",
      "html": "\n<article class=\"ar\"><span class=\"k\">A short argument</span><h1>The dose is the product</h1><p class=\"ld\">Almost every supplement page online opens on a photograph of a bottle in soft light beside a plant. Underneath, in nine-point grey, is the only fact that determines whether the thing will work: how much, how often, for how long.</p><p>We have inverted that. The specification is the hero of every product page in this shop, set at sixty pixels, and the photograph sits below it at a size that reflects its actual usefulness.</p></article>"
    },
    {
      "key": "demo",
      "name": "Specification breakout",
      "html": "\n<section class=\"bo\"><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><p class=\"cap\">This is the top of a real product page. Nothing has been removed for the illustration.</p></section>"
    },
    {
      "key": "more",
      "name": "Second movement",
      "html": "\n<article class=\"ar\"><h2>Comparison is where it matters most</h2><p>A shopper comparing two D3 products is trying to answer one question — is this the same thing more cheaply, or a different thing? Packaging cannot answer it and actively obstructs it, so our comparison view hides photographs entirely and tints the rows that differ.</p><p>The uncomfortable consequence is that some of our own products look worse in comparison. That is the correct outcome of an honest comparison, and we have decided to live with it.</p></article>"
    },
    {
      "key": "close",
      "name": "Closing image",
      "html": "\n<footer class=\"cl\"><img src=\"{{ART flatlay}}\" alt=\"{{ARTALT flatlay}}\"><div><h2>Read the label before the brand</h2><button class=\"pri\">Browse by dose</button></div></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "tonic-room-brief",
    "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-brief.json",
  "structure": "A narrow 64ch editorial column with full-bleed specification blocks breaking out of it at three points, and a bright still-life closing the page.",
  "html": "<div class=\"dz dz-tonic-room-brief\" data-design=\"tonic-room-brief\" data-theme=\"tonic-room\">\n<section class=\"dz-mod\" data-mod=\"open\" aria-label=\"Opening argument\">\n<article class=\"ar\"><span class=\"k\">A short argument</span><h1>The dose is the product</h1><p class=\"ld\">Almost every supplement page online opens on a photograph of a bottle in soft light beside a plant. Underneath, in nine-point grey, is the only fact that determines whether the thing will work: how much, how often, for how long.</p><p>We have inverted that. The specification is the hero of every product page in this shop, set at sixty pixels, and the photograph sits below it at a size that reflects its actual usefulness.</p></article></section>\n<section class=\"dz-mod\" data-mod=\"demo\" aria-label=\"Specification breakout\">\n<section class=\"bo\"><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><p class=\"cap\">This is the top of a real product page. Nothing has been removed for the illustration.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"more\" aria-label=\"Second movement\">\n<article class=\"ar\"><h2>Comparison is where it matters most</h2><p>A shopper comparing two D3 products is trying to answer one question — is this the same thing more cheaply, or a different thing? Packaging cannot answer it and actively obstructs it, so our comparison view hides photographs entirely and tints the rows that differ.</p><p>The uncomfortable consequence is that some of our own products look worse in comparison. That is the correct outcome of an honest comparison, and we have decided to live with it.</p></article></section>\n<section class=\"dz-mod\" data-mod=\"close\" aria-label=\"Closing image\">\n<footer class=\"cl\"><img src=\"https://designlookbook.dev/assets/img/tonic-room-flatlay.webp\" alt=\"A flat-lay of plain white discs on a pale ground\"><div><h2>Read the label before the brand</h2><button class=\"pri\">Browse by dose</button></div></footer></section>\n</div>",
  "css": "\n.dz-tonic-room-brief { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 52px 0; }\n.dz-tonic-room-brief .k { text-transform: uppercase; letter-spacing: .13em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); }\n.dz-tonic-room-brief .ar { max-width: 64ch; margin: 0 auto 32px; padding: 0 28px; }\n.dz-tonic-room-brief 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 16px; }\n.dz-tonic-room-brief h2 { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.02em; font-size: 32px; margin: 0 0 10px; letter-spacing: -.02em; }\n.dz-tonic-room-brief .ld { font-size: 16.5px; line-height: 1.66; margin: 0 0 14px; }\n.dz-tonic-room-brief .ar p { font-size: 15px; line-height: 1.66; margin: 0 0 14px; color: var(--muted-foreground); }\n.dz-tonic-room-brief .ld { color: var(--foreground); }\n.dz-tonic-room-brief .bo { max-width: 900px; margin: 0 auto 32px; padding: 0 28px; }\n\n.dz-tonic-room-brief .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-brief .sp > div { padding: 18px 20px; border-right: 1px solid var(--border); }\n.dz-tonic-room-brief .sp > div:last-child { border-right: 0; }\n.dz-tonic-room-brief .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-brief .sp .u { font-size: 15px; font-weight: 400; letter-spacing: 0; }\n.dz-tonic-room-brief .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-brief .cap { text-transform: uppercase; letter-spacing: .13em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); text-align: center; margin-top: 12px; }\n.dz-tonic-room-brief .cl { max-width: 900px; margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }\n.dz-tonic-room-brief .cl img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 20px; filter: var(--img-filter); }\n.dz-tonic-room-brief .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 9999px; padding: 13px 24px; font: inherit; font-weight: 600; cursor: pointer; margin-top: 16px; }\n@media (prefers-reduced-motion: reduce) { .dz-tonic-room-brief *, .dz-tonic-room-brief *::before, .dz-tonic-room-brief *::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"
}