{
  "id": "quiet-clinic-setup",
  "name": "Guided Setup",
  "theme": "quiet-clinic",
  "category": "Auth & Onboarding",
  "description": "A setup checklist that lets you stop at any point, tells you what each step unlocks, and never blocks the useful part behind the optional part.",
  "layout": "A left checklist rail of five steps with clear done/current/later states and a right panel showing only the current step; the \"use it without finishing\" route is always visible.",
  "modules": [
    {
      "key": "rail",
      "name": "Setup checklist",
      "html": "\n<aside class=\"rl\">\n  <h2>Setting up</h2>\n  <ol>\n    <li class=\"done\"><b>Confirm your identity</b><span>Done</span></li>\n    <li class=\"done\"><b>Set a password</b><span>Done</span></li>\n    <li class=\"now\"><b>Choose how we contact you</b><span>Now</span></li>\n    <li><b>Add someone who can help</b><span>Optional</span></li>\n    <li><b>Link your pharmacy</b><span>Optional</span></li>\n  </ol>\n  <button type=\"button\" class=\"sk\">Use the portal without finishing</button>\n</aside>"
    },
    {
      "key": "panel",
      "name": "Current step",
      "html": "\n<section class=\"pn\">\n  <span class=\"k\">Step 3 of 5</span>\n  <h1>How should we contact you?</h1>\n  <p class=\"lede\">You can change any of this later, and having more than one is fine.</p>\n  <div class=\"opts\">\n    <label class=\"op on\"><input type=\"checkbox\" checked><span><b>Text message</b><em>Appointment reminders and short updates. Never anything clinical in the message itself.</em></span></label>\n    <label class=\"op on\"><input type=\"checkbox\" checked><span><b>Email</b><em>Results, letters and anything long enough to need reading twice.</em></span></label>\n    <label class=\"op\"><input type=\"checkbox\"><span><b>Post</b><em>Slower, and we will still text you about appointments. Choose this if screens are difficult.</em></span></label>\n    <label class=\"op\"><input type=\"checkbox\"><span><b>Phone call</b><em>For results we would rather explain than write down.</em></span></label>\n  </div>\n</section>"
    },
    {
      "key": "nav",
      "name": "Step buttons",
      "html": "\n<div class=\"nv\"><button type=\"button\" class=\"bk\">Back</button><button type=\"button\" class=\"nx\">Save and continue</button><button type=\"button\" class=\"lt\">Do this later</button></div>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "quiet-clinic-setup",
    "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-setup.json",
  "structure": "A left checklist rail of five steps with clear done/current/later states and a right panel showing only the current step; the \"use it without finishing\" route is always visible.",
  "html": "<div class=\"dz dz-quiet-clinic-setup\" data-design=\"quiet-clinic-setup\" data-theme=\"quiet-clinic\">\n<section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"Setup checklist\">\n<aside class=\"rl\">\n  <h2>Setting up</h2>\n  <ol>\n    <li class=\"done\"><b>Confirm your identity</b><span>Done</span></li>\n    <li class=\"done\"><b>Set a password</b><span>Done</span></li>\n    <li class=\"now\"><b>Choose how we contact you</b><span>Now</span></li>\n    <li><b>Add someone who can help</b><span>Optional</span></li>\n    <li><b>Link your pharmacy</b><span>Optional</span></li>\n  </ol>\n  <button type=\"button\" class=\"sk\">Use the portal without finishing</button>\n</aside></section><section class=\"dz-mod\" data-mod=\"panel\" aria-label=\"Current step\">\n<section class=\"pn\">\n  <span class=\"k\">Step 3 of 5</span>\n  <h1>How should we contact you?</h1>\n  <p class=\"lede\">You can change any of this later, and having more than one is fine.</p>\n  <div class=\"opts\">\n    <label class=\"op on\"><input type=\"checkbox\" checked><span><b>Text message</b><em>Appointment reminders and short updates. Never anything clinical in the message itself.</em></span></label>\n    <label class=\"op on\"><input type=\"checkbox\" checked><span><b>Email</b><em>Results, letters and anything long enough to need reading twice.</em></span></label>\n    <label class=\"op\"><input type=\"checkbox\"><span><b>Post</b><em>Slower, and we will still text you about appointments. Choose this if screens are difficult.</em></span></label>\n    <label class=\"op\"><input type=\"checkbox\"><span><b>Phone call</b><em>For results we would rather explain than write down.</em></span></label>\n  </div>\n</section></section><section class=\"dz-mod\" data-mod=\"nav\" aria-label=\"Step buttons\">\n<div class=\"nv\"><button type=\"button\" class=\"bk\">Back</button><button type=\"button\" class=\"nx\">Save and continue</button><button type=\"button\" class=\"lt\">Do this later</button></div></section>\n</div>",
  "css": "\n.dz-quiet-clinic-setup { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; padding: 30px 32px 30px; }\n.dz-quiet-clinic-setup .rl { background: var(--muted); border-radius: var(--pv-radius); padding: 22px 22px 22px; align-self: start; }\n.dz-quiet-clinic-setup .rl h2 { font-size: 17px; font-weight: 700; margin: 0 0 14px; }\n.dz-quiet-clinic-setup .rl ol { list-style: none; margin: 0 0 20px; padding: 0; counter-reset: s; }\n.dz-quiet-clinic-setup .rl li { counter-increment: s; position: relative; padding: 12px 0 12px 34px; border-top: var(--pv-bw) solid var(--border); }\n.dz-quiet-clinic-setup .rl li:first-child { border-top: 0; }\n.dz-quiet-clinic-setup .rl li::before { content: counter(s); position: absolute; left: 0; top: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--background); color: var(--muted-foreground); font-size: 13px; font-weight: 600; }\n.dz-quiet-clinic-setup .rl .done::before { content: \"✓\"; background: var(--primary); color: var(--primary-foreground); }\n.dz-quiet-clinic-setup .rl .now::before { background: var(--accent); color: var(--accent-foreground); }\n.dz-quiet-clinic-setup .rl b { display: block; font-size: 15.5px; font-weight: 600; }\n.dz-quiet-clinic-setup .rl li span { font-size: 13.5px; color: var(--muted-foreground); }\n.dz-quiet-clinic-setup .rl .now b { color: var(--primary); }\n.dz-quiet-clinic-setup .sk { width: 100%; font: inherit; font-size: 15px; min-height: 48px; padding: 0 16px; 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-setup .sk:hover { background: var(--card); }\n.dz-quiet-clinic-setup .k { font-size: 15px; color: var(--primary); }\n.dz-quiet-clinic-setup .pn h1 { font-size: 30px; font-weight: 700; margin: 8px 0 8px; }\n.dz-quiet-clinic-setup .lede { margin: 0 0 22px; font-size: 17px; line-height: 1.6; color: var(--muted-foreground); }\n.dz-quiet-clinic-setup .opts { display: flex; flex-direction: column; gap: 12px; }\n.dz-quiet-clinic-setup .op { display: flex; align-items: flex-start; gap: 14px; min-height: 48px; padding: 16px 20px; border: 2px solid var(--border); border-radius: var(--pv-radius); background: var(--card); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }\n.dz-quiet-clinic-setup .op:hover { background: var(--secondary); }\n.dz-quiet-clinic-setup .op.on { border-color: var(--primary); }\n.dz-quiet-clinic-setup .op input { accent-color: var(--primary); width: 22px; height: 22px; margin-top: 2px; flex: none; }\n.dz-quiet-clinic-setup .op b { display: block; font-size: 17.5px; font-weight: 600; }\n.dz-quiet-clinic-setup .op em { display: block; font-style: normal; margin-top: 4px; font-size: 15.5px; line-height: 1.6; color: var(--muted-foreground); max-width: 56ch; }\n.dz-quiet-clinic-setup .nv { grid-column: 2; display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: var(--pv-bw) solid var(--border); }\n.dz-quiet-clinic-setup .nv button { font: inherit; font-size: 16px; min-height: 52px; padding: 0 24px; 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-setup .nv button:hover { background: var(--secondary); }\n.dz-quiet-clinic-setup .nx { background: var(--primary) !important; color: var(--primary-foreground); border-color: var(--primary) !important; font-weight: 600; }\n.dz-quiet-clinic-setup .nx:hover { opacity: .9; }\n.dz-quiet-clinic-setup .lt { margin-left: auto; border: 0 !important; background: none !important; color: var(--primary) !important; text-decoration: underline; }\n@media (prefers-reduced-motion: reduce) { .dz-quiet-clinic-setup *, .dz-quiet-clinic-setup *::before, .dz-quiet-clinic-setup *::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"
}