{
  "id": "blacktop-tracking",
  "name": "Parcel Tracking",
  "theme": "blacktop",
  "category": "Search & Browse",
  "description": "A tracking page where the leg you are on is a white block on an otherwise dark route line, and everything after it is deliberately not predicted.",
  "layout": "A vertical route line with each leg as a stacked block, the current one filled white, and a lookup bar spanning the top with the reference set in wide mono.",
  "modules": [
    {
      "key": "lookup",
      "name": "Lookup bar",
      "html": "\n<header class=\"lu\"><h1>Track</h1><input type=\"text\" value=\"BT 4102 8841 GB\" aria-label=\"Tracking reference\"><button type=\"button\">Find</button></header>"
    },
    {
      "key": "status",
      "name": "Status block",
      "html": "\n<div class=\"sb\"><div><span class=\"k\">Status</span><b>Out for delivery</b></div><div><span class=\"k\">Expected</span><b>Today, 14:00–16:00</b></div><div><span class=\"k\">Signature</span><b>Not required</b></div></div>"
    },
    {
      "key": "legs",
      "name": "Route legs",
      "html": "\n<ol class=\"lg\">\n  <li class=\"done\"><span class=\"t\">02 Sep · 18:40</span><div><b>Collected</b><span class=\"m\">Northfield depot · driver K. Barr</span></div></li>\n  <li class=\"done\"><span class=\"t\">02 Sep · 23:12</span><div><b>Sorted at hub</b><span class=\"m\">Beckton hub · belt 14</span></div></li>\n  <li class=\"done\"><span class=\"t\">03 Sep · 04:55</span><div><b>Trunked</b><span class=\"m\">Beckton → Kirkstall · vehicle 4114</span></div></li>\n  <li class=\"done\"><span class=\"t\">03 Sep · 07:20</span><div><b>Arrived at delivery depot</b><span class=\"m\">Kirkstall Gate</span></div></li>\n  <li class=\"now\"><span class=\"t\">04 Sep · 09:41</span><div><b>Out for delivery</b><span class=\"m\">Round 22 · 14 stops ahead of you</span></div></li>\n  <li class=\"next\"><span class=\"t\">—</span><div><b>Delivered</b><span class=\"m\">We will tell you when it happens, not before.</span></div></li>\n</ol>"
    },
    {
      "key": "note",
      "name": "Honesty note",
      "html": "\n<footer class=\"nt\"><span class=\"k\">Why there is no live map</span><p>The van's position would tell you less than the number of stops ahead of you, and it changes for reasons that have nothing to do with your parcel. We show the number instead.</p></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "blacktop-tracking",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T20:18:14+09:00",
    "updatedAt": "2026-09-01T20:18:14+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/blacktop-tracking.json",
  "structure": "A vertical route line with each leg as a stacked block, the current one filled white, and a lookup bar spanning the top with the reference set in wide mono.",
  "html": "<div class=\"dz dz-blacktop-tracking\" data-design=\"blacktop-tracking\" data-theme=\"blacktop\">\n<section class=\"dz-mod\" data-mod=\"lookup\" aria-label=\"Lookup bar\">\n<header class=\"lu\"><h1>Track</h1><input type=\"text\" value=\"BT 4102 8841 GB\" aria-label=\"Tracking reference\"><button type=\"button\">Find</button></header></section>\n<section class=\"dz-mod\" data-mod=\"status\" aria-label=\"Status block\">\n<div class=\"sb\"><div><span class=\"k\">Status</span><b>Out for delivery</b></div><div><span class=\"k\">Expected</span><b>Today, 14:00–16:00</b></div><div><span class=\"k\">Signature</span><b>Not required</b></div></div></section>\n<section class=\"dz-mod\" data-mod=\"legs\" aria-label=\"Route legs\">\n<ol class=\"lg\">\n  <li class=\"done\"><span class=\"t\">02 Sep · 18:40</span><div><b>Collected</b><span class=\"m\">Northfield depot · driver K. Barr</span></div></li>\n  <li class=\"done\"><span class=\"t\">02 Sep · 23:12</span><div><b>Sorted at hub</b><span class=\"m\">Beckton hub · belt 14</span></div></li>\n  <li class=\"done\"><span class=\"t\">03 Sep · 04:55</span><div><b>Trunked</b><span class=\"m\">Beckton → Kirkstall · vehicle 4114</span></div></li>\n  <li class=\"done\"><span class=\"t\">03 Sep · 07:20</span><div><b>Arrived at delivery depot</b><span class=\"m\">Kirkstall Gate</span></div></li>\n  <li class=\"now\"><span class=\"t\">04 Sep · 09:41</span><div><b>Out for delivery</b><span class=\"m\">Round 22 · 14 stops ahead of you</span></div></li>\n  <li class=\"next\"><span class=\"t\">—</span><div><b>Delivered</b><span class=\"m\">We will tell you when it happens, not before.</span></div></li>\n</ol></section>\n<section class=\"dz-mod\" data-mod=\"note\" aria-label=\"Honesty note\">\n<footer class=\"nt\"><span class=\"k\">Why there is no live map</span><p>The van's position would tell you less than the number of stops ahead of you, and it changes for reasons that have nothing to do with your parcel. We show the number instead.</p></footer></section>\n</div>",
  "css": "\n.dz-blacktop-tracking { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; padding: 24px 26px 30px; row-gap: 20px; align-content: start; }\n.dz-blacktop-tracking .lu { display: flex; align-items: center; gap: 12px; }\n.dz-blacktop-tracking .lu h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 40px; margin: 0 10px 0 0; }\n.dz-blacktop-tracking .lu input { flex: 1; font: inherit; font-family: var(--pv-mono); font-size: 17px; letter-spacing: .04em; border: 2px solid var(--border); border-radius: var(--pv-radius); background: var(--card); color: var(--foreground); padding: 12px 16px; }\n.dz-blacktop-tracking .lu input:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }\n.dz-blacktop-tracking .lu button { font: inherit; font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 19px; background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--primary); border-radius: var(--pv-radius); padding: 11px 28px; cursor: pointer; }\n.dz-blacktop-tracking .sb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; border: 2px solid var(--border); border-radius: var(--pv-radius); padding: 16px 20px; }\n.dz-blacktop-tracking .k { font-size: 12px; color: var(--muted-foreground); }\n.dz-blacktop-tracking .sb b { display: block; font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 22px; margin-top: 4px; }\n.dz-blacktop-tracking .lg { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }\n.dz-blacktop-tracking .lg::before { content: \"\"; position: absolute; left: 7px; top: 14px; bottom: 20px; width: 2px; background: var(--border); }\n.dz-blacktop-tracking .lg li { position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 18px; padding: 14px 0; }\n.dz-blacktop-tracking .lg li::before { content: \"\"; position: absolute; left: -26px; top: 18px; width: 16px; height: 16px; border: 2px solid var(--border); background: var(--background); border-radius: var(--pv-radius); }\n.dz-blacktop-tracking .done::before { background: var(--muted); border-color: var(--muted); }\n.dz-blacktop-tracking .now::before { background: var(--primary); border-color: var(--primary); width: 20px; height: 20px; left: -28px; }\n.dz-blacktop-tracking .next { opacity: .55; }\n.dz-blacktop-tracking .t { font-family: var(--pv-mono); font-size: 11.5px; color: var(--muted-foreground); padding-top: 4px; }\n.dz-blacktop-tracking .lg b { display: block; font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 21px; }\n.dz-blacktop-tracking .now b { color: var(--primary); }\n.dz-blacktop-tracking .m { font-size: 13px; color: var(--muted-foreground); }\n.dz-blacktop-tracking .nt { border: 2px solid var(--border); border-radius: var(--pv-radius); padding: 16px 20px; }\n.dz-blacktop-tracking .nt p { font-size: 14.5px; line-height: 1.6; color: var(--muted-foreground); margin: 6px 0 0; }\n@media (prefers-reduced-motion: reduce) { .dz-blacktop-tracking *, .dz-blacktop-tracking *::before, .dz-blacktop-tracking *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/blacktop.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Anton:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Martian+Mono:wght@400;500;600;700&display=swap"
}