{
  "id": "rust-freight-yard",
  "name": "Yard Board",
  "theme": "rust-freight",
  "category": "Dashboard",
  "description": "The board a yard office watches: what is on site, what is late, and which bay it is in, at a size that reads from six feet away.",
  "layout": "A four-cell count strip across the top, then a full-width movements table at 44px rows with a 220px bay-occupancy column pinned to the right of it.",
  "modules": [
    {
      "key": "bar",
      "name": "Yard bar",
      "html": "\n<header class=\"yb\"><h1>Beckton Yard</h1><span class=\"m\">Shift B · 06:00–14:00 · gate open</span><span class=\"clk\">09:41</span></header>"
    },
    {
      "key": "counts",
      "name": "Counts",
      "html": "\n<section class=\"ct\">\n  <div><span class=\"k\">On site</span><b>84</b></div>\n  <div><span class=\"k\">Booked in today</span><b>31</b></div>\n  <div class=\"late\"><span class=\"k\">Late</span><b>6</b></div>\n  <div><span class=\"k\">Free bays</span><b>11<i>/48</i></b></div>\n</section>"
    },
    {
      "key": "moves",
      "name": "Movements",
      "html": "\n<section class=\"mv\"><table>\n  <thead><tr><th>Unit</th><th>Carrier</th><th>Bay</th><th>Booked</th><th>Arrived</th><th>Status</th></tr></thead>\n  <tbody>\n    <tr class=\"lt\"><td class=\"id\">MSKU 448210 2</td><td>Maersk</td><td class=\"b\">B-14</td><td class=\"n\">07:30</td><td class=\"n\">09:12</td><td><span class=\"tag ir\">Late 102 min</span></td></tr>\n    <tr><td class=\"id\">TGHU 991047 5</td><td>Hapag</td><td class=\"b\">B-02</td><td class=\"n\">08:00</td><td class=\"n\">07:54</td><td><span class=\"tag\">Unloading</span></td></tr>\n    <tr><td class=\"id\">CMAU 660118 3</td><td>CMA CGM</td><td class=\"b\">A-09</td><td class=\"n\">08:15</td><td class=\"n\">08:11</td><td><span class=\"tag\">On bay</span></td></tr>\n    <tr class=\"lt\"><td class=\"id\">OOLU 221885 7</td><td>OOCL</td><td class=\"b\">—</td><td class=\"n\">08:30</td><td class=\"n\">—</td><td><span class=\"tag ir\">Not arrived</span></td></tr>\n    <tr><td class=\"id\">MSCU 774102 0</td><td>MSC</td><td class=\"b\">C-21</td><td class=\"n\">09:00</td><td class=\"n\">08:58</td><td><span class=\"tag\">Loading</span></td></tr>\n    <tr><td class=\"id\">HLXU 300941 8</td><td>Hapag</td><td class=\"b\">B-07</td><td class=\"n\">09:15</td><td class=\"n\">09:20</td><td><span class=\"tag\">On bay</span></td></tr>\n    <tr><td class=\"id\">TCNU 118840 4</td><td>Evergreen</td><td class=\"b\">A-16</td><td class=\"n\">09:30</td><td class=\"n\">09:28</td><td><span class=\"tag\">Checked in</span></td></tr>\n  </tbody>\n</table></section>"
    },
    {
      "key": "bays",
      "name": "Bay occupancy",
      "html": "\n<aside class=\"by\"><span class=\"k\">Bays</span>\n<div class=\"grid\"><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"w\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"w\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i></div>\n<div class=\"lgd\"><span><i class=\"f\"></i>occupied</span><span><i class=\"w\"></i>waiting</span><span><i></i>free</span></div>\n<span class=\"m\">A row A–C, twelve bays each. Bay 26 has been out of service since 14 August.</span></aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "rust-freight-yard",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T20:08:33+09:00",
    "updatedAt": "2026-09-01T20:08:33+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/rust-freight-yard.json",
  "structure": "A four-cell count strip across the top, then a full-width movements table at 44px rows with a 220px bay-occupancy column pinned to the right of it.",
  "html": "<div class=\"dz dz-rust-freight-yard\" data-design=\"rust-freight-yard\" data-theme=\"rust-freight\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Yard bar\">\n<header class=\"yb\"><h1>Beckton Yard</h1><span class=\"m\">Shift B · 06:00–14:00 · gate open</span><span class=\"clk\">09:41</span></header></section><section class=\"dz-mod\" data-mod=\"counts\" aria-label=\"Counts\">\n<section class=\"ct\">\n  <div><span class=\"k\">On site</span><b>84</b></div>\n  <div><span class=\"k\">Booked in today</span><b>31</b></div>\n  <div class=\"late\"><span class=\"k\">Late</span><b>6</b></div>\n  <div><span class=\"k\">Free bays</span><b>11<i>/48</i></b></div>\n</section></section><section class=\"dz-mod\" data-mod=\"moves\" aria-label=\"Movements\">\n<section class=\"mv\"><table>\n  <thead><tr><th>Unit</th><th>Carrier</th><th>Bay</th><th>Booked</th><th>Arrived</th><th>Status</th></tr></thead>\n  <tbody>\n    <tr class=\"lt\"><td class=\"id\">MSKU 448210 2</td><td>Maersk</td><td class=\"b\">B-14</td><td class=\"n\">07:30</td><td class=\"n\">09:12</td><td><span class=\"tag ir\">Late 102 min</span></td></tr>\n    <tr><td class=\"id\">TGHU 991047 5</td><td>Hapag</td><td class=\"b\">B-02</td><td class=\"n\">08:00</td><td class=\"n\">07:54</td><td><span class=\"tag\">Unloading</span></td></tr>\n    <tr><td class=\"id\">CMAU 660118 3</td><td>CMA CGM</td><td class=\"b\">A-09</td><td class=\"n\">08:15</td><td class=\"n\">08:11</td><td><span class=\"tag\">On bay</span></td></tr>\n    <tr class=\"lt\"><td class=\"id\">OOLU 221885 7</td><td>OOCL</td><td class=\"b\">—</td><td class=\"n\">08:30</td><td class=\"n\">—</td><td><span class=\"tag ir\">Not arrived</span></td></tr>\n    <tr><td class=\"id\">MSCU 774102 0</td><td>MSC</td><td class=\"b\">C-21</td><td class=\"n\">09:00</td><td class=\"n\">08:58</td><td><span class=\"tag\">Loading</span></td></tr>\n    <tr><td class=\"id\">HLXU 300941 8</td><td>Hapag</td><td class=\"b\">B-07</td><td class=\"n\">09:15</td><td class=\"n\">09:20</td><td><span class=\"tag\">On bay</span></td></tr>\n    <tr><td class=\"id\">TCNU 118840 4</td><td>Evergreen</td><td class=\"b\">A-16</td><td class=\"n\">09:30</td><td class=\"n\">09:28</td><td><span class=\"tag\">Checked in</span></td></tr>\n  </tbody>\n</table></section></section><section class=\"dz-mod\" data-mod=\"bays\" aria-label=\"Bay occupancy\">\n<aside class=\"by\"><span class=\"k\">Bays</span>\n<div class=\"grid\"><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"w\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"w\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i><i class=\"f\"></i><i></i><i class=\"f\"></i></div>\n<div class=\"lgd\"><span><i class=\"f\"></i>occupied</span><span><i class=\"w\"></i>waiting</span><span><i></i>free</span></div>\n<span class=\"m\">A row A–C, twelve bays each. Bay 26 has been out of service since 14 August.</span></aside></section>\n</div>",
  "css": "\n.dz-rust-freight-yard { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 1fr) 220px; column-gap: 20px; padding: 0 22px 24px; align-content: start; }\n.dz-rust-freight-yard .yb { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 2px solid var(--foreground); }\n.dz-rust-freight-yard .yb h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 40px; margin: 0; }\n.dz-rust-freight-yard .m { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground); }\n.dz-rust-freight-yard .clk { margin-left: auto; font-family: var(--pv-mono); font-size: 30px; font-weight: 700; }\n.dz-rust-freight-yard .ct { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 18px 0; }\n.dz-rust-freight-yard .ct div { border: 2px solid var(--foreground); border-radius: var(--pv-radius-md); background: var(--card); padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; }\n.dz-rust-freight-yard .late { border-color: var(--primary); border-left-width: 8px; }\n.dz-rust-freight-yard .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }\n.dz-rust-freight-yard .ct b { font-family: var(--pv-mono); font-size: 34px; font-weight: 700; }\n.dz-rust-freight-yard .ct b i { font-size: 15px; font-style: normal; color: var(--muted-foreground); }\n.dz-rust-freight-yard table { width: 100%; border-collapse: collapse; }\n.dz-rust-freight-yard th { font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 15px; text-align: left; padding: 9px 12px; border-bottom: 2px solid var(--foreground); border-top: 2px solid var(--foreground); }\n.dz-rust-freight-yard td { padding: 0 12px; height: 44px; font-size: 14px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-rust-freight-yard .id { font-family: var(--pv-mono); font-size: 12.5px; }\n.dz-rust-freight-yard .b { font-family: var(--pv-mono); font-size: 14px; font-weight: 700; }\n.dz-rust-freight-yard .n { font-family: var(--pv-mono); font-size: 13px; }\n.dz-rust-freight-yard .lt { background: var(--card); }\n.dz-rust-freight-yard .tag { display: inline-block; font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 12px; border: 2px solid var(--accent); color: var(--accent); border-radius: 0; padding: 2px 9px; }\n.dz-rust-freight-yard .ir { border-color: var(--primary); color: var(--primary); font-weight: 700; }\n.dz-rust-freight-yard .by { border: 2px solid var(--foreground); border-radius: var(--pv-radius-md); background: var(--card); padding: 14px; align-self: start; }\n.dz-rust-freight-yard .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: 10px 0 12px; }\n.dz-rust-freight-yard .grid i { aspect-ratio: 1; border: var(--pv-bw) solid var(--border); background: var(--background); display: block; }\n.dz-rust-freight-yard .grid .f { background: var(--foreground); border-color: var(--foreground); }\n.dz-rust-freight-yard .grid .w { background: var(--primary); border-color: var(--primary); }\n.dz-rust-freight-yard .lgd { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); }\n.dz-rust-freight-yard .lgd span { display: inline-flex; align-items: center; gap: 8px; }\n.dz-rust-freight-yard .lgd i { width: 12px; height: 12px; border: var(--pv-bw) solid var(--border); display: block; }\n.dz-rust-freight-yard .by .m { line-height: 1.5; text-transform: none; letter-spacing: 0; font-size: 12px; }\n@media (prefers-reduced-motion: reduce) { .dz-rust-freight-yard *, .dz-rust-freight-yard *::before, .dz-rust-freight-yard *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/rust-freight.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&family=Courier+Prime:wght@400;500;600;700&display=swap"
}