{
  "id": "rust-freight-track",
  "name": "Unit Tracker",
  "theme": "rust-freight",
  "category": "Search & Browse",
  "description": "A tracking page for one container where the history is a plain vertical list of stamped events, each one attributable to a person or a scanner.",
  "layout": "A search bar spanning the width, then a 3:2 split of an event ledger against a fixed detail card, with the current status as a full-width band between them.",
  "modules": [
    {
      "key": "search",
      "name": "Search",
      "html": "\n<header class=\"sr\"><h1>Track</h1><input type=\"search\" value=\"MSCU 774102 0\" aria-label=\"Container number\"><button type=\"button\">Find</button><span class=\"m\">Enter a unit, a job or a seal number.</span></header>"
    },
    {
      "key": "status",
      "name": "Status band",
      "html": "\n<div class=\"sb\"><div><span class=\"k\">Current status</span><b>On bay C-21, loading</b></div><div><span class=\"k\">Since</span><b class=\"n\">08:58</b></div><div><span class=\"k\">Next</span><b>Sailing 8412, cut-off 13:15</b></div></div>"
    },
    {
      "key": "events",
      "name": "Event ledger",
      "html": "\n<ol class=\"ev\">\n  <li class=\"now\"><span class=\"t\">09:41</span><b>Loading started</b><span class=\"m\">Bay C-21 · scanner 04 · crane 2</span></li>\n  <li><span class=\"t\">08:58</span><b>Arrived at bay</b><span class=\"m\">Bay C-21 · driver M. Sandoval</span></li>\n  <li><span class=\"t\">08:44</span><b>Weighed</b><span class=\"m\">Weighbridge 1 · 26,390 kg · within tolerance</span></li>\n  <li><span class=\"t\">08:31</span><b>Gate in</b><span class=\"m\">Gate 2 · seal SL-004824 verified · R. Idowu</span></li>\n  <li><span class=\"t\">07:02</span><b>Departed Carrfield</b><span class=\"m\">Driver M. Sandoval · 42 km</span></li>\n  <li><span class=\"t\">06:40</span><b>Sealed</b><span class=\"m\">Carrfield depot · seal SL-004824 applied · K. Barr</span></li>\n  <li><span class=\"t\">06:12</span><b>Loaded at origin</b><span class=\"m\">Carrfield depot · steel coil, secured</span></li>\n</ol>"
    },
    {
      "key": "card",
      "name": "Unit card",
      "html": "\n<aside class=\"uc\"><figure><img src=\"{{ART rust}}\" alt=\"{{ARTALT rust}}\"></figure>\n<dl>\n  <div><dt>Unit</dt><dd class=\"id\">MSCU 774102 0</dd></div>\n  <div><dt>Type</dt><dd>40ft flat rack</dd></div>\n  <div><dt>Tare</dt><dd>5,100 kg</dd></div>\n  <div><dt>Gross</dt><dd>26,390 kg</dd></div>\n  <div><dt>Seal</dt><dd class=\"id\">SL-004824</dd></div>\n  <div><dt>Job</dt><dd class=\"id\">JOB-8841</dd></div>\n</dl>\n<button type=\"button\" class=\"go\">Print label</button></aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "rust-freight-track",
    "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-track.json",
  "structure": "A search bar spanning the width, then a 3:2 split of an event ledger against a fixed detail card, with the current status as a full-width band between them.",
  "html": "<div class=\"dz dz-rust-freight-track\" data-design=\"rust-freight-track\" data-theme=\"rust-freight\">\n<section class=\"dz-mod\" data-mod=\"search\" aria-label=\"Search\">\n<header class=\"sr\"><h1>Track</h1><input type=\"search\" value=\"MSCU 774102 0\" aria-label=\"Container number\"><button type=\"button\">Find</button><span class=\"m\">Enter a unit, a job or a seal number.</span></header></section><section class=\"dz-mod\" data-mod=\"status\" aria-label=\"Status band\">\n<div class=\"sb\"><div><span class=\"k\">Current status</span><b>On bay C-21, loading</b></div><div><span class=\"k\">Since</span><b class=\"n\">08:58</b></div><div><span class=\"k\">Next</span><b>Sailing 8412, cut-off 13:15</b></div></div></section><section class=\"dz-mod\" data-mod=\"events\" aria-label=\"Event ledger\">\n<ol class=\"ev\">\n  <li class=\"now\"><span class=\"t\">09:41</span><b>Loading started</b><span class=\"m\">Bay C-21 · scanner 04 · crane 2</span></li>\n  <li><span class=\"t\">08:58</span><b>Arrived at bay</b><span class=\"m\">Bay C-21 · driver M. Sandoval</span></li>\n  <li><span class=\"t\">08:44</span><b>Weighed</b><span class=\"m\">Weighbridge 1 · 26,390 kg · within tolerance</span></li>\n  <li><span class=\"t\">08:31</span><b>Gate in</b><span class=\"m\">Gate 2 · seal SL-004824 verified · R. Idowu</span></li>\n  <li><span class=\"t\">07:02</span><b>Departed Carrfield</b><span class=\"m\">Driver M. Sandoval · 42 km</span></li>\n  <li><span class=\"t\">06:40</span><b>Sealed</b><span class=\"m\">Carrfield depot · seal SL-004824 applied · K. Barr</span></li>\n  <li><span class=\"t\">06:12</span><b>Loaded at origin</b><span class=\"m\">Carrfield depot · steel coil, secured</span></li>\n</ol></section><section class=\"dz-mod\" data-mod=\"card\" aria-label=\"Unit card\">\n<aside class=\"uc\"><figure><img src=\"https://designlookbook.dev/assets/img/rust-freight-rust.webp\" alt=\"Close-up of oxidised steel plate with rivets\"></figure>\n<dl>\n  <div><dt>Unit</dt><dd class=\"id\">MSCU 774102 0</dd></div>\n  <div><dt>Type</dt><dd>40ft flat rack</dd></div>\n  <div><dt>Tare</dt><dd>5,100 kg</dd></div>\n  <div><dt>Gross</dt><dd>26,390 kg</dd></div>\n  <div><dt>Seal</dt><dd class=\"id\">SL-004824</dd></div>\n  <div><dt>Job</dt><dd class=\"id\">JOB-8841</dd></div>\n</dl>\n<button type=\"button\" class=\"go\">Print label</button></aside></section>\n</div>",
  "css": "\n.dz-rust-freight-track { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 3fr 2fr; column-gap: 24px; padding: 0 22px 26px; align-content: start; }\n.dz-rust-freight-track .sr { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 2px solid var(--foreground); flex-wrap: wrap; }\n.dz-rust-freight-track .sr h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 36px; margin: 0 12px 0 0; }\n.dz-rust-freight-track .sr input { font: inherit; font-family: var(--pv-mono); font-size: 16px; border: 2px solid var(--foreground); border-radius: var(--pv-radius-md); background: var(--card); color: var(--foreground); padding: 10px 14px; width: 260px; }\n.dz-rust-freight-track .sr input:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }\n.dz-rust-freight-track .sr button { font: inherit; font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 16px; background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--primary); border-radius: var(--pv-radius-md); padding: 10px 22px; cursor: pointer; }\n.dz-rust-freight-track .m { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-foreground); }\n.dz-rust-freight-track .sb { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 24px; border: 2px solid var(--foreground); border-radius: var(--pv-radius-md); background: var(--card); border-left-width: 8px; border-left-color: var(--primary); padding: 14px 18px; margin: 18px 0; }\n.dz-rust-freight-track .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); display: block; }\n.dz-rust-freight-track .sb b { font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 21px; }\n.dz-rust-freight-track .n { font-family: var(--pv-mono); }\n.dz-rust-freight-track .ev { list-style: none; margin: 0; padding: 0; }\n.dz-rust-freight-track .ev li { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 2px 16px; padding: 11px 0 11px 16px; border-bottom: var(--pv-bw) solid var(--border); border-left: 4px solid transparent; min-height: 44px; }\n.dz-rust-freight-track .now { border-left-color: var(--primary); background: var(--card); }\n.dz-rust-freight-track .t { grid-row: 1 / 3; font-family: var(--pv-mono); font-size: 14px; font-weight: 700; padding-top: 2px; }\n.dz-rust-freight-track .ev b { font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 18px; }\n.dz-rust-freight-track .uc { border: 2px solid var(--foreground); border-radius: var(--pv-radius-md); background: var(--card); align-self: start; padding: 0 0 16px; overflow: hidden; }\n.dz-rust-freight-track .uc figure { margin: 0 0 14px; }\n.dz-rust-freight-track .uc img { width: 100%; height: 140px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-rust-freight-track .uc dl { margin: 0 16px 16px; border-top: 2px solid var(--foreground); }\n.dz-rust-freight-track .uc dl div { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-rust-freight-track .uc dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); }\n.dz-rust-freight-track .uc dd { margin: 0; font-size: 14px; }\n.dz-rust-freight-track .id { font-family: var(--pv-mono); font-size: 12.5px; }\n.dz-rust-freight-track .go { font: inherit; font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 16px; margin: 0 16px; width: calc(100% - 32px); background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--primary); border-radius: var(--pv-radius-md); padding: 11px; cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-rust-freight-track *, .dz-rust-freight-track *::before, .dz-rust-freight-track *::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"
}