{
  "id": "bloom-lab-results",
  "name": "Results Home",
  "theme": "bloom-lab",
  "category": "Dashboard",
  "description": "A results page that answers the only real question first — is this in range — and puts the number itself second, where it belongs.",
  "layout": "A 7:5 split where the left column is a stack of range readouts sized by importance and the right is a single tall card that stays put while the readouts scroll.",
  "modules": [
    {
      "key": "top",
      "name": "Top bar",
      "html": "\n<header class=\"tp\"><span class=\"br\">bloom</span><nav><a class=\"on\" href=\"#\">Results</a><a href=\"#\">Trends</a><a href=\"#\">Samples</a><a href=\"#\">Team</a></nav><span class=\"who\">Dr M. Ferreira-Lund</span></header>"
    },
    {
      "key": "summary",
      "name": "Summary line",
      "html": "\n<div class=\"sm\"><h1>Panel complete</h1><p>Nine of ten markers are within range. One needs a second look.</p><span class=\"chip warn\">1 out of range</span><span class=\"chip ok\">Collected 4 Sep, 08:12</span></div>"
    },
    {
      "key": "ranges",
      "name": "Range readouts",
      "html": "\n<section class=\"rg\">\n  <article class=\"out\"><header><b>Ferritin</b><span class=\"v\">18<i>µg/L</i></span></header><div class=\"tr\"><i class=\"lo\"></i><i class=\"ok\"></i><i class=\"hi\"></i><span class=\"mk\" style=\"--p:9%\"></span><span class=\"ref\" style=\"--p:44%\"></span></div><footer><span>Reference 30–300</span><span class=\"fl\">Below range</span></footer></article>\n  <article><header><b>Haemoglobin</b><span class=\"v\">138<i>g/L</i></span></header><div class=\"tr\"><i class=\"lo\"></i><i class=\"ok\"></i><i class=\"hi\"></i><span class=\"mk\" style=\"--p:52%\"></span></div><footer><span>Reference 120–160</span><span>In range</span></footer></article>\n  <article><header><b>Vitamin D</b><span class=\"v\">74<i>nmol/L</i></span></header><div class=\"tr\"><i class=\"lo\"></i><i class=\"ok\"></i><i class=\"hi\"></i><span class=\"mk\" style=\"--p:61%\"></span></div><footer><span>Reference 50–125</span><span>In range</span></footer></article>\n  <article><header><b>TSH</b><span class=\"v\">2.1<i>mIU/L</i></span></header><div class=\"tr\"><i class=\"lo\"></i><i class=\"ok\"></i><i class=\"hi\"></i><span class=\"mk\" style=\"--p:47%\"></span></div><footer><span>Reference 0.4–4.0</span><span>In range</span></footer></article>\n</section>"
    },
    {
      "key": "detail",
      "name": "Detail card",
      "html": "\n<aside class=\"dt\"><figure><img src=\"{{ART gradient}}\" alt=\"{{ARTALT gradient}}\"></figure>\n<span class=\"k\">What ferritin measures</span>\n<p>Ferritin is the protein that stores iron. A low reading usually means stores are being drawn down faster than they are replaced, and it drops before haemoglobin does.</p>\n<span class=\"k\">Your last four</span>\n<ol class=\"hist\"><li><span>4 Sep</span><b>18</b></li><li><span>2 Jun</span><b>26</b></li><li><span>1 Mar</span><b>34</b></li><li><span>4 Dec</span><b>41</b></li></ol>\n<button type=\"button\" class=\"go\">Book a follow-up</button></aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "bloom-lab-results",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T19:48:21+09:00",
    "updatedAt": "2026-09-01T19:48:21+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/bloom-lab-results.json",
  "structure": "A 7:5 split where the left column is a stack of range readouts sized by importance and the right is a single tall card that stays put while the readouts scroll.",
  "html": "<div class=\"dz dz-bloom-lab-results\" data-design=\"bloom-lab-results\" data-theme=\"bloom-lab\">\n<section class=\"dz-mod\" data-mod=\"top\" aria-label=\"Top bar\">\n<header class=\"tp\"><span class=\"br\">bloom</span><nav><a class=\"on\" href=\"#\">Results</a><a href=\"#\">Trends</a><a href=\"#\">Samples</a><a href=\"#\">Team</a></nav><span class=\"who\">Dr M. Ferreira-Lund</span></header></section><section class=\"dz-mod\" data-mod=\"summary\" aria-label=\"Summary line\">\n<div class=\"sm\"><h1>Panel complete</h1><p>Nine of ten markers are within range. One needs a second look.</p><span class=\"chip warn\">1 out of range</span><span class=\"chip ok\">Collected 4 Sep, 08:12</span></div></section><section class=\"dz-mod\" data-mod=\"ranges\" aria-label=\"Range readouts\">\n<section class=\"rg\">\n  <article class=\"out\"><header><b>Ferritin</b><span class=\"v\">18<i>µg/L</i></span></header><div class=\"tr\"><i class=\"lo\"></i><i class=\"ok\"></i><i class=\"hi\"></i><span class=\"mk\" style=\"--p:9%\"></span><span class=\"ref\" style=\"--p:44%\"></span></div><footer><span>Reference 30–300</span><span class=\"fl\">Below range</span></footer></article>\n  <article><header><b>Haemoglobin</b><span class=\"v\">138<i>g/L</i></span></header><div class=\"tr\"><i class=\"lo\"></i><i class=\"ok\"></i><i class=\"hi\"></i><span class=\"mk\" style=\"--p:52%\"></span></div><footer><span>Reference 120–160</span><span>In range</span></footer></article>\n  <article><header><b>Vitamin D</b><span class=\"v\">74<i>nmol/L</i></span></header><div class=\"tr\"><i class=\"lo\"></i><i class=\"ok\"></i><i class=\"hi\"></i><span class=\"mk\" style=\"--p:61%\"></span></div><footer><span>Reference 50–125</span><span>In range</span></footer></article>\n  <article><header><b>TSH</b><span class=\"v\">2.1<i>mIU/L</i></span></header><div class=\"tr\"><i class=\"lo\"></i><i class=\"ok\"></i><i class=\"hi\"></i><span class=\"mk\" style=\"--p:47%\"></span></div><footer><span>Reference 0.4–4.0</span><span>In range</span></footer></article>\n</section></section><section class=\"dz-mod\" data-mod=\"detail\" aria-label=\"Detail card\">\n<aside class=\"dt\"><figure><img src=\"https://designlookbook.dev/assets/img/bloom-lab-gradient.webp\" alt=\"A row of test tubes stepping from mint to deep plum\"></figure>\n<span class=\"k\">What ferritin measures</span>\n<p>Ferritin is the protein that stores iron. A low reading usually means stores are being drawn down faster than they are replaced, and it drops before haemoglobin does.</p>\n<span class=\"k\">Your last four</span>\n<ol class=\"hist\"><li><span>4 Sep</span><b>18</b></li><li><span>2 Jun</span><b>26</b></li><li><span>1 Mar</span><b>34</b></li><li><span>4 Dec</span><b>41</b></li></ol>\n<button type=\"button\" class=\"go\">Book a follow-up</button></aside></section>\n</div>",
  "css": "\n.dz-bloom-lab-results { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 7fr 5fr; column-gap: 24px; padding: 0 30px 30px; align-content: start; }\n.dz-bloom-lab-results .tp { grid-column: 1 / -1; display: flex; align-items: center; gap: 26px; padding: 20px 0 22px; }\n.dz-bloom-lab-results .br { font-family: var(--pv-display); font-size: 21px; font-weight: 600; color: var(--primary); }\n.dz-bloom-lab-results .tp nav { display: flex; gap: 8px; }\n.dz-bloom-lab-results .tp a { font-size: 14px; color: var(--muted-foreground); text-decoration: none; padding: 7px 14px; border-radius: 999px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }\n.dz-bloom-lab-results .tp a:hover { background: var(--muted); color: var(--foreground); }\n.dz-bloom-lab-results .tp a.on { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--foreground); }\n.dz-bloom-lab-results .who { margin-left: auto; font-size: 13.5px; color: var(--muted-foreground); }\n.dz-bloom-lab-results .sm { grid-column: 1 / -1; margin-bottom: 22px; }\n.dz-bloom-lab-results .sm h1 { font-family: var(--pv-display); font-size: 40px; font-weight: 600; letter-spacing: -.025em; margin: 0 0 8px; }\n.dz-bloom-lab-results .sm p { font-size: 17px; color: var(--muted-foreground); margin: 0 0 14px; }\n.dz-bloom-lab-results .chip { display: inline-block; font-size: 12.5px; border-radius: 999px; padding: 6px 14px; margin-right: 8px; }\n.dz-bloom-lab-results .ok { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--foreground); }\n.dz-bloom-lab-results .warn { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-weight: 600; }\n.dz-bloom-lab-results .rg { display: flex; flex-direction: column; gap: 22px; }\n.dz-bloom-lab-results .rg article { background: var(--card); border-radius: var(--pv-radius); box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--primary) 55%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--foreground) 12%, transparent); padding: 20px 22px 18px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-bloom-lab-results .rg article:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--primary) 60%, transparent); }\n.dz-bloom-lab-results .rg header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }\n.dz-bloom-lab-results .rg b { font-size: 19px; font-weight: 600; }\n.dz-bloom-lab-results .v { font-family: var(--pv-mono); font-size: 30px; font-weight: 500; }\n.dz-bloom-lab-results .v i { font-size: 14px; font-style: normal; color: var(--muted-foreground); margin-left: 3px; }\n.dz-bloom-lab-results .tr { position: relative; display: flex; height: 12px; border-radius: 999px; overflow: visible; }\n.dz-bloom-lab-results .tr i { display: block; height: 12px; }\n.dz-bloom-lab-results .tr .lo { flex: 3; background: var(--muted); border-radius: 999px 0 0 999px; }\n.dz-bloom-lab-results .tr .ok { flex: 6; background: color-mix(in srgb, var(--primary) 35%, transparent); }\n.dz-bloom-lab-results .tr .hi { flex: 3; background: var(--muted); border-radius: 0 999px 999px 0; }\n.dz-bloom-lab-results .mk { position: absolute; left: var(--p); top: -4px; width: 4px; height: 20px; border-radius: 999px; background: var(--foreground); }\n.dz-bloom-lab-results .out .mk { background: var(--accent); }\n.dz-bloom-lab-results .ref { position: absolute; left: var(--p); top: -2px; width: 2px; height: 16px; background: color-mix(in srgb, var(--foreground) 30%, transparent); }\n.dz-bloom-lab-results .rg footer { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted-foreground); padding-top: 12px; }\n.dz-bloom-lab-results .fl { color: var(--accent); font-weight: 600; }\n.dz-bloom-lab-results .dt { background: var(--card); border-radius: var(--pv-radius); box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--primary) 55%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--foreground) 12%, transparent); padding: 0 0 22px; align-self: start; position: sticky; top: 20px; overflow: hidden; }\n.dz-bloom-lab-results .dt figure { margin: 0 0 18px; }\n.dz-bloom-lab-results .dt img { width: 100%; height: 150px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-bloom-lab-results .k { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted-foreground); padding: 0 22px; }\n.dz-bloom-lab-results .dt p { font-size: 14.5px; line-height: 1.6; color: var(--muted-foreground); margin: 8px 0 20px; padding: 0 22px; }\n.dz-bloom-lab-results .hist { list-style: none; margin: 10px 0 20px; padding: 0 22px; }\n.dz-bloom-lab-results .hist li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: var(--pv-bw) solid var(--border); font-size: 14px; }\n.dz-bloom-lab-results .hist b { font-family: var(--pv-mono); }\n.dz-bloom-lab-results .go { font: inherit; font-size: 14.5px; margin: 0 22px; width: calc(100% - 44px); background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 999px; padding: 13px; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-bloom-lab-results .go:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--primary) 70%, transparent); }\n@media (prefers-reduced-motion: reduce) { .dz-bloom-lab-results *, .dz-bloom-lab-results *::before, .dz-bloom-lab-results *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/bloom-lab.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Mono:wght@400;500;600;700&display=swap"
}