{
  "id": "depot-red-induction",
  "name": "Site Induction",
  "theme": "depot-red",
  "category": "Auth & Onboarding",
  "description": "A site induction check-in that presents the safety rules as plates, because these are the same signs the driver will see on the yard in ten minutes.",
  "layout": "A stacked sequence of 96px rule plates with an acknowledgement checkbox per plate, closing on a single sign-in field.",
  "modules": [
    {
      "key": "head",
      "name": "Induction head",
      "html": "\n<header class=\"ih\"><span class=\"lb\">Kilcarn Depot · Cross Quay</span><h1>Site induction</h1><p>Four rules. They are the four things that have actually caused injuries here, in order of how often.</p></header>"
    },
    {
      "key": "rules",
      "name": "Rule plates",
      "html": "\n<section class=\"rp\">\n  <div class=\"rule\"><div class=\"pl\"><span class=\"ar\">1</span><b>Stay in the blue walkway</b><span class=\"ds\">always</span></div><label class=\"chk\"><input type=\"checkbox\" checked> Understood</label></div>\n  <div class=\"rule\"><div class=\"pl amb\"><span class=\"ar\">2</span><b>Never walk behind a reversing vehicle</b><span class=\"ds\">no exceptions</span><span class=\"bar\">Most common cause of injury here</span></div><label class=\"chk\"><input type=\"checkbox\" checked> Understood</label></div>\n  <div class=\"rule\"><div class=\"pl\"><span class=\"ar\">3</span><b>High-visibility at all times outside the cab</b><span class=\"ds\">including in the yard office</span></div><label class=\"chk\"><input type=\"checkbox\" checked> Understood</label></div>\n  <div class=\"rule\"><div class=\"pl\"><span class=\"ar\">4</span><b>Report every near miss</b><span class=\"ds\">to the traffic office</span></div><label class=\"chk\"><input type=\"checkbox\"> Understood</label></div>\n</section>"
    },
    {
      "key": "signin",
      "name": "Sign in",
      "html": "\n<footer class=\"si\"><div class=\"two\"><label><span class=\"lb\">Driver name</span><input type=\"text\" value=\"M. Sandoval\"></label><label><span class=\"lb\">Vehicle</span><input type=\"text\" value=\"HGV 4417\"></label></div><button type=\"button\" class=\"pri\" disabled>Complete induction</button><p class=\"fn\">One rule is not yet acknowledged. The induction is valid for twelve months and is checked at the gate on every visit.</p></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "depot-red-induction",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T00:11:03+09:00",
    "updatedAt": "2026-09-02T00:11:03+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/depot-red-induction.json",
  "structure": "A stacked sequence of 96px rule plates with an acknowledgement checkbox per plate, closing on a single sign-in field.",
  "html": "<div class=\"dz dz-depot-red-induction\" data-design=\"depot-red-induction\" data-theme=\"depot-red\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Induction head\">\n<header class=\"ih\"><span class=\"lb\">Kilcarn Depot · Cross Quay</span><h1>Site induction</h1><p>Four rules. They are the four things that have actually caused injuries here, in order of how often.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"rules\" aria-label=\"Rule plates\">\n<section class=\"rp\">\n  <div class=\"rule\"><div class=\"pl\"><span class=\"ar\">1</span><b>Stay in the blue walkway</b><span class=\"ds\">always</span></div><label class=\"chk\"><input type=\"checkbox\" checked> Understood</label></div>\n  <div class=\"rule\"><div class=\"pl amb\"><span class=\"ar\">2</span><b>Never walk behind a reversing vehicle</b><span class=\"ds\">no exceptions</span><span class=\"bar\">Most common cause of injury here</span></div><label class=\"chk\"><input type=\"checkbox\" checked> Understood</label></div>\n  <div class=\"rule\"><div class=\"pl\"><span class=\"ar\">3</span><b>High-visibility at all times outside the cab</b><span class=\"ds\">including in the yard office</span></div><label class=\"chk\"><input type=\"checkbox\" checked> Understood</label></div>\n  <div class=\"rule\"><div class=\"pl\"><span class=\"ar\">4</span><b>Report every near miss</b><span class=\"ds\">to the traffic office</span></div><label class=\"chk\"><input type=\"checkbox\"> Understood</label></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"signin\" aria-label=\"Sign in\">\n<footer class=\"si\"><div class=\"two\"><label><span class=\"lb\">Driver name</span><input type=\"text\" value=\"M. Sandoval\"></label><label><span class=\"lb\">Vehicle</span><input type=\"text\" value=\"HGV 4417\"></label></div><button type=\"button\" class=\"pri\" disabled>Complete induction</button><p class=\"fn\">One rule is not yet acknowledged. The induction is valid for twelve months and is checked at the gate on every visit.</p></footer></section>\n</div>",
  "css": "\n.dz-depot-red-induction { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 24px; max-width: 760px; margin: 0 auto; }\n.dz-depot-red-induction .lb { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-depot-red-induction .ih { padding-bottom: 16px; border-bottom: 2px solid var(--foreground); margin-bottom: 20px; }\n.dz-depot-red-induction h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 44px; margin: 5px 0 10px; }\n.dz-depot-red-induction .ih p { margin: 0; font-size: 14.5px; line-height: 1.6; max-width: 60ch; }\n.dz-depot-red-induction .rule { display: grid; grid-template-columns: 1fr 150px; gap: 16px; align-items: center; margin-bottom: 14px; }\n.dz-depot-red-induction .pl { background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--foreground); border-radius: 0; height: 96px; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px; padding: 0 16px; position: relative; }\n.dz-depot-red-induction .ar { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 40px; line-height: 1; text-align: center; }\n.dz-depot-red-induction .pl b { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 22px; }\n.dz-depot-red-induction .ds { font-family: var(--pv-mono); font-weight: 500; font-size: 13px; align-self: end; padding-bottom: 18px; font-size: 12px; }\n.dz-depot-red-induction .pl.amb { background: var(--accent); color: var(--accent-foreground); }\n.dz-depot-red-induction .bar { position: absolute; left: 0; right: 0; bottom: 0; background: var(--foreground); color: var(--background); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; color: var(--muted-foreground); color: var(--background); text-align: center; padding: 3px 0; }\n.dz-depot-red-induction .chk { display: flex; gap: 10px; align-items: center; font-size: 13.5px; }\n.dz-depot-red-induction .si { margin-top: 22px; padding-top: 18px; border-top: 2px solid var(--foreground); }\n.dz-depot-red-induction .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }\n.dz-depot-red-induction label:not(.chk) { display: block; }\n.dz-depot-red-induction input[type=text] { display: block; width: 100%; margin-top: 5px; font: inherit; font-size: 14px; padding: 11px; background: var(--card); border: 2px solid var(--border); border-radius: 0; color: var(--foreground); }\n.dz-depot-red-induction .pri { font: inherit; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; color: var(--muted-foreground); color: var(--primary-foreground); background: var(--primary); border: 2px solid var(--foreground); padding: 14px 26px; cursor: pointer; border-radius: 0; }\n.dz-depot-red-induction .pri[disabled] { opacity: .45; cursor: not-allowed; }\n.dz-depot-red-induction .fn { margin: 12px 0 0; font-size: 12.5px; color: var(--muted-foreground); line-height: 1.55; }\n",
  "requiredTheme": "/api/v1/themes/depot-red.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Antonio:wght@400;500;600;700&family=Lexend:wght@400;500;600;700&family=Victor+Mono:wght@400;500;600;700&display=swap"
}