{
  "id": "harbour-crane-signon",
  "name": "Shift Sign-On",
  "theme": "harbour-crane",
  "category": "Auth & Onboarding",
  "description": "Taking the console at a shift boundary: an industrial photograph on the left, an uppercase mono form on the right, and the outgoing shift’s handover in a tile.",
  "layout": "A split screen with a full-bleed gantry photograph and a 420px form column; the handover tile below the form keeps its 2u height even when empty.",
  "modules": [
    {
      "key": "art",
      "name": "Gantry panel",
      "html": "\n<figure class=\"ar\"><img src=\"{{ART gantry}}\" alt=\"{{ARTALT gantry}}\"></figure>"
    },
    {
      "key": "form",
      "name": "Sign-on form",
      "html": "\n<section class=\"fm\"><span class=\"k\">Terminal 2 · shift B</span><h1>SIGN ON</h1><label><span class=\"k\">Operator</span><input class=\"mn\" value=\"ADEYEMI K\"></label><label><span class=\"k\">Certification</span><input class=\"mn\" value=\"STS-04 / RS-02 / RTG-01\"></label><label><span class=\"k\">Passcode</span><input class=\"mn\" value=\"••••••\"></label><button class=\"pri\">TAKE THE CONSOLE</button></section>"
    },
    {
      "key": "handover",
      "name": "Handover tile",
      "html": "\n<article class=\"tile u2 ho\"><span class=\"k\">Handover from shift A</span><p class=\"cut\">CR6 SPREADER FAULT — TWISTLOCK SENSOR INTERMITTENT, ENGINEER ATTENDING 07:00</p><p class=\"cut\">WIND HOLD LIFTED 05:40, CR3 BACK IN SERVICE</p><p class=\"cut\">31 CONTAINERS UNDER CUSTOMS HOLD IN BAY 08, DO NOT MOVE WITHOUT AUTHORITY</p></article>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "harbour-crane-signon",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:18:55+09:00",
    "updatedAt": "2026-09-02T01:18:55+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/harbour-crane-signon.json",
  "structure": "A split screen with a full-bleed gantry photograph and a 420px form column; the handover tile below the form keeps its 2u height even when empty.",
  "html": "<div class=\"dz dz-harbour-crane-signon\" data-design=\"harbour-crane-signon\" data-theme=\"harbour-crane\">\n<section class=\"dz-mod\" data-mod=\"art\" aria-label=\"Gantry panel\">\n<figure class=\"ar\"><img src=\"https://designlookbook.dev/assets/img/harbour-crane-gantry.webp\" alt=\"Looking up the leg of an amber gantry crane\"></figure></section>\n<section class=\"dz-mod\" data-mod=\"form\" aria-label=\"Sign-on form\">\n<section class=\"fm\"><span class=\"k\">Terminal 2 · shift B</span><h1>SIGN ON</h1><label><span class=\"k\">Operator</span><input class=\"mn\" value=\"ADEYEMI K\"></label><label><span class=\"k\">Certification</span><input class=\"mn\" value=\"STS-04 / RS-02 / RTG-01\"></label><label><span class=\"k\">Passcode</span><input class=\"mn\" value=\"••••••\"></label><button class=\"pri\">TAKE THE CONSOLE</button></section></section>\n<section class=\"dz-mod\" data-mod=\"handover\" aria-label=\"Handover tile\">\n<article class=\"tile u2 ho\"><span class=\"k\">Handover from shift A</span><p class=\"cut\">CR6 SPREADER FAULT — TWISTLOCK SENSOR INTERMITTENT, ENGINEER ATTENDING 07:00</p><p class=\"cut\">WIND HOLD LIFTED 05:40, CR3 BACK IN SERVICE</p><p class=\"cut\">31 CONTAINERS UNDER CUSTOMS HOLD IN BAY 08, DO NOT MOVE WITHOUT AUTHORITY</p></article></section>\n</div>",
  "css": "\n.dz-harbour-crane-signon { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 1fr 420px; grid-template-rows: 1fr auto; min-height: 620px; }\n.dz-harbour-crane-signon .k { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); display: block; }\n.dz-harbour-crane-signon .ar { grid-row: 1 / span 2; margin: 0; }\n.dz-harbour-crane-signon .ar img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-harbour-crane-signon .fm { padding: 44px 28px 20px; }\n.dz-harbour-crane-signon h1 { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; font-size: 54px; margin: 6px 0 28px; letter-spacing: -.02em; }\n.dz-harbour-crane-signon label { display: block; margin-bottom: 16px; }\n.dz-harbour-crane-signon input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; background: var(--card); border: 2px solid var(--border); border-radius: 2px; color: var(--foreground); font: inherit; font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 15px; padding: 10px 12px; }\n.dz-harbour-crane-signon input:focus { outline: none; border-color: var(--primary); }\n.dz-harbour-crane-signon .pri { width: 100%; margin-top: 8px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 2px; padding: 13px; font: inherit; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; cursor: pointer; }\n\n.dz-harbour-crane-signon .tile { background: var(--card); border: 2px solid var(--border); border-radius: 2px; padding: 14px; overflow: hidden; }\n.dz-harbour-crane-signon .u1 { height: 88px; }\n.dz-harbour-crane-signon .u2 { height: 184px; }\n.dz-harbour-crane-signon .u4 { height: 376px; }\n.dz-harbour-crane-signon .tile .k { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); display: block; }\n.dz-harbour-crane-signon .cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; }\n.dz-harbour-crane-signon .ho { margin: 0 28px 28px; }\n.dz-harbour-crane-signon .cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 11px; color: var(--muted-foreground); margin: 10px 0 0; }\n@media (prefers-reduced-motion: reduce) { .dz-harbour-crane-signon *, .dz-harbour-crane-signon *::before, .dz-harbour-crane-signon *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/harbour-crane.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600;700&display=swap"
}