{
  "id": "depot-red-booking",
  "name": "Load Booking",
  "theme": "depot-red",
  "category": "Settings & Forms",
  "description": "A booking form where the chosen slot is confirmed back as a plate, so the thing you are agreeing to looks like the sign you will follow on the day.",
  "layout": "A 1fr/300px split: square-cornered form fields on the left and a live plate preview of the booked slot on the right.",
  "modules": [
    {
      "key": "head",
      "name": "Booking head",
      "html": "\n<header class=\"bh\"><span class=\"lb\">Traffic office</span><h1>Book a load</h1><p>Slots are 30 minutes. A vehicle arriving more than 15 minutes outside its slot goes to the back of the queue, which is not a penalty, it is just how the bays work.</p></header>"
    },
    {
      "key": "form",
      "name": "Booking fields",
      "html": "\n<form class=\"bf\">\n  <div class=\"two\"><label><span class=\"lb\">Destination</span><select><option>Aberdeen</option><option>Inverness</option><option>Thurso</option><option>Kirkwall (ferry)</option></select></label><label><span class=\"lb\">Date</span><input type=\"text\" value=\"Thu 11 June\"></label></div>\n  <div class=\"two\"><label><span class=\"lb\">Slot</span><select><option>14:30 — 15:00</option><option>15:00 — 15:30</option><option>15:30 — 16:00</option></select></label><label><span class=\"lb\">Bay preference</span><select><option>Any</option><option>Level access (1—6)</option><option>Dock leveller (7—12)</option></select></label></div>\n  <div class=\"two\"><label><span class=\"lb\">Vehicle</span><input type=\"text\" value=\"HGV 4417\"></label><label><span class=\"lb\">Driver</span><input type=\"text\" value=\"M. Sandoval\"></label></div>\n  <label><span class=\"lb\">Load description</span><input type=\"text\" value=\"Palletised dry goods, 18 pallets, 9.4 t\"></label>\n  <label class=\"chk\"><input type=\"checkbox\" checked> Driver holds a current site induction</label>\n  <label class=\"chk\"><input type=\"checkbox\"> Load requires a tail lift</label>\n  <div class=\"ac\"><button type=\"button\" class=\"pri\">Book slot</button><button type=\"button\" class=\"sec\">Check availability</button></div>\n</form>"
    },
    {
      "key": "preview",
      "name": "Slot plate",
      "html": "\n<aside class=\"sp\"><span class=\"lb\">Your slot</span>\n<div class=\"pl\"><span class=\"ar\">→</span><b>Aberdeen</b><span class=\"ds\">42 km</span></div>\n<dl><div><dt>Date</dt><dd class=\"n\">Thu 11 June</dd></div><div><dt>Slot</dt><dd class=\"n\">14:30 — 15:00</dd></div><div><dt>Bay</dt><dd class=\"n\">Allocated on arrival</dd></div><div><dt>Vehicle</dt><dd class=\"n\">HGV 4417</dd></div></dl>\n<p class=\"wn\"><span class=\"lb\">Note</span>Bays 11 and 14 are out of service. If you need a dock leveller the earliest slot today is 16:00.</p></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "depot-red-booking",
    "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-booking.json",
  "structure": "A 1fr/300px split: square-cornered form fields on the left and a live plate preview of the booked slot on the right.",
  "html": "<div class=\"dz dz-depot-red-booking\" data-design=\"depot-red-booking\" data-theme=\"depot-red\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Booking head\">\n<header class=\"bh\"><span class=\"lb\">Traffic office</span><h1>Book a load</h1><p>Slots are 30 minutes. A vehicle arriving more than 15 minutes outside its slot goes to the back of the queue, which is not a penalty, it is just how the bays work.</p></header></section><div class=\"cols\"><section class=\"dz-mod\" data-mod=\"form\" aria-label=\"Booking fields\">\n<form class=\"bf\">\n  <div class=\"two\"><label><span class=\"lb\">Destination</span><select><option>Aberdeen</option><option>Inverness</option><option>Thurso</option><option>Kirkwall (ferry)</option></select></label><label><span class=\"lb\">Date</span><input type=\"text\" value=\"Thu 11 June\"></label></div>\n  <div class=\"two\"><label><span class=\"lb\">Slot</span><select><option>14:30 — 15:00</option><option>15:00 — 15:30</option><option>15:30 — 16:00</option></select></label><label><span class=\"lb\">Bay preference</span><select><option>Any</option><option>Level access (1—6)</option><option>Dock leveller (7—12)</option></select></label></div>\n  <div class=\"two\"><label><span class=\"lb\">Vehicle</span><input type=\"text\" value=\"HGV 4417\"></label><label><span class=\"lb\">Driver</span><input type=\"text\" value=\"M. Sandoval\"></label></div>\n  <label><span class=\"lb\">Load description</span><input type=\"text\" value=\"Palletised dry goods, 18 pallets, 9.4 t\"></label>\n  <label class=\"chk\"><input type=\"checkbox\" checked> Driver holds a current site induction</label>\n  <label class=\"chk\"><input type=\"checkbox\"> Load requires a tail lift</label>\n  <div class=\"ac\"><button type=\"button\" class=\"pri\">Book slot</button><button type=\"button\" class=\"sec\">Check availability</button></div>\n</form></section><section class=\"dz-mod\" data-mod=\"preview\" aria-label=\"Slot plate\">\n<aside class=\"sp\"><span class=\"lb\">Your slot</span>\n<div class=\"pl\"><span class=\"ar\">→</span><b>Aberdeen</b><span class=\"ds\">42 km</span></div>\n<dl><div><dt>Date</dt><dd class=\"n\">Thu 11 June</dd></div><div><dt>Slot</dt><dd class=\"n\">14:30 — 15:00</dd></div><div><dt>Bay</dt><dd class=\"n\">Allocated on arrival</dd></div><div><dt>Vehicle</dt><dd class=\"n\">HGV 4417</dd></div></dl>\n<p class=\"wn\"><span class=\"lb\">Note</span>Bays 11 and 14 are out of service. If you need a dock leveller the earliest slot today is 16:00.</p></aside></section></div>\n</div>",
  "css": "\n.dz-depot-red-booking { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 24px; max-width: 980px; margin: 0 auto; }\n.dz-depot-red-booking .lb { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-depot-red-booking .n { font-family: var(--pv-mono); font-weight: 500; font-size: 13px; }\n.dz-depot-red-booking .bh { padding-bottom: 16px; border-bottom: 2px solid var(--foreground); margin-bottom: 22px; }\n.dz-depot-red-booking 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-booking .bh p { margin: 0; font-size: 14px; line-height: 1.6; max-width: 62ch; color: var(--muted-foreground); }\n.dz-depot-red-booking .cols { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: start; }\n.dz-depot-red-booking .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }\n.dz-depot-red-booking label { display: block; margin-bottom: 14px; }\n.dz-depot-red-booking input, .dz-depot-red-booking select { 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-booking .chk { display: flex; gap: 10px; align-items: center; font-size: 13.5px; margin-bottom: 10px; }\n.dz-depot-red-booking .ac { display: flex; gap: 10px; margin-top: 12px; }\n.dz-depot-red-booking button { font: inherit; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; color: var(--muted-foreground); color: var(--foreground); padding: 14px 24px; cursor: pointer; border-radius: 0; }\n.dz-depot-red-booking .pri { background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--foreground); }\n.dz-depot-red-booking .sec { background: transparent; border: 2px solid var(--border); }\n.dz-depot-red-booking .sp { border: 2px solid var(--border); padding: 16px; }\n.dz-depot-red-booking .pl { background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--foreground); border-radius: 0; height: 96px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 0 14px; margin: 10px 0 16px; }\n.dz-depot-red-booking .ar { font-size: 30px; line-height: 1; text-align: center; }\n.dz-depot-red-booking .pl b { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 24px; }\n.dz-depot-red-booking .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-booking dl { margin: 0 0 16px; }\n.dz-depot-red-booking dl div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 2px solid var(--border); font-size: 13px; }\n.dz-depot-red-booking dt { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; color: var(--muted-foreground); margin: 0; }\n.dz-depot-red-booking dd { margin: 0; }\n.dz-depot-red-booking .wn { margin: 0; font-size: 12.5px; line-height: 1.55; border-left: 4px solid var(--accent); padding-left: 10px; }\n.dz-depot-red-booking .wn .lb { color: var(--accent); margin-bottom: 4px; }\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"
}