{
  "id": "blacktop-arrivals",
  "name": "Arrivals",
  "theme": "blacktop",
  "category": "App Shell",
  "description": "A passenger arrivals screen designed to be glanced at from a moving vehicle: four rows, enormous type, and a travelling dashed rule that means the bus is moving.",
  "layout": "Four full-width rows at 88px each with nothing else on the screen except a header and a footer line, and every minute figure at 64px in mono.",
  "modules": [
    {
      "key": "head",
      "name": "Stop header",
      "html": "\n<header class=\"hd\"><div><span class=\"k\">Stop 41284 · Marsh Lane, eastbound</span><h1>Marsh Lane</h1></div><span class=\"clk\">14:02</span></header>"
    },
    {
      "key": "rows",
      "name": "Arrival rows",
      "html": "\n<ol class=\"ar\">\n  <li><span class=\"rt\">41</span><div><b>Kirkstall Gate</b><span class=\"dash\"></span></div><span class=\"mn\">2<i>min</i></span></li>\n  <li><span class=\"rt\">41</span><div><b>Kirkstall Gate</b><span class=\"dash\"></span></div><span class=\"mn\">9<i>min</i></span></li>\n  <li class=\"dv\"><span class=\"rt\">7</span><div><b>Northfield Centre</b><span class=\"m om\">Diverted via Fell Gate</span></div><span class=\"mn\">14<i>min</i></span></li>\n  <li><span class=\"rt\">7</span><div><b>Northfield Centre</b><span class=\"dash\"></span></div><span class=\"mn\">26<i>min</i></span></li>\n</ol>"
    },
    {
      "key": "notice",
      "name": "Service notice",
      "html": "\n<div class=\"nt\"><span class=\"tag\">Closure</span><p>Marsh Lane is closed between Fell Gate and the interchange. Route 7 is diverted. Route 41 is unaffected.</p></div>"
    },
    {
      "key": "foot",
      "name": "Footer line",
      "html": "\n<footer class=\"ft\"><span class=\"m\">Live times from the vehicles themselves. Where a bus has not reported for four minutes we show the timetable and say so.</span><span class=\"m\">Updated 8 s ago</span></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "blacktop-arrivals",
    "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-arrivals.json",
  "structure": "Four full-width rows at 88px each with nothing else on the screen except a header and a footer line, and every minute figure at 64px in mono.",
  "html": "<div class=\"dz dz-blacktop-arrivals\" data-design=\"blacktop-arrivals\" data-theme=\"blacktop\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Stop header\">\n<header class=\"hd\"><div><span class=\"k\">Stop 41284 · Marsh Lane, eastbound</span><h1>Marsh Lane</h1></div><span class=\"clk\">14:02</span></header></section>\n<section class=\"dz-mod\" data-mod=\"rows\" aria-label=\"Arrival rows\">\n<ol class=\"ar\">\n  <li><span class=\"rt\">41</span><div><b>Kirkstall Gate</b><span class=\"dash\"></span></div><span class=\"mn\">2<i>min</i></span></li>\n  <li><span class=\"rt\">41</span><div><b>Kirkstall Gate</b><span class=\"dash\"></span></div><span class=\"mn\">9<i>min</i></span></li>\n  <li class=\"dv\"><span class=\"rt\">7</span><div><b>Northfield Centre</b><span class=\"m om\">Diverted via Fell Gate</span></div><span class=\"mn\">14<i>min</i></span></li>\n  <li><span class=\"rt\">7</span><div><b>Northfield Centre</b><span class=\"dash\"></span></div><span class=\"mn\">26<i>min</i></span></li>\n</ol></section>\n<section class=\"dz-mod\" data-mod=\"notice\" aria-label=\"Service notice\">\n<div class=\"nt\"><span class=\"tag\">Closure</span><p>Marsh Lane is closed between Fell Gate and the interchange. Route 7 is diverted. Route 41 is unaffected.</p></div></section>\n<section class=\"dz-mod\" data-mod=\"foot\" aria-label=\"Footer line\">\n<footer class=\"ft\"><span class=\"m\">Live times from the vehicles themselves. Where a bus has not reported for four minutes we show the timetable and say so.</span><span class=\"m\">Updated 8 s ago</span></footer></section>\n</div>",
  "css": "\n.dz-blacktop-arrivals { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 26px 26px; }\n.dz-blacktop-arrivals .hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 20px 0 18px; border-bottom: 2px solid var(--border); }\n.dz-blacktop-arrivals .k { font-size: 12px; color: var(--muted-foreground); }\n.dz-blacktop-arrivals .hd h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 72px; line-height: .96; margin: 6px 0 0; }\n.dz-blacktop-arrivals .clk { font-family: var(--pv-mono); font-size: 34px; letter-spacing: -.04em; }\n.dz-blacktop-arrivals .ar { list-style: none; margin: 0; padding: 0; }\n.dz-blacktop-arrivals .ar li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 200px; align-items: center; gap: 24px; min-height: 88px; border-bottom: 2px solid var(--border); }\n.dz-blacktop-arrivals .rt { font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 46px; background: var(--primary); color: var(--primary-foreground); text-align: center; padding: 6px 0; border-radius: var(--pv-radius); }\n.dz-blacktop-arrivals .dv .rt { background: var(--accent); color: var(--accent-foreground); }\n.dz-blacktop-arrivals .ar b { display: block; font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 34px; }\n.dz-blacktop-arrivals .dash { display: block; height: 2px; margin-top: 8px; width: 180px; background: repeating-linear-gradient(90deg, var(--primary) 0 14px, transparent 14px 26px); background-size: 26px 2px; animation: dz-bt-travel 1.1s linear infinite; }\n@keyframes dz-bt-travel { from { background-position: 0 0 } to { background-position: 26px 0 } }\n.dz-blacktop-arrivals .m { font-size: 13px; color: var(--muted-foreground); }\n.dz-blacktop-arrivals .om { color: var(--accent); }\n.dz-blacktop-arrivals .mn { font-family: var(--pv-mono); font-size: 64px; letter-spacing: -.05em; text-align: right; }\n.dz-blacktop-arrivals .mn i { font-size: 20px; font-style: normal; color: var(--muted-foreground); margin-left: 6px; letter-spacing: 0; }\n.dz-blacktop-arrivals .nt { display: flex; align-items: flex-start; gap: 16px; border: 2px solid var(--border); border-radius: var(--pv-radius); border-color: var(--accent); padding: 14px 18px; margin-top: 20px; }\n.dz-blacktop-arrivals .tag { font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 15px; background: var(--accent); color: var(--accent-foreground); padding: 3px 12px; border-radius: var(--pv-radius); }\n.dz-blacktop-arrivals .nt p { font-size: 15px; line-height: 1.5; margin: 0; }\n.dz-blacktop-arrivals .ft { display: flex; justify-content: space-between; gap: 20px; padding-top: 16px; }\n@media (prefers-reduced-motion: reduce) { .dz-blacktop-arrivals *, .dz-blacktop-arrivals *::before, .dz-blacktop-arrivals *::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"
}