{
  "id": "radiograph-access",
  "name": "Access",
  "theme": "radiograph",
  "category": "Auth & Onboarding",
  "description": "A reading-room sign-in that names the display calibration state before the credentials, because an uncalibrated monitor is a clinical problem.",
  "layout": "A near-full-bleed dark corridor image with a 380px form column, and a calibration block above the fields rather than buried in a settings screen.",
  "modules": [
    {
      "key": "art",
      "name": "Corridor panel",
      "html": "\n<figure class=\"ar\"><img src=\"{{ART corridor}}\" alt=\"{{ARTALT corridor}}\"></figure>"
    },
    {
      "key": "cal",
      "name": "Calibration state",
      "html": "\n<section class=\"cl\"><span class=\"k\">This workstation</span><h1>Reading room 2, station 4</h1><div class=\"kv\"><span>Display</span><b>Dual 6MP greyscale</b></div><div class=\"kv\"><span>Calibration</span><b class=\"ok\">DICOM GSDF · verified 4 days ago</b></div><div class=\"kv\"><span>Ambient</span><b>18 lux</b></div><div class=\"kv\"><span>Diagnostic use</span><b class=\"ok\">Permitted</b></div></section>"
    },
    {
      "key": "form",
      "name": "Sign-in fields",
      "html": "\n<section class=\"fm\"><label><span class=\"k\">Username</span><input class=\"mn\" value=\"h.aldwyn\"></label><label><span class=\"k\">Password</span><input class=\"mn\" value=\"••••••••••\"></label><label><span class=\"k\">Smartcard</span><input class=\"mn\" value=\"PRESENT · GMC 4482913\" readonly></label><button class=\"pri\">Sign in for reporting</button><p class=\"nt\">Signing in on an uncalibrated station allows review but not reporting. This station is calibrated.</p></section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "radiograph-access",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:28:02+09:00",
    "updatedAt": "2026-09-02T01:28:02+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/radiograph-access.json",
  "structure": "A near-full-bleed dark corridor image with a 380px form column, and a calibration block above the fields rather than buried in a settings screen.",
  "html": "<div class=\"dz dz-radiograph-access\" data-design=\"radiograph-access\" data-theme=\"radiograph\">\n<section class=\"dz-mod\" data-mod=\"art\" aria-label=\"Corridor panel\">\n<figure class=\"ar\"><img src=\"https://designlookbook.dev/assets/img/radiograph-corridor.webp\" alt=\"A hospital corridor at night with cyan floor light\"></figure></section>\n<section class=\"dz-mod\" data-mod=\"cal\" aria-label=\"Calibration state\">\n<section class=\"cl\"><span class=\"k\">This workstation</span><h1>Reading room 2, station 4</h1><div class=\"kv\"><span>Display</span><b>Dual 6MP greyscale</b></div><div class=\"kv\"><span>Calibration</span><b class=\"ok\">DICOM GSDF · verified 4 days ago</b></div><div class=\"kv\"><span>Ambient</span><b>18 lux</b></div><div class=\"kv\"><span>Diagnostic use</span><b class=\"ok\">Permitted</b></div></section></section>\n<section class=\"dz-mod\" data-mod=\"form\" aria-label=\"Sign-in fields\">\n<section class=\"fm\"><label><span class=\"k\">Username</span><input class=\"mn\" value=\"h.aldwyn\"></label><label><span class=\"k\">Password</span><input class=\"mn\" value=\"••••••••••\"></label><label><span class=\"k\">Smartcard</span><input class=\"mn\" value=\"PRESENT · GMC 4482913\" readonly></label><button class=\"pri\">Sign in for reporting</button><p class=\"nt\">Signing in on an uncalibrated station allows review but not reporting. This station is calibrated.</p></section></section>\n</div>",
  "css": "\n.dz-radiograph-access { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 1fr 380px; grid-template-rows: auto 1fr; min-height: 620px; }\n.dz-radiograph-access .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); display: block; margin-bottom: 6px; }\n.dz-radiograph-access .mn { font-family: var(--pv-mono); font-size: 12px; letter-spacing: .01em; }\n.dz-radiograph-access .ar { grid-row: 1 / span 2; margin: 0; }\n.dz-radiograph-access .ar img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-radiograph-access .cl { padding: 44px 28px 0; }\n.dz-radiograph-access h1 { font-size: 26px; font-weight: 600; letter-spacing: -.01em; margin: 4px 0 18px; }\n.dz-radiograph-access .kv { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }\n.dz-radiograph-access .kv span { color: var(--muted-foreground); }\n.dz-radiograph-access .kv b { font-family: var(--pv-mono); font-size: 12px; letter-spacing: .01em; font-weight: 400; text-align: right; }\n.dz-radiograph-access .ok { color: var(--accent); }\n.dz-radiograph-access .fm { padding: 24px 28px 28px; }\n.dz-radiograph-access label { display: block; margin-bottom: 14px; }\n.dz-radiograph-access input { display: block; width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid var(--border); border-radius: 3px; color: var(--foreground); font: inherit; font-family: var(--pv-mono); font-size: 12px; letter-spacing: .01em; font-size: 14px; padding: 10px 12px; }\n.dz-radiograph-access input:focus { outline: none; border-color: var(--primary); }\n.dz-radiograph-access .pri { width: 100%; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 3px; padding: 11px; font: inherit; font-size: 13.5px; cursor: pointer; }\n.dz-radiograph-access .nt { font-size: 12.5px; line-height: 1.55; color: var(--muted-foreground); margin: 12px 0 0; }\n@media (prefers-reduced-motion: reduce) { .dz-radiograph-access *, .dz-radiograph-access *::before, .dz-radiograph-access *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/radiograph.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Geologica:wght@400;500;600;700&family=B612+Mono:wght@400;500;600;700&display=swap"
}