{
  "id": "depot-red-wayfind",
  "name": "Wayfinding Search",
  "theme": "depot-red",
  "category": "Search & Browse",
  "description": "A destination search that answers in plates rather than list rows, because the answer to \"where is it\" is a sign and not a paragraph.",
  "layout": "A plain query row over a stack of full-width 96px plates giving direction, destination and distance, with a level note beneath each.",
  "modules": [
    {
      "key": "query",
      "name": "Query row",
      "html": "\n<header class=\"qr\"><h1>Find your way</h1><label class=\"f\"><input type=\"search\" value=\"platform 6\"><button type=\"button\">Go</button></label><span class=\"lb\">From: Main concourse, level 0</span></header>"
    },
    {
      "key": "plates",
      "name": "Direction plates",
      "html": "\n<section class=\"rt\">\n  <div class=\"step\"><a class=\"pl amb\" href=\"#\"><span class=\"ar\">→</span><b>Platform 6</b><span class=\"ds\">210 m</span><span class=\"bar\">Services diverted to Platform 3</span></a><p class=\"nt\">Platform 6 is closed to services today. The plate is shown because the platform itself is still signed and you may be meeting someone there.</p></div>\n  <div class=\"step\"><a class=\"pl\" href=\"#\"><span class=\"ar\">→</span><b>Platform 3</b><span class=\"ds\">160 m</span></a><p class=\"nt\">Where the 14:41 Aberdeen service is now departing from. Straight ahead past the ticket hall, then right at the second gantry.</p></div>\n  <div class=\"step\"><a class=\"pl\" href=\"#\"><span class=\"ar\">↑</span><b>Lift to Platforms 5—9</b><span class=\"ds\">out of service</span></a><p class=\"nt\">Step-free alternative: Cross Quay entrance and the level crossing, which adds about 240 m.</p></div>\n</section>"
    },
    {
      "key": "legend",
      "name": "Plate legend",
      "html": "\n<footer class=\"lg\"><span class=\"lb\">Reading a plate</span>\n<ul>\n  <li><span class=\"sw red\"></span><div><b>Red plate</b><span>A place you can go. The arrow is the direction from where you are standing now.</span></div></li>\n  <li><span class=\"sw amber\"></span><div><b>Amber bar</b><span>Service disruption affecting that destination. The plate still points the right way.</span></div></li>\n  <li><span class=\"sw plain\"></span><div><b>Outlined plate</b><span>A place that exists but is not currently in service.</span></div></li>\n</ul></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "depot-red-wayfind",
    "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-wayfind.json",
  "structure": "A plain query row over a stack of full-width 96px plates giving direction, destination and distance, with a level note beneath each.",
  "html": "<div class=\"dz dz-depot-red-wayfind\" data-design=\"depot-red-wayfind\" data-theme=\"depot-red\">\n<section class=\"dz-mod\" data-mod=\"query\" aria-label=\"Query row\">\n<header class=\"qr\"><h1>Find your way</h1><label class=\"f\"><input type=\"search\" value=\"platform 6\"><button type=\"button\">Go</button></label><span class=\"lb\">From: Main concourse, level 0</span></header></section>\n<section class=\"dz-mod\" data-mod=\"plates\" aria-label=\"Direction plates\">\n<section class=\"rt\">\n  <div class=\"step\"><a class=\"pl amb\" href=\"#\"><span class=\"ar\">→</span><b>Platform 6</b><span class=\"ds\">210 m</span><span class=\"bar\">Services diverted to Platform 3</span></a><p class=\"nt\">Platform 6 is closed to services today. The plate is shown because the platform itself is still signed and you may be meeting someone there.</p></div>\n  <div class=\"step\"><a class=\"pl\" href=\"#\"><span class=\"ar\">→</span><b>Platform 3</b><span class=\"ds\">160 m</span></a><p class=\"nt\">Where the 14:41 Aberdeen service is now departing from. Straight ahead past the ticket hall, then right at the second gantry.</p></div>\n  <div class=\"step\"><a class=\"pl\" href=\"#\"><span class=\"ar\">↑</span><b>Lift to Platforms 5—9</b><span class=\"ds\">out of service</span></a><p class=\"nt\">Step-free alternative: Cross Quay entrance and the level crossing, which adds about 240 m.</p></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"legend\" aria-label=\"Plate legend\">\n<footer class=\"lg\"><span class=\"lb\">Reading a plate</span>\n<ul>\n  <li><span class=\"sw red\"></span><div><b>Red plate</b><span>A place you can go. The arrow is the direction from where you are standing now.</span></div></li>\n  <li><span class=\"sw amber\"></span><div><b>Amber bar</b><span>Service disruption affecting that destination. The plate still points the right way.</span></div></li>\n  <li><span class=\"sw plain\"></span><div><b>Outlined plate</b><span>A place that exists but is not currently in service.</span></div></li>\n</ul></footer></section>\n</div>",
  "css": "\n.dz-depot-red-wayfind { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 24px; max-width: 900px; margin: 0 auto; }\n.dz-depot-red-wayfind .lb { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-depot-red-wayfind .qr { margin-bottom: 22px; }\n.dz-depot-red-wayfind h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 44px; margin: 0 0 14px; }\n.dz-depot-red-wayfind .f { display: flex; margin-bottom: 8px; }\n.dz-depot-red-wayfind input { flex: 1; font: inherit; font-size: 16px; padding: 12px 14px; background: var(--card); border: 2px solid var(--foreground); border-right: 0; border-radius: 0; color: var(--foreground); }\n.dz-depot-red-wayfind .f button { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 16px; background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--foreground); padding: 12px 26px; cursor: pointer; }\n.dz-depot-red-wayfind .step { margin-bottom: 18px; }\n.dz-depot-red-wayfind .pl { background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--foreground); border-radius: 0; height: 96px; display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px; padding: 0 18px; text-decoration: none; position: relative; }\n.dz-depot-red-wayfind .ar { font-size: 40px; line-height: 1; text-align: center; }\n.dz-depot-red-wayfind .pl b { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 30px; }\n.dz-depot-red-wayfind .ds { font-family: var(--pv-mono); font-weight: 500; font-size: 13px; font-size: 15px; align-self: end; padding-bottom: 20px; }\n.dz-depot-red-wayfind .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-wayfind .nt { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; max-width: 60ch; }\n.dz-depot-red-wayfind .lg { margin-top: 26px; padding-top: 18px; border-top: 2px solid var(--border); }\n.dz-depot-red-wayfind .lg ul { list-style: none; margin: 12px 0 0; padding: 0; }\n.dz-depot-red-wayfind .lg li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 10px 0; border-bottom: 2px solid var(--border); }\n.dz-depot-red-wayfind .sw { width: 40px; height: 26px; border: 2px solid var(--foreground); display: block; }\n.dz-depot-red-wayfind .sw.red { background: var(--primary); }\n.dz-depot-red-wayfind .sw.amber { background: var(--accent); }\n.dz-depot-red-wayfind .sw.plain { background: transparent; }\n.dz-depot-red-wayfind .lg b { display: block; font-size: 14px; }\n.dz-depot-red-wayfind .lg span:not(.sw):not(.lb) { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.5; }\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"
}