{
  "id": "quiet-clinic-signin",
  "name": "Accessible Sign-in",
  "theme": "quiet-clinic",
  "category": "Auth & Onboarding",
  "description": "A sign-in with 56px fields, a visible show-password control, and a route for people who cannot sign in that is as prominent as the form.",
  "layout": "Single 26rem centred column with no image at all; the \"I cannot sign in\" panel sits directly under the form with equal weight rather than as a small link.",
  "modules": [
    {
      "key": "brand",
      "name": "Service name",
      "html": "\n<header class=\"bd\"><span class=\"org\">Northfield Health</span><h1>Sign in to your record</h1><p>You will need your NHS number or the email address we have for you.</p></header>"
    },
    {
      "key": "form",
      "name": "Sign-in form",
      "html": "\n<form class=\"fm\" onsubmit=\"return false\">\n  <div class=\"f\"><label for=\"qc-si-id\">Email address or NHS number</label><input id=\"qc-si-id\" type=\"text\" autocomplete=\"username\" inputmode=\"email\"></div>\n  <div class=\"f\"><label for=\"qc-si-pw\">Password</label><div class=\"pw\"><input id=\"qc-si-pw\" type=\"password\" autocomplete=\"current-password\"><button type=\"button\">Show</button></div></div>\n  <button type=\"submit\" class=\"go\">Sign in</button>\n</form>"
    },
    {
      "key": "stuck",
      "name": "If you cannot sign in",
      "html": "\n<section class=\"st\"><h2>If you cannot sign in</h2><ul><li><a href=\"#\">I have forgotten my password</a><span>We send a link. It works for one hour.</span></li><li><a href=\"#\">I do not have an account yet</a><span>Takes about five minutes and needs one form of ID.</span></li><li><a href=\"#\">Someone else manages my care</a><span>Set up proxy access for a family member or carer.</span></li></ul></section>"
    },
    {
      "key": "foot",
      "name": "Support footer",
      "html": "\n<footer class=\"ft\"><p>Trouble with any of this? Call the practice on <b>0113 496 0000</b>, Monday to Friday, 08:00–18:00. Someone will do it with you over the phone.</p><div><a href=\"#\">Accessibility statement</a><a href=\"#\">Privacy</a><a href=\"#\">Cookies</a></div></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "quiet-clinic-signin",
    "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-signin.json",
  "structure": "Single 26rem centred column with no image at all; the \"I cannot sign in\" panel sits directly under the form with equal weight rather than as a small link.",
  "html": "<div class=\"dz dz-quiet-clinic-signin\" data-design=\"quiet-clinic-signin\" data-theme=\"quiet-clinic\">\n<section class=\"dz-mod\" data-mod=\"brand\" aria-label=\"Service name\">\n<header class=\"bd\"><span class=\"org\">Northfield Health</span><h1>Sign in to your record</h1><p>You will need your NHS number or the email address we have for you.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"form\" aria-label=\"Sign-in form\">\n<form class=\"fm\" onsubmit=\"return false\">\n  <div class=\"f\"><label for=\"qc-si-id\">Email address or NHS number</label><input id=\"qc-si-id\" type=\"text\" autocomplete=\"username\" inputmode=\"email\"></div>\n  <div class=\"f\"><label for=\"qc-si-pw\">Password</label><div class=\"pw\"><input id=\"qc-si-pw\" type=\"password\" autocomplete=\"current-password\"><button type=\"button\">Show</button></div></div>\n  <button type=\"submit\" class=\"go\">Sign in</button>\n</form></section>\n<section class=\"dz-mod\" data-mod=\"stuck\" aria-label=\"If you cannot sign in\">\n<section class=\"st\"><h2>If you cannot sign in</h2><ul><li><a href=\"#\">I have forgotten my password</a><span>We send a link. It works for one hour.</span></li><li><a href=\"#\">I do not have an account yet</a><span>Takes about five minutes and needs one form of ID.</span></li><li><a href=\"#\">Someone else manages my care</a><span>Set up proxy access for a family member or carer.</span></li></ul></section></section>\n<section class=\"dz-mod\" data-mod=\"foot\" aria-label=\"Support footer\">\n<footer class=\"ft\"><p>Trouble with any of this? Call the practice on <b>0113 496 0000</b>, Monday to Friday, 08:00–18:00. Someone will do it with you over the phone.</p><div><a href=\"#\">Accessibility statement</a><a href=\"#\">Privacy</a><a href=\"#\">Cookies</a></div></footer></section>\n</div>",
  "css": "\n.dz-quiet-clinic-signin { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 40px 24px 34px; }\n.dz-quiet-clinic-signin .bd, .dz-quiet-clinic-signin .fm, .dz-quiet-clinic-signin .st, .dz-quiet-clinic-signin .ft { max-width: 26rem; margin-left: auto; margin-right: auto; }\n.dz-quiet-clinic-signin .org { font-size: 15px; color: var(--primary); }\n.dz-quiet-clinic-signin .bd h1 { font-size: 30px; font-weight: 700; margin: 8px 0 8px; }\n.dz-quiet-clinic-signin .bd p { margin: 0 0 26px; font-size: 16.5px; line-height: 1.6; color: var(--muted-foreground); }\n.dz-quiet-clinic-signin .f { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }\n.dz-quiet-clinic-signin .f label { font-size: 16.5px; font-weight: 600; }\n.dz-quiet-clinic-signin .f input { font: inherit; font-size: 18px; min-height: 56px; padding: 0 16px; border: 2px solid var(--border); border-radius: var(--pv-radius); background: var(--card); color: var(--foreground); width: 100%; }\n.dz-quiet-clinic-signin .f input:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }\n.dz-quiet-clinic-signin .pw { display: flex; gap: 8px; }\n.dz-quiet-clinic-signin .pw button { flex: none; font: inherit; font-size: 16px; min-height: 56px; padding: 0 20px; border: 2px solid var(--border); border-radius: var(--pv-radius); background: var(--card); color: var(--primary); cursor: pointer; transition: background var(--dur) var(--ease); }\n.dz-quiet-clinic-signin .pw button:hover { background: var(--secondary); }\n.dz-quiet-clinic-signin .go { width: 100%; font: inherit; font-size: 18px; font-weight: 600; min-height: 56px; 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-signin .go:hover { opacity: .9; }\n.dz-quiet-clinic-signin .st { margin-top: 30px; background: var(--card); border-radius: var(--pv-radius); padding: 20px 22px; box-shadow: 0 2px 10px color-mix(in srgb, var(--foreground) 6%, transparent); }\n.dz-quiet-clinic-signin .st h2 { font-size: 19px; font-weight: 700; margin: 0 0 10px; }\n.dz-quiet-clinic-signin .st ul { list-style: none; margin: 0; padding: 0; }\n.dz-quiet-clinic-signin .st li { padding: 12px 0; border-top: var(--pv-bw) solid var(--border); }\n.dz-quiet-clinic-signin .st li:first-child { border-top: 0; }\n.dz-quiet-clinic-signin .st a { display: inline-block; font-size: 17px; color: var(--primary); min-height: 28px; }\n.dz-quiet-clinic-signin .st span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--muted-foreground); }\n.dz-quiet-clinic-signin .ft { margin-top: 24px; }\n.dz-quiet-clinic-signin .ft p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.66; color: var(--muted-foreground); }\n.dz-quiet-clinic-signin .ft b { color: var(--foreground); }\n.dz-quiet-clinic-signin .ft div { display: flex; flex-wrap: wrap; gap: 16px; }\n.dz-quiet-clinic-signin .ft div a { font-size: 15px; color: var(--primary); }\n@media (prefers-reduced-motion: reduce) { .dz-quiet-clinic-signin *, .dz-quiet-clinic-signin *::before, .dz-quiet-clinic-signin *::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"
}