{
  "id": "quiet-clinic-account",
  "name": "Account Details",
  "theme": "quiet-clinic",
  "category": "Settings & Forms",
  "description": "An account page where every field shows its current value as text and turns into an input only when you choose to change that one thing.",
  "layout": "Definition-list rows with a Change button per row rather than one page-wide edit mode; one row is shown in its open editing state so the pattern is legible from the screenshot.",
  "modules": [
    {
      "key": "head",
      "name": "Account header",
      "html": "\n<header class=\"ah\"><h1>Your details</h1><p>Kept by Northfield Health. Changing your name or address here updates your record everywhere.</p></header>"
    },
    {
      "key": "personal",
      "name": "Personal details",
      "html": "\n<section class=\"grp\"><h2>About you</h2>\n  <dl>\n    <div class=\"rw\"><dt>Name</dt><dd>Marion Okafor</dd><button type=\"button\">Change</button></div>\n    <div class=\"rw\"><dt>Date of birth</dt><dd>14 March 1961</dd><span class=\"lock\">Contact us to change</span></div>\n    <div class=\"rw open\"><dt><label for=\"qc-ac-addr\">Address</label></dt><dd><input id=\"qc-ac-addr\" type=\"text\" value=\"18 Beckett Road, Leeds LS9 8AA\"><small>Start typing and we will suggest addresses.</small></dd><div class=\"ed\"><button type=\"button\" class=\"sv\">Save</button><button type=\"button\" class=\"cn\">Cancel</button></div></div>\n    <div class=\"rw\"><dt>Phone</dt><dd>07700 900184</dd><button type=\"button\">Change</button></div>\n  </dl>\n</section>"
    },
    {
      "key": "contact",
      "name": "How we contact you",
      "html": "\n<section class=\"grp\"><h2>How we contact you</h2>\n  <div class=\"ck\"><input type=\"checkbox\" id=\"qc-ac-sms\" checked><label for=\"qc-ac-sms\"><b>Text message</b><em>Appointment reminders, 3 days and 1 day before.</em></label></div>\n  <div class=\"ck\"><input type=\"checkbox\" id=\"qc-ac-eml\" checked><label for=\"qc-ac-eml\"><b>Email</b><em>Results and letters. Never anything clinical in the subject line.</em></label></div>\n  <div class=\"ck\"><input type=\"checkbox\" id=\"qc-ac-post\"><label for=\"qc-ac-post\"><b>Post</b><em>Slower, but some people prefer it. You can have both.</em></label></div>\n</section>"
    },
    {
      "key": "data",
      "name": "Your data",
      "html": "\n<section class=\"grp last\"><h2>Your data</h2>\n  <div class=\"rw\"><dt>Download your record</dt><dd>Everything we hold, as a PDF and a data file.</dd><button type=\"button\">Download</button></div>\n  <div class=\"rw\"><dt>Who has looked at it</dt><dd>A list of every access, with names and dates.</dd><button type=\"button\">View log</button></div>\n</section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "quiet-clinic-account",
    "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-account.json",
  "structure": "Definition-list rows with a Change button per row rather than one page-wide edit mode; one row is shown in its open editing state so the pattern is legible from the screenshot.",
  "html": "<div class=\"dz dz-quiet-clinic-account\" data-design=\"quiet-clinic-account\" data-theme=\"quiet-clinic\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Account header\">\n<header class=\"ah\"><h1>Your details</h1><p>Kept by Northfield Health. Changing your name or address here updates your record everywhere.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"personal\" aria-label=\"Personal details\">\n<section class=\"grp\"><h2>About you</h2>\n  <dl>\n    <div class=\"rw\"><dt>Name</dt><dd>Marion Okafor</dd><button type=\"button\">Change</button></div>\n    <div class=\"rw\"><dt>Date of birth</dt><dd>14 March 1961</dd><span class=\"lock\">Contact us to change</span></div>\n    <div class=\"rw open\"><dt><label for=\"qc-ac-addr\">Address</label></dt><dd><input id=\"qc-ac-addr\" type=\"text\" value=\"18 Beckett Road, Leeds LS9 8AA\"><small>Start typing and we will suggest addresses.</small></dd><div class=\"ed\"><button type=\"button\" class=\"sv\">Save</button><button type=\"button\" class=\"cn\">Cancel</button></div></div>\n    <div class=\"rw\"><dt>Phone</dt><dd>07700 900184</dd><button type=\"button\">Change</button></div>\n  </dl>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"contact\" aria-label=\"How we contact you\">\n<section class=\"grp\"><h2>How we contact you</h2>\n  <div class=\"ck\"><input type=\"checkbox\" id=\"qc-ac-sms\" checked><label for=\"qc-ac-sms\"><b>Text message</b><em>Appointment reminders, 3 days and 1 day before.</em></label></div>\n  <div class=\"ck\"><input type=\"checkbox\" id=\"qc-ac-eml\" checked><label for=\"qc-ac-eml\"><b>Email</b><em>Results and letters. Never anything clinical in the subject line.</em></label></div>\n  <div class=\"ck\"><input type=\"checkbox\" id=\"qc-ac-post\"><label for=\"qc-ac-post\"><b>Post</b><em>Slower, but some people prefer it. You can have both.</em></label></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"data\" aria-label=\"Your data\">\n<section class=\"grp last\"><h2>Your data</h2>\n  <div class=\"rw\"><dt>Download your record</dt><dd>Everything we hold, as a PDF and a data file.</dd><button type=\"button\">Download</button></div>\n  <div class=\"rw\"><dt>Who has looked at it</dt><dd>A list of every access, with names and dates.</dd><button type=\"button\">View log</button></div>\n</section></section>\n</div>",
  "css": "\n.dz-quiet-clinic-account { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px 30px 32px; max-width: 48rem; margin: 0 auto; }\n.dz-quiet-clinic-account .ah h1 { font-size: 32px; font-weight: 700; margin: 0 0 6px; }\n.dz-quiet-clinic-account .ah p { margin: 0 0 26px; font-size: 16.5px; line-height: 1.6; color: var(--muted-foreground); max-width: 56ch; }\n.dz-quiet-clinic-account .grp { background: var(--card); border-radius: var(--pv-radius); padding: 6px 24px 12px; margin-bottom: 18px; box-shadow: 0 2px 10px color-mix(in srgb, var(--foreground) 6%, transparent); }\n.dz-quiet-clinic-account .grp h2 { font-size: 19px; font-weight: 700; margin: 20px 0 4px; }\n.dz-quiet-clinic-account .grp dl { margin: 0; }\n.dz-quiet-clinic-account .rw { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px 0; border-top: var(--pv-bw) solid var(--border); }\n.dz-quiet-clinic-account .grp h2 + dl .rw:first-child, .dz-quiet-clinic-account .grp h2 + .rw { border-top: 0; }\n.dz-quiet-clinic-account .rw dt { font-size: 16px; color: var(--muted-foreground); }\n.dz-quiet-clinic-account .rw dd { margin: 0; font-size: 17px; }\n.dz-quiet-clinic-account .rw button { font: inherit; font-size: 15.5px; min-height: 48px; padding: 0 22px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); background: var(--background); color: var(--primary); cursor: pointer; transition: background var(--dur) var(--ease); }\n.dz-quiet-clinic-account .rw button:hover { background: var(--secondary); }\n.dz-quiet-clinic-account .lock { font-size: 14.5px; color: var(--muted-foreground); }\n.dz-quiet-clinic-account .rw.open { background: var(--secondary); margin: 0 -24px; padding: 16px 24px; align-items: start; }\n.dz-quiet-clinic-account .rw.open dt { padding-top: 12px; }\n.dz-quiet-clinic-account .rw.open input { width: 100%; font: inherit; font-size: 17px; min-height: 48px; padding: 0 14px; border: 2px solid var(--primary); border-radius: var(--pv-radius); background: var(--background); color: var(--foreground); }\n.dz-quiet-clinic-account .rw.open input:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }\n.dz-quiet-clinic-account .rw.open small { display: block; margin-top: 7px; font-size: 14.5px; color: var(--muted-foreground); }\n.dz-quiet-clinic-account .ed { display: flex; gap: 8px; }\n.dz-quiet-clinic-account .ed .sv { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }\n.dz-quiet-clinic-account .ed .sv:hover { background: var(--primary); opacity: .9; }\n.dz-quiet-clinic-account .ck { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: var(--pv-bw) solid var(--border); min-height: 48px; }\n.dz-quiet-clinic-account .grp h2 + .ck { border-top: 0; }\n.dz-quiet-clinic-account .ck input { accent-color: var(--primary); width: 22px; height: 22px; margin-top: 3px; flex: none; }\n.dz-quiet-clinic-account .ck b { display: block; font-size: 17px; font-weight: 600; }\n.dz-quiet-clinic-account .ck em { display: block; font-style: normal; margin-top: 3px; font-size: 15px; line-height: 1.55; color: var(--muted-foreground); }\n.dz-quiet-clinic-account .last { margin-bottom: 0; }\n@media (prefers-reduced-motion: reduce) { .dz-quiet-clinic-account *, .dz-quiet-clinic-account *::before, .dz-quiet-clinic-account *::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"
}