{
  "id": "quiet-clinic-results",
  "name": "Test Results",
  "theme": "quiet-clinic",
  "category": "Data & Reports",
  "description": "Results shown as a position on a labelled range rather than a number in a table, with the clinician's own words above the numbers.",
  "layout": "A plain-language summary panel first, then one row per measurement where the value sits as a marker on a horizontal reference range with the normal band tinted.",
  "modules": [
    {
      "key": "summary",
      "name": "Clinician summary",
      "html": "\n<section class=\"sm\"><span class=\"k\">Reviewed by Dr Priya Sandhu on 12 July</span><h1>Nothing here needs action.</h1><p>Your inflammatory markers are slightly above the usual range, which is expected two weeks after a chest infection. Everything else is where I would want it. We will repeat these in September.</p></section>"
    },
    {
      "key": "ranges",
      "name": "Measurement ranges",
      "html": "\n<section class=\"rs\"><h2>The measurements</h2>\n  <div class=\"ms\"><div class=\"mh\"><b>Haemoglobin</b><span>134 g/L</span></div><div class=\"sc\"><div class=\"band\" style=\"left:32%;width:44%\"></div><i style=\"left:53%\"></i></div><div class=\"lb\"><span>115</span><span class=\"ok\">Usual range 120–150</span><span>170</span></div></div>\n  <div class=\"ms hi\"><div class=\"mh\"><b>C-reactive protein</b><span>14 mg/L</span></div><div class=\"sc\"><div class=\"band\" style=\"left:4%;width:30%\"></div><i style=\"left:46%\"></i></div><div class=\"lb\"><span>0</span><span class=\"ok\">Usual range under 10</span><span>40</span></div><p class=\"nt\">Slightly raised. Expected after a chest infection.</p></div>\n  <div class=\"ms\"><div class=\"mh\"><b>Oxygen saturation</b><span>97%</span></div><div class=\"sc\"><div class=\"band\" style=\"left:55%;width:40%\"></div><i style=\"left:78%\"></i></div><div class=\"lb\"><span>88%</span><span class=\"ok\">Usual range 95–100%</span><span>100%</span></div></div>\n  <div class=\"ms\"><div class=\"mh\"><b>Peak flow</b><span>410 L/min</span></div><div class=\"sc\"><div class=\"band\" style=\"left:44%;width:46%\"></div><i style=\"left:58%\"></i></div><div class=\"lb\"><span>250</span><span class=\"ok\">Expected for you 380–480</span><span>520</span></div></div>\n</section>"
    },
    {
      "key": "next",
      "name": "What happens next",
      "html": "\n<section class=\"nx\"><h2>What happens next</h2><ol><li><b>Nothing, for now.</b> There is no appointment to book and nothing to change.</li><li><b>September.</b> We will send a text when the repeat blood test is due.</li><li><b>If you feel worse before then</b>, contact the practice rather than waiting for September.</li></ol></section>"
    },
    {
      "key": "ask",
      "name": "Ask about this",
      "html": "\n<footer class=\"ak\"><div><h3>Something here does not make sense?</h3><p>Ask about these results and a clinician will reply, usually within two working days.</p></div><button type=\"button\">Ask a question</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "quiet-clinic-results",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:59:53+09:00",
    "updatedAt": "2026-08-29T18:59:53+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/quiet-clinic-results.json",
  "structure": "A plain-language summary panel first, then one row per measurement where the value sits as a marker on a horizontal reference range with the normal band tinted.",
  "html": "<div class=\"dz dz-quiet-clinic-results\" data-design=\"quiet-clinic-results\" data-theme=\"quiet-clinic\">\n<section class=\"dz-mod\" data-mod=\"summary\" aria-label=\"Clinician summary\">\n<section class=\"sm\"><span class=\"k\">Reviewed by Dr Priya Sandhu on 12 July</span><h1>Nothing here needs action.</h1><p>Your inflammatory markers are slightly above the usual range, which is expected two weeks after a chest infection. Everything else is where I would want it. We will repeat these in September.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"ranges\" aria-label=\"Measurement ranges\">\n<section class=\"rs\"><h2>The measurements</h2>\n  <div class=\"ms\"><div class=\"mh\"><b>Haemoglobin</b><span>134 g/L</span></div><div class=\"sc\"><div class=\"band\" style=\"left:32%;width:44%\"></div><i style=\"left:53%\"></i></div><div class=\"lb\"><span>115</span><span class=\"ok\">Usual range 120–150</span><span>170</span></div></div>\n  <div class=\"ms hi\"><div class=\"mh\"><b>C-reactive protein</b><span>14 mg/L</span></div><div class=\"sc\"><div class=\"band\" style=\"left:4%;width:30%\"></div><i style=\"left:46%\"></i></div><div class=\"lb\"><span>0</span><span class=\"ok\">Usual range under 10</span><span>40</span></div><p class=\"nt\">Slightly raised. Expected after a chest infection.</p></div>\n  <div class=\"ms\"><div class=\"mh\"><b>Oxygen saturation</b><span>97%</span></div><div class=\"sc\"><div class=\"band\" style=\"left:55%;width:40%\"></div><i style=\"left:78%\"></i></div><div class=\"lb\"><span>88%</span><span class=\"ok\">Usual range 95–100%</span><span>100%</span></div></div>\n  <div class=\"ms\"><div class=\"mh\"><b>Peak flow</b><span>410 L/min</span></div><div class=\"sc\"><div class=\"band\" style=\"left:44%;width:46%\"></div><i style=\"left:58%\"></i></div><div class=\"lb\"><span>250</span><span class=\"ok\">Expected for you 380–480</span><span>520</span></div></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"next\" aria-label=\"What happens next\">\n<section class=\"nx\"><h2>What happens next</h2><ol><li><b>Nothing, for now.</b> There is no appointment to book and nothing to change.</li><li><b>September.</b> We will send a text when the repeat blood test is due.</li><li><b>If you feel worse before then</b>, contact the practice rather than waiting for September.</li></ol></section></section>\n<section class=\"dz-mod\" data-mod=\"ask\" aria-label=\"Ask about this\">\n<footer class=\"ak\"><div><h3>Something here does not make sense?</h3><p>Ask about these results and a clinician will reply, usually within two working days.</p></div><button type=\"button\">Ask a question</button></footer></section>\n</div>",
  "css": "\n.dz-quiet-clinic-results { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px 30px 30px; max-width: 50rem; margin: 0 auto; }\n.dz-quiet-clinic-results .sm { background: var(--accent); color: var(--accent-foreground); border-radius: var(--pv-radius-xl); padding: 24px 28px; margin-bottom: 26px; }\n.dz-quiet-clinic-results .k { font-size: 14.5px; opacity: .85; }\n.dz-quiet-clinic-results .sm h1 { font-size: 30px; font-weight: 700; margin: 8px 0 10px; }\n.dz-quiet-clinic-results .sm p { margin: 0; font-size: 17px; line-height: 1.7; max-width: 58ch; }\n.dz-quiet-clinic-results h2 { font-size: 21px; font-weight: 700; margin: 0 0 16px; }\n.dz-quiet-clinic-results .ms { padding: 18px 0; border-top: var(--pv-bw) solid var(--border); }\n.dz-quiet-clinic-results .mh { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }\n.dz-quiet-clinic-results .mh b { font-size: 18px; font-weight: 600; }\n.dz-quiet-clinic-results .mh span { font-size: 20px; font-weight: 700; }\n.dz-quiet-clinic-results .ms.hi .mh span { color: var(--primary); }\n.dz-quiet-clinic-results .sc { position: relative; height: 16px; background: var(--muted); border-radius: var(--pv-radius-xl); }\n.dz-quiet-clinic-results .band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--primary) 26%, transparent); border-radius: var(--pv-radius-xl); }\n.dz-quiet-clinic-results .sc i { position: absolute; top: -4px; width: 6px; height: 24px; border-radius: 3px; background: var(--foreground); }\n.dz-quiet-clinic-results .ms.hi .sc i { background: var(--primary); }\n.dz-quiet-clinic-results .lb { display: flex; justify-content: space-between; margin-top: 8px; font-size: 14px; color: var(--muted-foreground); }\n.dz-quiet-clinic-results .ok { color: var(--foreground); }\n.dz-quiet-clinic-results .nt { margin: 10px 0 0; font-size: 15.5px; color: var(--primary); }\n.dz-quiet-clinic-results .nx { margin-top: 26px; padding-top: 22px; border-top: var(--pv-bw) solid var(--border); }\n.dz-quiet-clinic-results .nx ol { margin: 0; padding-left: 22px; }\n.dz-quiet-clinic-results .nx li { font-size: 16.5px; line-height: 1.7; margin-bottom: 10px; color: var(--muted-foreground); }\n.dz-quiet-clinic-results .nx b { color: var(--foreground); }\n.dz-quiet-clinic-results .ak { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 26px; background: var(--card); border-radius: var(--pv-radius); padding: 20px 24px; box-shadow: 0 2px 10px color-mix(in srgb, var(--foreground) 6%, transparent); }\n.dz-quiet-clinic-results .ak h3 { font-size: 18px; font-weight: 700; margin: 0 0 5px; }\n.dz-quiet-clinic-results .ak p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted-foreground); max-width: 48ch; }\n.dz-quiet-clinic-results .ak button { flex: none; font: inherit; font-size: 16px; font-weight: 600; min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--pv-radius); background: var(--primary); color: var(--primary-foreground); cursor: pointer; transition: opacity var(--dur) var(--ease); }\n.dz-quiet-clinic-results .ak button:hover { opacity: .9; }\n@media (prefers-reduced-motion: reduce) { .dz-quiet-clinic-results *, .dz-quiet-clinic-results *::before, .dz-quiet-clinic-results *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/quiet-clinic.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}