{
  "id": "depot-red-yard",
  "name": "Yard Control",
  "theme": "depot-red",
  "category": "Dashboard",
  "description": "A depot control view where every bay is a plate whose fill states its condition, so the yard is read as signage rather than as a table of statuses.",
  "layout": "A four-across figure band over a grid of 96px bay plates, with a movement list beneath at 48px row height.",
  "modules": [
    {
      "key": "figs",
      "name": "Yard figures",
      "html": "\n<section class=\"fg\">\n  <div><span class=\"lb\">Bays occupied</span><b class=\"n\">14</b><span class=\"d\">of 18</span></div>\n  <div><span class=\"lb\">Loading now</span><b class=\"n\">6</b><span class=\"d\">3 ahead of schedule</span></div>\n  <div class=\"amb\"><span class=\"lb\">Blocked</span><b class=\"n\">2</b><span class=\"d\">bays 11 and 14</span></div>\n  <div><span class=\"lb\">Departures, today</span><b class=\"n\">61</b><span class=\"d\">of 68 planned</span></div>\n</section>"
    },
    {
      "key": "bays",
      "name": "Bay plates",
      "html": "\n<section class=\"by\"><h2>Bays</h2>\n<div class=\"grid\">\n  <div class=\"pl\"><b>01</b><span class=\"veh\">HGV 4417</span><span class=\"ds\">loading</span></div>\n  <div class=\"pl\"><b>02</b><span class=\"veh\">HGV 4422</span><span class=\"ds\">loading</span></div>\n  <div class=\"pl free\"><b>03</b><span class=\"veh\">—</span><span class=\"ds\">free</span></div>\n  <div class=\"pl\"><b>04</b><span class=\"veh\">HGV 4430</span><span class=\"ds\">sealed</span></div>\n  <div class=\"pl\"><b>05</b><span class=\"veh\">HGV 4441</span><span class=\"ds\">loading</span></div>\n  <div class=\"pl free\"><b>06</b><span class=\"veh\">—</span><span class=\"ds\">free</span></div>\n  <div class=\"pl\"><b>07</b><span class=\"veh\">HGV 4455</span><span class=\"ds\">sealed</span></div>\n  <div class=\"pl\"><b>08</b><span class=\"veh\">HGV 4460</span><span class=\"ds\">loading</span></div>\n  <div class=\"pl\"><b>09</b><span class=\"veh\">HGV 4471</span><span class=\"ds\">loading</span></div>\n  <div class=\"pl free\"><b>10</b><span class=\"veh\">—</span><span class=\"ds\">free</span></div>\n  <div class=\"pl amb\"><b>11</b><span class=\"veh\">Blocked</span><span class=\"ds\">door fault</span></div>\n  <div class=\"pl\"><b>12</b><span class=\"veh\">HGV 4488</span><span class=\"ds\">loading</span></div>\n</div></section>"
    },
    {
      "key": "moves",
      "name": "Movement list",
      "html": "\n<aside class=\"mv\"><h2>Movements</h2>\n<ol>\n  <li><span class=\"tm\">14:32</span><div><b>HGV 4417</b><span class=\"cl\">Bay 01 → Kirkwall</span></div><span class=\"st ok\">Sealed</span></li>\n  <li class=\"late\"><span class=\"tm\">14:41</span><div><b>HGV 4422</b><span class=\"cl\">Bay 02 → Inverness</span></div><span class=\"st am\">+22 min</span></li>\n  <li><span class=\"tm\">15:04</span><div><b>HGV 4430</b><span class=\"cl\">Bay 04 → Aberdeen</span></div><span class=\"st ok\">On time</span></li>\n  <li><span class=\"tm\">15:20</span><div><b>HGV 4441</b><span class=\"cl\">Bay 05 → Dundee</span></div><span class=\"st ok\">On time</span></li>\n  <li class=\"late\"><span class=\"tm\">15:44</span><div><b>HGV 4455</b><span class=\"cl\">Bay 07 → Thurso</span></div><span class=\"st am\">Held</span></li>\n</ol>\n<p class=\"fn\">Bay 11 has been out since 09:20. The door contractor is booked for tomorrow morning and the two loads it was scheduled for have moved to bays 3 and 6.</p></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "depot-red-yard",
    "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-yard.json",
  "structure": "A four-across figure band over a grid of 96px bay plates, with a movement list beneath at 48px row height.",
  "html": "<div class=\"dz dz-depot-red-yard\" data-design=\"depot-red-yard\" data-theme=\"depot-red\">\n<section class=\"dz-mod\" data-mod=\"figs\" aria-label=\"Yard figures\">\n<section class=\"fg\">\n  <div><span class=\"lb\">Bays occupied</span><b class=\"n\">14</b><span class=\"d\">of 18</span></div>\n  <div><span class=\"lb\">Loading now</span><b class=\"n\">6</b><span class=\"d\">3 ahead of schedule</span></div>\n  <div class=\"amb\"><span class=\"lb\">Blocked</span><b class=\"n\">2</b><span class=\"d\">bays 11 and 14</span></div>\n  <div><span class=\"lb\">Departures, today</span><b class=\"n\">61</b><span class=\"d\">of 68 planned</span></div>\n</section></section><div class=\"split\"><section class=\"dz-mod\" data-mod=\"bays\" aria-label=\"Bay plates\">\n<section class=\"by\"><h2>Bays</h2>\n<div class=\"grid\">\n  <div class=\"pl\"><b>01</b><span class=\"veh\">HGV 4417</span><span class=\"ds\">loading</span></div>\n  <div class=\"pl\"><b>02</b><span class=\"veh\">HGV 4422</span><span class=\"ds\">loading</span></div>\n  <div class=\"pl free\"><b>03</b><span class=\"veh\">—</span><span class=\"ds\">free</span></div>\n  <div class=\"pl\"><b>04</b><span class=\"veh\">HGV 4430</span><span class=\"ds\">sealed</span></div>\n  <div class=\"pl\"><b>05</b><span class=\"veh\">HGV 4441</span><span class=\"ds\">loading</span></div>\n  <div class=\"pl free\"><b>06</b><span class=\"veh\">—</span><span class=\"ds\">free</span></div>\n  <div class=\"pl\"><b>07</b><span class=\"veh\">HGV 4455</span><span class=\"ds\">sealed</span></div>\n  <div class=\"pl\"><b>08</b><span class=\"veh\">HGV 4460</span><span class=\"ds\">loading</span></div>\n  <div class=\"pl\"><b>09</b><span class=\"veh\">HGV 4471</span><span class=\"ds\">loading</span></div>\n  <div class=\"pl free\"><b>10</b><span class=\"veh\">—</span><span class=\"ds\">free</span></div>\n  <div class=\"pl amb\"><b>11</b><span class=\"veh\">Blocked</span><span class=\"ds\">door fault</span></div>\n  <div class=\"pl\"><b>12</b><span class=\"veh\">HGV 4488</span><span class=\"ds\">loading</span></div>\n</div></section></section><section class=\"dz-mod\" data-mod=\"moves\" aria-label=\"Movement list\">\n<aside class=\"mv\"><h2>Movements</h2>\n<ol>\n  <li><span class=\"tm\">14:32</span><div><b>HGV 4417</b><span class=\"cl\">Bay 01 → Kirkwall</span></div><span class=\"st ok\">Sealed</span></li>\n  <li class=\"late\"><span class=\"tm\">14:41</span><div><b>HGV 4422</b><span class=\"cl\">Bay 02 → Inverness</span></div><span class=\"st am\">+22 min</span></li>\n  <li><span class=\"tm\">15:04</span><div><b>HGV 4430</b><span class=\"cl\">Bay 04 → Aberdeen</span></div><span class=\"st ok\">On time</span></li>\n  <li><span class=\"tm\">15:20</span><div><b>HGV 4441</b><span class=\"cl\">Bay 05 → Dundee</span></div><span class=\"st ok\">On time</span></li>\n  <li class=\"late\"><span class=\"tm\">15:44</span><div><b>HGV 4455</b><span class=\"cl\">Bay 07 → Thurso</span></div><span class=\"st am\">Held</span></li>\n</ol>\n<p class=\"fn\">Bay 11 has been out since 09:20. The door contractor is booked for tomorrow morning and the two loads it was scheduled for have moved to bays 3 and 6.</p></aside></section></div>\n</div>",
  "css": "\n.dz-depot-red-yard { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 22px 24px; }\n.dz-depot-red-yard .lb { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-depot-red-yard .n { font-family: var(--pv-mono); font-weight: 500; font-size: 13px; }\n.dz-depot-red-yard .fg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }\n.dz-depot-red-yard .fg div { background: var(--card); border: 2px solid var(--border); padding: 14px; }\n.dz-depot-red-yard .fg .amb { border-color: var(--accent); }\n.dz-depot-red-yard .fg b { display: block; font-family: var(--pv-mono); font-weight: 500; font-size: 13px; font-size: 40px; margin: 6px 0 3px; }\n.dz-depot-red-yard .d { font-size: 12px; color: var(--muted-foreground); }\n.dz-depot-red-yard .split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; align-items: start; }\n.dz-depot-red-yard h2 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 26px; margin: 0 0 14px; }\n.dz-depot-red-yard .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }\n.dz-depot-red-yard .pl { background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--foreground); border-radius: 0; height: 96px; padding: 10px 12px; display: grid; align-content: space-between; }\n.dz-depot-red-yard .pl b { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 30px; }\n.dz-depot-red-yard .veh { font-family: var(--pv-mono); font-weight: 500; font-size: 13px; font-size: 12px; }\n.dz-depot-red-yard .ds { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; color: var(--muted-foreground); color: var(--primary-foreground); opacity: .8; }\n.dz-depot-red-yard .pl.free { background: transparent; color: var(--foreground); }\n.dz-depot-red-yard .pl.free .ds { color: var(--muted-foreground); opacity: 1; }\n.dz-depot-red-yard .pl.amb { background: var(--accent); color: var(--accent-foreground); }\n.dz-depot-red-yard .pl.amb .ds { color: var(--accent-foreground); }\n.dz-depot-red-yard .mv ol { list-style: none; margin: 0 0 14px; padding: 0; }\n.dz-depot-red-yard .mv li { display: grid; grid-template-columns: 66px 1fr auto; gap: 12px; align-items: center; height: 48px; border-bottom: 2px solid var(--border); }\n.dz-depot-red-yard .tm { font-family: var(--pv-mono); font-weight: 500; font-size: 13px; font-size: 17px; }\n.dz-depot-red-yard .mv b { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 17px; display: block; }\n.dz-depot-red-yard .cl { font-size: 12px; color: var(--muted-foreground); }\n.dz-depot-red-yard .st { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; color: var(--muted-foreground); }\n.dz-depot-red-yard .st.am { color: var(--accent); }\n.dz-depot-red-yard .late { border-left: 4px solid var(--accent); padding-left: 8px; }\n.dz-depot-red-yard .fn { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.55; margin: 0; }\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"
}