{
  "id": "depot-red-concourse",
  "name": "Concourse Board",
  "theme": "depot-red",
  "category": "App Shell",
  "description": "A station frame with the sign band fixed above everything, so the wayfinding is never scrolled away from the content it is meant to be guiding.",
  "layout": "A fixed 96px band of red plates across the top, then a plain two-column arrangement of departures and notices beneath it.",
  "modules": [
    {
      "key": "band",
      "name": "Sign band",
      "html": "\n<nav class=\"sb\">\n  <a class=\"pl\" href=\"#\"><span class=\"ar\">↑</span><b>Platforms 1—4</b><span class=\"ds\">120 m</span></a>\n  <a class=\"pl\" href=\"#\"><span class=\"ar\">→</span><b>Platforms 5—9</b><span class=\"ds\">210 m</span></a>\n  <a class=\"pl amb\" href=\"#\"><span class=\"ar\">→</span><b>Platform 6</b><span class=\"ds\">210 m</span><span class=\"bar\">Diverted</span></a>\n  <a class=\"pl\" href=\"#\"><span class=\"ar\">↓</span><b>Exit · Cross Quay</b><span class=\"ds\">60 m</span></a>\n  <a class=\"pl\" href=\"#\"><span class=\"ar\">←</span><b>Ticket hall</b><span class=\"ds\">45 m</span></a>\n</nav>"
    },
    {
      "key": "departures",
      "name": "Departure list",
      "html": "\n<section class=\"dp\"><h2>Departures</h2>\n<ol>\n  <li><span class=\"tm\">14:32</span><div><b>Inverness</b><span class=\"cl\">Elgin · Forres · Nairn</span></div><span class=\"pf\">6</span><span class=\"st ok\">On time</span></li>\n  <li class=\"late\"><span class=\"tm\">14:41</span><div><b>Aberdeen</b><span class=\"cl\">Stonehaven · Montrose · Arbroath</span></div><span class=\"pf\">3</span><span class=\"st am\">+14 min</span></li>\n  <li><span class=\"tm\">14:58</span><div><b>Dundee</b><span class=\"cl\">Calling at all stations</span></div><span class=\"pf\">2</span><span class=\"st ok\">On time</span></li>\n  <li class=\"late\"><span class=\"tm\">15:04</span><div><b>Kirkwall Ferry Link</b><span class=\"cl\">Bus replacement from Thurso</span></div><span class=\"pf\">—</span><span class=\"st am\">Diverted</span></li>\n  <li><span class=\"tm\">15:20</span><div><b>Inverurie</b><span class=\"cl\">Dyce · Kintore</span></div><span class=\"pf\">1</span><span class=\"st ok\">On time</span></li>\n</ol></section>"
    },
    {
      "key": "notices",
      "name": "Service notices",
      "html": "\n<aside class=\"nt\"><h2>Notices</h2>\n<div class=\"am2\"><span class=\"lb\">Diversion</span><p>Platform 6 services are departing from Platform 3 until further notice. Follow the amber signage from the ticket hall.</p></div>\n<div class=\"am2\"><span class=\"lb\">Lift out of service</span><p>The lift to Platforms 5—9 is out of service. Step-free access is via the Cross Quay entrance and the level crossing.</p></div>\n<div><span class=\"lb\">Engineering</span><p>Sunday services will start after 10:00 for the next three weekends.</p></div></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "depot-red-concourse",
    "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-concourse.json",
  "structure": "A fixed 96px band of red plates across the top, then a plain two-column arrangement of departures and notices beneath it.",
  "html": "<div class=\"dz dz-depot-red-concourse\" data-design=\"depot-red-concourse\" data-theme=\"depot-red\">\n<section class=\"dz-mod\" data-mod=\"band\" aria-label=\"Sign band\">\n<nav class=\"sb\">\n  <a class=\"pl\" href=\"#\"><span class=\"ar\">↑</span><b>Platforms 1—4</b><span class=\"ds\">120 m</span></a>\n  <a class=\"pl\" href=\"#\"><span class=\"ar\">→</span><b>Platforms 5—9</b><span class=\"ds\">210 m</span></a>\n  <a class=\"pl amb\" href=\"#\"><span class=\"ar\">→</span><b>Platform 6</b><span class=\"ds\">210 m</span><span class=\"bar\">Diverted</span></a>\n  <a class=\"pl\" href=\"#\"><span class=\"ar\">↓</span><b>Exit · Cross Quay</b><span class=\"ds\">60 m</span></a>\n  <a class=\"pl\" href=\"#\"><span class=\"ar\">←</span><b>Ticket hall</b><span class=\"ds\">45 m</span></a>\n</nav></section><div class=\"split\"><section class=\"dz-mod\" data-mod=\"departures\" aria-label=\"Departure list\">\n<section class=\"dp\"><h2>Departures</h2>\n<ol>\n  <li><span class=\"tm\">14:32</span><div><b>Inverness</b><span class=\"cl\">Elgin · Forres · Nairn</span></div><span class=\"pf\">6</span><span class=\"st ok\">On time</span></li>\n  <li class=\"late\"><span class=\"tm\">14:41</span><div><b>Aberdeen</b><span class=\"cl\">Stonehaven · Montrose · Arbroath</span></div><span class=\"pf\">3</span><span class=\"st am\">+14 min</span></li>\n  <li><span class=\"tm\">14:58</span><div><b>Dundee</b><span class=\"cl\">Calling at all stations</span></div><span class=\"pf\">2</span><span class=\"st ok\">On time</span></li>\n  <li class=\"late\"><span class=\"tm\">15:04</span><div><b>Kirkwall Ferry Link</b><span class=\"cl\">Bus replacement from Thurso</span></div><span class=\"pf\">—</span><span class=\"st am\">Diverted</span></li>\n  <li><span class=\"tm\">15:20</span><div><b>Inverurie</b><span class=\"cl\">Dyce · Kintore</span></div><span class=\"pf\">1</span><span class=\"st ok\">On time</span></li>\n</ol></section></section><section class=\"dz-mod\" data-mod=\"notices\" aria-label=\"Service notices\">\n<aside class=\"nt\"><h2>Notices</h2>\n<div class=\"am2\"><span class=\"lb\">Diversion</span><p>Platform 6 services are departing from Platform 3 until further notice. Follow the amber signage from the ticket hall.</p></div>\n<div class=\"am2\"><span class=\"lb\">Lift out of service</span><p>The lift to Platforms 5—9 is out of service. Step-free access is via the Cross Quay entrance and the level crossing.</p></div>\n<div><span class=\"lb\">Engineering</span><p>Sunday services will start after 10:00 for the next three weekends.</p></div></aside></section></div>\n</div>",
  "css": "\n.dz-depot-red-concourse { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-depot-red-concourse .sb { display: flex; gap: 12px; padding: 16px 24px; overflow-x: auto; border-bottom: 2px solid var(--foreground); }\n.dz-depot-red-concourse .pl { background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--foreground); border-radius: 0; height: 96px; min-width: 240px; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 0 16px; text-decoration: none; position: relative; }\n.dz-depot-red-concourse .ar { font-size: 34px; line-height: 1; text-align: center; }\n.dz-depot-red-concourse .pl b { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 26px; }\n.dz-depot-red-concourse .ds { font-family: var(--pv-mono); font-weight: 500; font-size: 13px; align-self: end; padding-bottom: 18px; }\n.dz-depot-red-concourse .bar { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); color: var(--accent-foreground); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; color: var(--muted-foreground); color: var(--accent-foreground); text-align: center; padding: 3px 0; }\n.dz-depot-red-concourse .pl.amb b, .dz-depot-red-concourse .pl.amb .ar { color: var(--accent); }\n.dz-depot-red-concourse .split { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; padding: 24px; }\n.dz-depot-red-concourse 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-concourse .dp ol { list-style: none; margin: 0; padding: 0; }\n.dz-depot-red-concourse .dp li { display: grid; grid-template-columns: 90px 1fr 60px 110px; gap: 16px; align-items: center; height: 48px; border-bottom: 2px solid var(--border); }\n.dz-depot-red-concourse .tm { font-family: var(--pv-mono); font-weight: 500; font-size: 13px; font-size: 22px; }\n.dz-depot-red-concourse .dp b { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 20px; display: block; }\n.dz-depot-red-concourse .cl { font-size: 12.5px; color: var(--muted-foreground); }\n.dz-depot-red-concourse .pf { font-family: var(--pv-mono); font-weight: 500; font-size: 13px; font-size: 22px; text-align: center; }\n.dz-depot-red-concourse .st { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; color: var(--muted-foreground); text-align: right; }\n.dz-depot-red-concourse .st.ok { color: var(--foreground); }\n.dz-depot-red-concourse .st.am { color: var(--accent); }\n.dz-depot-red-concourse .late { border-left: 4px solid var(--accent); padding-left: 10px; }\n.dz-depot-red-concourse .nt div { padding: 14px 0; border-bottom: 2px solid var(--border); }\n.dz-depot-red-concourse .lb { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; color: var(--muted-foreground); display: block; margin-bottom: 5px; }\n.dz-depot-red-concourse .am2 .lb { color: var(--accent); }\n.dz-depot-red-concourse .nt p { margin: 0; font-size: 14px; line-height: 1.55; }\n@media (prefers-reduced-motion: reduce) { .dz-depot-red-concourse *, .dz-depot-red-concourse *::before, .dz-depot-red-concourse *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\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"
}