{
  "id": "bloom-lab-trend",
  "name": "Marker Trend",
  "theme": "bloom-lab",
  "category": "Data & Reports",
  "description": "One marker over two years, drawn as a soft band of the reference range with the readings sitting inside or outside it, and every event annotated.",
  "layout": "A full-width chart card 300px tall with a legend welded into its top-right corner, above a two-column split of annotated events and a plain-language reading of the trend.",
  "modules": [
    {
      "key": "head",
      "name": "Marker header",
      "html": "\n<header class=\"hd\"><div><span class=\"k\">Marker</span><h1>Ferritin</h1></div>\n<div class=\"pick\"><button type=\"button\">6 m</button><button type=\"button\" class=\"on\">2 y</button><button type=\"button\">All</button></div></header>"
    },
    {
      "key": "chart",
      "name": "Trend chart",
      "html": "\n<section class=\"ch\"><header><b>µg/L</b><div class=\"lg\"><span><i class=\"b\"></i>reference band</span><span><i class=\"d\"></i>your readings</span></div></header>\n<svg viewBox=\"0 0 640 210\" aria-label=\"Ferritin over two years\">\n  <rect class=\"band\" x=\"0\" y=\"46\" width=\"640\" height=\"104\"/>\n  <polyline class=\"ln\" points=\"30,74 120,84 210,96 300,110 390,128 480,146 570,168\"/>\n  <circle class=\"pt\" cx=\"30\" cy=\"74\" r=\"5\"/><circle class=\"pt\" cx=\"120\" cy=\"84\" r=\"5\"/><circle class=\"pt\" cx=\"210\" cy=\"96\" r=\"5\"/><circle class=\"pt\" cx=\"300\" cy=\"110\" r=\"5\"/><circle class=\"pt\" cx=\"390\" cy=\"128\" r=\"5\"/><circle class=\"pt\" cx=\"480\" cy=\"146\" r=\"5\"/><circle class=\"pt out\" cx=\"570\" cy=\"168\" r=\"6\"/>\n</svg>\n<footer><span>Sep 2024</span><span>Mar 2025</span><span>Sep 2025</span><span>Mar 2026</span><span>Sep 2026</span></footer></section>"
    },
    {
      "key": "events",
      "name": "Annotated events",
      "html": "\n<section class=\"ev\"><h2>What happened along the way</h2>\n<ol>\n  <li><span class=\"d\">Mar 2025</span><b>Started a plant-based diet</b><span class=\"m\">Reported at intake</span></li>\n  <li><span class=\"d\">Sep 2025</span><b>Iron supplement stopped</b><span class=\"m\">Reported at intake</span></li>\n  <li><span class=\"d\">Jun 2026</span><b>Haemoglobin still in range</b><span class=\"m\">Stores falling before the count does</span></li>\n</ol></section>"
    },
    {
      "key": "reading",
      "name": "Plain reading",
      "html": "\n<aside class=\"rd\"><span class=\"k\">In plain terms</span>\n<p>Your ferritin has fallen at a steady rate for two years and has now crossed below the reference range. Haemoglobin has not moved, which is the usual order: stores empty first.</p>\n<p>This is the pattern a clinician would want to look at rather than watch for another quarter.</p>\n<button type=\"button\" class=\"go\">Share with a clinician</button></aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "bloom-lab-trend",
    "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-trend.json",
  "structure": "A full-width chart card 300px tall with a legend welded into its top-right corner, above a two-column split of annotated events and a plain-language reading of the trend.",
  "html": "<div class=\"dz dz-bloom-lab-trend\" data-design=\"bloom-lab-trend\" data-theme=\"bloom-lab\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Marker header\">\n<header class=\"hd\"><div><span class=\"k\">Marker</span><h1>Ferritin</h1></div>\n<div class=\"pick\"><button type=\"button\">6 m</button><button type=\"button\" class=\"on\">2 y</button><button type=\"button\">All</button></div></header></section><section class=\"dz-mod\" data-mod=\"chart\" aria-label=\"Trend chart\">\n<section class=\"ch\"><header><b>µg/L</b><div class=\"lg\"><span><i class=\"b\"></i>reference band</span><span><i class=\"d\"></i>your readings</span></div></header>\n<svg viewBox=\"0 0 640 210\" aria-label=\"Ferritin over two years\">\n  <rect class=\"band\" x=\"0\" y=\"46\" width=\"640\" height=\"104\"/>\n  <polyline class=\"ln\" points=\"30,74 120,84 210,96 300,110 390,128 480,146 570,168\"/>\n  <circle class=\"pt\" cx=\"30\" cy=\"74\" r=\"5\"/><circle class=\"pt\" cx=\"120\" cy=\"84\" r=\"5\"/><circle class=\"pt\" cx=\"210\" cy=\"96\" r=\"5\"/><circle class=\"pt\" cx=\"300\" cy=\"110\" r=\"5\"/><circle class=\"pt\" cx=\"390\" cy=\"128\" r=\"5\"/><circle class=\"pt\" cx=\"480\" cy=\"146\" r=\"5\"/><circle class=\"pt out\" cx=\"570\" cy=\"168\" r=\"6\"/>\n</svg>\n<footer><span>Sep 2024</span><span>Mar 2025</span><span>Sep 2025</span><span>Mar 2026</span><span>Sep 2026</span></footer></section></section><section class=\"dz-mod\" data-mod=\"events\" aria-label=\"Annotated events\">\n<section class=\"ev\"><h2>What happened along the way</h2>\n<ol>\n  <li><span class=\"d\">Mar 2025</span><b>Started a plant-based diet</b><span class=\"m\">Reported at intake</span></li>\n  <li><span class=\"d\">Sep 2025</span><b>Iron supplement stopped</b><span class=\"m\">Reported at intake</span></li>\n  <li><span class=\"d\">Jun 2026</span><b>Haemoglobin still in range</b><span class=\"m\">Stores falling before the count does</span></li>\n</ol></section></section><section class=\"dz-mod\" data-mod=\"reading\" aria-label=\"Plain reading\">\n<aside class=\"rd\"><span class=\"k\">In plain terms</span>\n<p>Your ferritin has fallen at a steady rate for two years and has now crossed below the reference range. Haemoglobin has not moved, which is the usual order: stores empty first.</p>\n<p>This is the pattern a clinician would want to look at rather than watch for another quarter.</p>\n<button type=\"button\" class=\"go\">Share with a clinician</button></aside></section>\n</div>",
  "css": "\n.dz-bloom-lab-trend { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 7fr 5fr; column-gap: 24px; padding: 26px 30px 32px; align-content: start; }\n.dz-bloom-lab-trend .hd { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }\n.dz-bloom-lab-trend .k { font-size: 12.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-bloom-lab-trend .hd h1 { font-family: var(--pv-display); font-size: 40px; font-weight: 600; letter-spacing: -.025em; margin: 6px 0 0; }\n.dz-bloom-lab-trend .pick { display: flex; gap: 8px; }\n.dz-bloom-lab-trend .pick button { font: inherit; font-size: 13.5px; background: var(--card); color: var(--muted-foreground); border: var(--pv-bw) solid var(--border); border-radius: 999px; padding: 8px 18px; cursor: pointer; }\n.dz-bloom-lab-trend .pick .on { background: color-mix(in srgb, var(--primary) 15%, transparent); border-color: var(--primary); color: var(--foreground); font-weight: 600; }\n.dz-bloom-lab-trend .ch { grid-column: 1 / -1; 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 14px; margin-bottom: 26px; }\n.dz-bloom-lab-trend .ch header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }\n.dz-bloom-lab-trend .ch b { font-family: var(--pv-mono); font-size: 12.5px; color: var(--muted-foreground); }\n.dz-bloom-lab-trend .lg { display: flex; gap: 18px; font-size: 12px; color: var(--muted-foreground); }\n.dz-bloom-lab-trend .lg span { display: inline-flex; align-items: center; gap: 7px; }\n.dz-bloom-lab-trend .lg i { width: 14px; height: 10px; border-radius: 3px; display: block; }\n.dz-bloom-lab-trend .lg .b { background: color-mix(in srgb, var(--primary) 22%, transparent); }\n.dz-bloom-lab-trend .lg .d { background: var(--primary); border-radius: 999px; height: 10px; width: 10px; }\n.dz-bloom-lab-trend .ch svg { width: 100%; height: 210px; display: block; }\n.dz-bloom-lab-trend .band { fill: color-mix(in srgb, var(--primary) 16%, transparent); rx: 12; }\n.dz-bloom-lab-trend .ln { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }\n.dz-bloom-lab-trend .pt { fill: var(--card); stroke: var(--primary); stroke-width: 2.5; }\n.dz-bloom-lab-trend .pt.out { fill: var(--accent); stroke: var(--accent); }\n.dz-bloom-lab-trend .ch footer { display: flex; justify-content: space-between; font-family: var(--pv-mono); font-size: 11px; color: var(--muted-foreground); padding-top: 6px; }\n.dz-bloom-lab-trend .ev h2, .dz-bloom-lab-trend .rd { font-size: 15px; }\n.dz-bloom-lab-trend .ev h2 { font-family: var(--pv-display); font-size: 21px; font-weight: 600; margin: 0 0 12px; }\n.dz-bloom-lab-trend .ev ol { list-style: none; margin: 0; padding: 0; }\n.dz-bloom-lab-trend .ev li { 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); display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 3px 14px; padding: 14px 20px; margin-bottom: 12px; }\n.dz-bloom-lab-trend .d { grid-row: 1 / 3; font-family: var(--pv-mono); font-size: 12px; color: var(--primary); padding-top: 2px; }\n.dz-bloom-lab-trend .ev b { font-size: 15.5px; font-weight: 600; }\n.dz-bloom-lab-trend .m { font-size: 13px; color: var(--muted-foreground); }\n.dz-bloom-lab-trend .rd { 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: 22px; align-self: start; }\n.dz-bloom-lab-trend .rd p { font-size: 15px; line-height: 1.6; color: var(--muted-foreground); margin: 10px 0 14px; }\n.dz-bloom-lab-trend .go { font: inherit; font-size: 14.5px; width: 100%; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 999px; padding: 13px; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-bloom-lab-trend *, .dz-bloom-lab-trend *::before, .dz-bloom-lab-trend *::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"
}