{
  "id": "quiet-clinic-portal",
  "name": "Patient Portal",
  "theme": "quiet-clinic",
  "category": "Dashboard",
  "description": "A portal home that opens with the one thing happening next, at a size you can read from arm's length, and hides everything else below it.",
  "layout": "A single full-width \"next appointment\" panel at the top taking a third of the screen, then a calm three-up row of secondary cards; no metrics, no charts, no badges.",
  "modules": [
    {
      "key": "greet",
      "name": "Greeting bar",
      "html": "\n<header class=\"gb\"><div><p class=\"hi\">Good afternoon, Marion</p><p class=\"sub\">Northfield Health · Last signed in 4 days ago</p></div><button type=\"button\" class=\"ac\">Your account</button></header>"
    },
    {
      "key": "next",
      "name": "Next appointment",
      "html": "\n<section class=\"nx\">\n  <span class=\"k\">Your next appointment</span>\n  <h1>Thursday 24 July, 10:20</h1>\n  <p class=\"who\">Dr Priya Sandhu · Respiratory clinic</p>\n  <p class=\"where\">Northfield Health Centre, first floor. There is a lift to the right of reception.</p>\n  <div class=\"acts\"><button type=\"button\" class=\"pri\">Add to calendar</button><button type=\"button\">Change or cancel</button><button type=\"button\">Get directions</button></div>\n</section>"
    },
    {
      "key": "cards",
      "name": "Secondary cards",
      "html": "\n<div class=\"row\">\n  <a class=\"cd\" href=\"#\"><h2>Test results</h2><p>Two results are ready to view. Both were reviewed by Dr Sandhu on 12 July.</p><span class=\"lnk\">See results</span></a>\n  <a class=\"cd\" href=\"#\"><h2>Repeat prescriptions</h2><p>Your inhaler is due for renewal in 9 days.</p><span class=\"lnk\">Order a repeat</span></a>\n  <a class=\"cd\" href=\"#\"><h2>Messages</h2><p>No unread messages. Replies usually arrive within two working days.</p><span class=\"lnk\">Send a message</span></a>\n</div>"
    },
    {
      "key": "help",
      "name": "Help footer",
      "html": "\n<footer class=\"hf\"><h3>If something is wrong right now</h3><p>This portal is not monitored. For urgent help call <b>111</b>, or <b>999</b> if it is an emergency.</p></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "quiet-clinic-portal",
    "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-portal.json",
  "structure": "A single full-width \"next appointment\" panel at the top taking a third of the screen, then a calm three-up row of secondary cards; no metrics, no charts, no badges.",
  "html": "<div class=\"dz dz-quiet-clinic-portal\" data-design=\"quiet-clinic-portal\" data-theme=\"quiet-clinic\">\n<section class=\"dz-mod\" data-mod=\"greet\" aria-label=\"Greeting bar\">\n<header class=\"gb\"><div><p class=\"hi\">Good afternoon, Marion</p><p class=\"sub\">Northfield Health · Last signed in 4 days ago</p></div><button type=\"button\" class=\"ac\">Your account</button></header></section>\n<section class=\"dz-mod\" data-mod=\"next\" aria-label=\"Next appointment\">\n<section class=\"nx\">\n  <span class=\"k\">Your next appointment</span>\n  <h1>Thursday 24 July, 10:20</h1>\n  <p class=\"who\">Dr Priya Sandhu · Respiratory clinic</p>\n  <p class=\"where\">Northfield Health Centre, first floor. There is a lift to the right of reception.</p>\n  <div class=\"acts\"><button type=\"button\" class=\"pri\">Add to calendar</button><button type=\"button\">Change or cancel</button><button type=\"button\">Get directions</button></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"cards\" aria-label=\"Secondary cards\">\n<div class=\"row\">\n  <a class=\"cd\" href=\"#\"><h2>Test results</h2><p>Two results are ready to view. Both were reviewed by Dr Sandhu on 12 July.</p><span class=\"lnk\">See results</span></a>\n  <a class=\"cd\" href=\"#\"><h2>Repeat prescriptions</h2><p>Your inhaler is due for renewal in 9 days.</p><span class=\"lnk\">Order a repeat</span></a>\n  <a class=\"cd\" href=\"#\"><h2>Messages</h2><p>No unread messages. Replies usually arrive within two working days.</p><span class=\"lnk\">Send a message</span></a>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"help\" aria-label=\"Help footer\">\n<footer class=\"hf\"><h3>If something is wrong right now</h3><p>This portal is not monitored. For urgent help call <b>111</b>, or <b>999</b> if it is an emergency.</p></footer></section>\n</div>",
  "css": "\n.dz-quiet-clinic-portal { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 24px 30px 30px; }\n.dz-quiet-clinic-portal .gb { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 20px; }\n.dz-quiet-clinic-portal .hi { margin: 0 0 4px; font-size: 22px; font-weight: 600; }\n.dz-quiet-clinic-portal .sub { margin: 0; font-size: 14.5px; color: var(--muted-foreground); }\n.dz-quiet-clinic-portal .ac { font: inherit; font-size: 15px; min-height: 48px; padding: 0 22px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); background: var(--card); color: var(--foreground); cursor: pointer; transition: background var(--dur) var(--ease); }\n.dz-quiet-clinic-portal .ac:hover { background: var(--secondary); }\n.dz-quiet-clinic-portal .nx { background: var(--card); border-radius: var(--pv-radius-xl); padding: 28px 30px; box-shadow: 0 4px 18px color-mix(in srgb, var(--foreground) 8%, transparent); }\n.dz-quiet-clinic-portal .k { font-size: 15px; color: var(--primary); }\n.dz-quiet-clinic-portal .nx h1 { font-size: 38px; line-height: 1.14; font-weight: 700; margin: 8px 0 8px; }\n.dz-quiet-clinic-portal .who { margin: 0 0 6px; font-size: 19px; }\n.dz-quiet-clinic-portal .where { margin: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--muted-foreground); max-width: 52ch; }\n.dz-quiet-clinic-portal .acts { display: flex; flex-wrap: wrap; gap: 12px; }\n.dz-quiet-clinic-portal .acts button { font: inherit; font-size: 16px; min-height: 48px; padding: 0 24px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); background: var(--background); color: var(--foreground); cursor: pointer; transition: background var(--dur) var(--ease); }\n.dz-quiet-clinic-portal .acts button:hover { background: var(--secondary); }\n.dz-quiet-clinic-portal .acts .pri { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }\n.dz-quiet-clinic-portal .acts .pri:hover { opacity: .9; background: var(--primary); }\n.dz-quiet-clinic-portal .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }\n.dz-quiet-clinic-portal .cd { display: block; background: var(--card); border-radius: var(--pv-radius); padding: 22px 24px; text-decoration: none; color: var(--foreground); box-shadow: 0 2px 10px color-mix(in srgb, var(--foreground) 6%, transparent); transition: background var(--dur) var(--ease); }\n.dz-quiet-clinic-portal .cd:hover { background: var(--secondary); }\n.dz-quiet-clinic-portal .cd h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px; }\n.dz-quiet-clinic-portal .cd p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.62; color: var(--muted-foreground); }\n.dz-quiet-clinic-portal .lnk { font-size: 15.5px; color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 2px; }\n.dz-quiet-clinic-portal .hf { margin-top: 22px; background: var(--muted); border-radius: var(--pv-radius); padding: 20px 24px; }\n.dz-quiet-clinic-portal .hf h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }\n.dz-quiet-clinic-portal .hf p { margin: 0; font-size: 16px; line-height: 1.62; }\n.dz-quiet-clinic-portal .hf b { color: var(--primary); }\n@media (prefers-reduced-motion: reduce) { .dz-quiet-clinic-portal *, .dz-quiet-clinic-portal *::before, .dz-quiet-clinic-portal *::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"
}