{
  "id": "evidence-office-sign-in",
  "name": "Institutional Sign-in",
  "theme": "evidence-office",
  "category": "Auth & Onboarding",
  "description": "A sign-in that leads with the organisation and the sensitivity of what is behind it, not with a logo and a gradient.",
  "layout": "Two panes: a photographic left half with the service name overprinted at the bottom, and a right half holding a narrow form with the SSO route above the credential route.",
  "modules": [
    {
      "key": "plate",
      "name": "Building plate",
      "html": "\n<div class=\"plate\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><div class=\"plate-cap\"><span>City of Northfield</span><b>Planning Registry</b></div></div>"
    },
    {
      "key": "form",
      "name": "Sign-in form",
      "html": "\n<div class=\"fw\">\n  <h1>Sign in</h1>\n  <p class=\"lead\">This service holds personal data. Access is logged against your name.</p>\n  <button type=\"button\" class=\"sso\">Continue with council single sign-on</button>\n  <div class=\"or\"><span>or use a service account</span></div>\n  <form onsubmit=\"return false\">\n    <div class=\"f\"><label for=\"eo-si-user\">Username</label><input id=\"eo-si-user\" type=\"text\" autocomplete=\"username\"></div>\n    <div class=\"f\"><label for=\"eo-si-pass\">Password</label><input id=\"eo-si-pass\" type=\"password\" autocomplete=\"current-password\"></div>\n    <button type=\"submit\" class=\"go\">Sign in</button>\n  </form>\n  <a class=\"help\" href=\"#\">I cannot access my account</a>\n</div>"
    },
    {
      "key": "notice",
      "name": "Legal notice",
      "html": "\n<footer class=\"legal\"><p>Unauthorised access to this system is an offence under the Computer Misuse Act 1990. Sessions expire after 30 minutes of inactivity.</p><div><a href=\"#\">Accessibility</a><a href=\"#\">Privacy notice</a><a href=\"#\">Contact the service desk</a></div></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "evidence-office-sign-in",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:23:29+09:00",
    "updatedAt": "2026-08-29T18:23:29+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/evidence-office-sign-in.json",
  "structure": "Two panes: a photographic left half with the service name overprinted at the bottom, and a right half holding a narrow form with the SSO route above the credential route.",
  "html": "<div class=\"dz dz-evidence-office-sign-in\" data-design=\"evidence-office-sign-in\" data-theme=\"evidence-office\">\n<section class=\"dz-mod\" data-mod=\"plate\" aria-label=\"Building plate\">\n<div class=\"plate\"><img src=\"https://designlookbook.dev/assets/img/evidence-office-hero.webp\" alt=\"Rows of grey archive shelving receding under even fluorescent light\"><div class=\"plate-cap\"><span>City of Northfield</span><b>Planning Registry</b></div></div></section><section class=\"dz-mod\" data-mod=\"form\" aria-label=\"Sign-in form\">\n<div class=\"fw\">\n  <h1>Sign in</h1>\n  <p class=\"lead\">This service holds personal data. Access is logged against your name.</p>\n  <button type=\"button\" class=\"sso\">Continue with council single sign-on</button>\n  <div class=\"or\"><span>or use a service account</span></div>\n  <form onsubmit=\"return false\">\n    <div class=\"f\"><label for=\"eo-si-user\">Username</label><input id=\"eo-si-user\" type=\"text\" autocomplete=\"username\"></div>\n    <div class=\"f\"><label for=\"eo-si-pass\">Password</label><input id=\"eo-si-pass\" type=\"password\" autocomplete=\"current-password\"></div>\n    <button type=\"submit\" class=\"go\">Sign in</button>\n  </form>\n  <a class=\"help\" href=\"#\">I cannot access my account</a>\n</div></section><section class=\"dz-mod\" data-mod=\"notice\" aria-label=\"Legal notice\">\n<footer class=\"legal\"><p>Unauthorised access to this system is an offence under the Computer Misuse Act 1990. Sessions expire after 30 minutes of inactivity.</p><div><a href=\"#\">Accessibility</a><a href=\"#\">Privacy notice</a><a href=\"#\">Contact the service desk</a></div></footer></section>\n</div>",
  "css": "\n.dz-evidence-office-sign-in { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: minmax(0, 1fr) auto; min-height: 520px; }\n.dz-evidence-office-sign-in .plate { grid-row: 1 / -1; position: relative; overflow: hidden; background: var(--muted); }\n.dz-evidence-office-sign-in .plate img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-evidence-office-sign-in .plate-cap { position: absolute; left: 0; bottom: 0; padding: 20px 26px; background: var(--foreground); color: var(--background); }\n.dz-evidence-office-sign-in .plate-cap span { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }\n.dz-evidence-office-sign-in .plate-cap b { display: block; font-family: var(--pv-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }\n.dz-evidence-office-sign-in .fw { padding: 44px 40px 20px; border-left: var(--pv-bw) solid var(--border); }\n.dz-evidence-office-sign-in .fw h1 { font-family: var(--pv-display); font-size: 26px; letter-spacing: -.025em; margin: 0 0 8px; }\n.dz-evidence-office-sign-in .lead { margin: 0 0 22px; font-size: 13.5px; line-height: 1.55; color: var(--muted-foreground); }\n.dz-evidence-office-sign-in .sso { width: 100%; font: inherit; font-size: 14px; font-weight: 600; padding: 12px; border: var(--pv-bw) solid var(--primary); border-radius: var(--pv-radius-sm); background: var(--card); color: var(--primary); cursor: pointer; transition: background var(--dur) var(--ease); }\n.dz-evidence-office-sign-in .sso:hover { background: var(--secondary); }\n.dz-evidence-office-sign-in .or { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-evidence-office-sign-in .or::before, .dz-evidence-office-sign-in .or::after { content: \"\"; flex: 1; height: var(--pv-bw); background: var(--border); }\n.dz-evidence-office-sign-in .f { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }\n.dz-evidence-office-sign-in .f label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-evidence-office-sign-in .f input { font: inherit; font-size: 15px; padding: 10px 12px; border: var(--pv-bw) solid var(--input); border-radius: var(--pv-radius-sm); background: var(--card); color: var(--foreground); }\n.dz-evidence-office-sign-in .f input:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }\n.dz-evidence-office-sign-in .go { width: 100%; font: inherit; font-size: 14px; font-weight: 600; padding: 12px; margin-top: 4px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-sm); background: var(--secondary); color: var(--secondary-foreground); cursor: pointer; }\n.dz-evidence-office-sign-in .help { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--primary); text-decoration: none; border-bottom: var(--pv-bw) solid var(--primary); }\n.dz-evidence-office-sign-in .legal { border-left: var(--pv-bw) solid var(--border); border-top: var(--pv-bw) solid var(--border); padding: 14px 40px 20px; }\n.dz-evidence-office-sign-in .legal p { margin: 0 0 10px; font-size: 11.5px; line-height: 1.55; color: var(--muted-foreground); }\n.dz-evidence-office-sign-in .legal div { display: flex; flex-wrap: wrap; gap: 14px; }\n.dz-evidence-office-sign-in .legal a { font-size: 11.5px; color: var(--muted-foreground); text-decoration: none; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-evidence-office-sign-in .legal a:hover { color: var(--primary); }\n@media (prefers-reduced-motion: reduce) { .dz-evidence-office-sign-in *, .dz-evidence-office-sign-in *::before, .dz-evidence-office-sign-in *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/evidence-office.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}