{
  "id": "depot-red-network",
  "name": "Network Front",
  "theme": "depot-red",
  "category": "Landing",
  "description": "A network front page whose hero is a plate rather than a photograph, and whose only claims are distances and times.",
  "layout": "A 96px plate band as the hero, a grayscale full-bleed image strip, and a plain destination table at 48px row height.",
  "modules": [
    {
      "key": "hero",
      "name": "Plate hero",
      "html": "\n<header class=\"ph\"><h1>Kilcarn Freight</h1><nav class=\"band\">\n  <div class=\"pl\"><span class=\"ar\">→</span><b>Aberdeen</b><span class=\"ds\">42 km</span></div>\n  <div class=\"pl\"><span class=\"ar\">→</span><b>Inverness</b><span class=\"ds\">168 km</span></div>\n  <div class=\"pl\"><span class=\"ar\">→</span><b>Thurso</b><span class=\"ds\">288 km</span></div>\n  <div class=\"pl amb\"><span class=\"ar\">→</span><b>Kirkwall</b><span class=\"ds\">by ferry</span><span class=\"bar\">Weather dependent</span></div>\n</nav><p class=\"dk\">Six routes out of one depot, running six days a week. Nothing is subcontracted and every vehicle is on the board above before it leaves the yard.</p></header>"
    },
    {
      "key": "strip",
      "name": "Image strip",
      "html": "\n<section class=\"is\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><img src=\"{{ART depot}}\" alt=\"{{ARTALT depot}}\"><img src=\"{{ART arrow}}\" alt=\"{{ARTALT arrow}}\"></section>"
    },
    {
      "key": "table",
      "name": "Destination table",
      "html": "\n<section class=\"dt\"><h2>Destinations</h2>\n<table><tbody>\n<tr><td>Aberdeen</td><td class=\"n\">42 km</td><td class=\"n\">Daily, 06:00 and 14:00</td><td class=\"n\">Next day</td></tr>\n<tr><td>Dundee</td><td class=\"n\">98 km</td><td class=\"n\">Daily, 06:00</td><td class=\"n\">Next day</td></tr>\n<tr><td>Inverness</td><td class=\"n\">168 km</td><td class=\"n\">Daily, 05:30</td><td class=\"n\">Next day</td></tr>\n<tr><td>Inverurie</td><td class=\"n\">28 km</td><td class=\"n\">Twice daily</td><td class=\"n\">Same day</td></tr>\n<tr><td>Thurso</td><td class=\"n\">288 km</td><td class=\"n\">Mon, Wed, Fri</td><td class=\"n\">Two days</td></tr>\n<tr class=\"amb2\"><td>Kirkwall</td><td class=\"n\">by ferry</td><td class=\"n\">Tue, Thu</td><td class=\"n\">Weather dependent</td></tr>\n</tbody></table>\n<p class=\"fn\">Kirkwall is honest about being weather dependent because it is. In an average winter the Tuesday sailing is cancelled about eleven times.</p></section>"
    },
    {
      "key": "contact",
      "name": "Contact plates",
      "html": "\n<footer class=\"cp\">\n  <a class=\"pl sm\" href=\"#\"><span class=\"ar\">☎</span><b>Traffic office</b><span class=\"ds\">06:00—18:00</span></a>\n  <a class=\"pl sm\" href=\"#\"><span class=\"ar\">✉</span><b>Quotes</b><span class=\"ds\">same day</span></a>\n  <a class=\"pl sm\" href=\"#\"><span class=\"ar\">↓</span><b>Depot address</b><span class=\"ds\">Cross Quay</span></a>\n</footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "depot-red-network",
    "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-network.json",
  "structure": "A 96px plate band as the hero, a grayscale full-bleed image strip, and a plain destination table at 48px row height.",
  "html": "<div class=\"dz dz-depot-red-network\" data-design=\"depot-red-network\" data-theme=\"depot-red\">\n<section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Plate hero\">\n<header class=\"ph\"><h1>Kilcarn Freight</h1><nav class=\"band\">\n  <div class=\"pl\"><span class=\"ar\">→</span><b>Aberdeen</b><span class=\"ds\">42 km</span></div>\n  <div class=\"pl\"><span class=\"ar\">→</span><b>Inverness</b><span class=\"ds\">168 km</span></div>\n  <div class=\"pl\"><span class=\"ar\">→</span><b>Thurso</b><span class=\"ds\">288 km</span></div>\n  <div class=\"pl amb\"><span class=\"ar\">→</span><b>Kirkwall</b><span class=\"ds\">by ferry</span><span class=\"bar\">Weather dependent</span></div>\n</nav><p class=\"dk\">Six routes out of one depot, running six days a week. Nothing is subcontracted and every vehicle is on the board above before it leaves the yard.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"strip\" aria-label=\"Image strip\">\n<section class=\"is\"><img src=\"https://designlookbook.dev/assets/img/depot-red-hero.webp\" alt=\"A concrete concourse with a red sign gantry overhead\"><img src=\"https://designlookbook.dev/assets/img/depot-red-depot.webp\" alt=\"An empty loading depot with numbered bay lines\"><img src=\"https://designlookbook.dev/assets/img/depot-red-arrow.webp\" alt=\"A red directional arrow painted on concrete\"></section></section>\n<section class=\"dz-mod\" data-mod=\"table\" aria-label=\"Destination table\">\n<section class=\"dt\"><h2>Destinations</h2>\n<table><tbody>\n<tr><td>Aberdeen</td><td class=\"n\">42 km</td><td class=\"n\">Daily, 06:00 and 14:00</td><td class=\"n\">Next day</td></tr>\n<tr><td>Dundee</td><td class=\"n\">98 km</td><td class=\"n\">Daily, 06:00</td><td class=\"n\">Next day</td></tr>\n<tr><td>Inverness</td><td class=\"n\">168 km</td><td class=\"n\">Daily, 05:30</td><td class=\"n\">Next day</td></tr>\n<tr><td>Inverurie</td><td class=\"n\">28 km</td><td class=\"n\">Twice daily</td><td class=\"n\">Same day</td></tr>\n<tr><td>Thurso</td><td class=\"n\">288 km</td><td class=\"n\">Mon, Wed, Fri</td><td class=\"n\">Two days</td></tr>\n<tr class=\"amb2\"><td>Kirkwall</td><td class=\"n\">by ferry</td><td class=\"n\">Tue, Thu</td><td class=\"n\">Weather dependent</td></tr>\n</tbody></table>\n<p class=\"fn\">Kirkwall is honest about being weather dependent because it is. In an average winter the Tuesday sailing is cancelled about eleven times.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"contact\" aria-label=\"Contact plates\">\n<footer class=\"cp\">\n  <a class=\"pl sm\" href=\"#\"><span class=\"ar\">☎</span><b>Traffic office</b><span class=\"ds\">06:00—18:00</span></a>\n  <a class=\"pl sm\" href=\"#\"><span class=\"ar\">✉</span><b>Quotes</b><span class=\"ds\">same day</span></a>\n  <a class=\"pl sm\" href=\"#\"><span class=\"ar\">↓</span><b>Depot address</b><span class=\"ds\">Cross Quay</span></a>\n</footer></section>\n</div>",
  "css": "\n.dz-depot-red-network { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 0 24px; }\n.dz-depot-red-network .lb { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 600; color: var(--muted-foreground); display: block; }\n.dz-depot-red-network .n { font-family: var(--pv-mono); font-weight: 500; font-size: 13px; }\n.dz-depot-red-network .ph { padding: 24px 24px 0; }\n.dz-depot-red-network h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 86px; line-height: .98; margin: 0 0 18px; }\n.dz-depot-red-network .band { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }\n.dz-depot-red-network .pl { background: var(--primary); color: var(--primary-foreground); border: 2px solid var(--foreground); border-radius: 0; height: 96px; min-width: 200px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 0 16px; text-decoration: none; position: relative; }\n.dz-depot-red-network .ar { font-size: 30px; line-height: 1; text-align: center; }\n.dz-depot-red-network .pl b { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 24px; }\n.dz-depot-red-network .ds { font-family: var(--pv-mono); font-weight: 500; font-size: 13px; align-self: end; padding-bottom: 18px; font-size: 12px; }\n.dz-depot-red-network .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-network .dk { margin: 0 0 22px; font-size: 16px; line-height: 1.56; max-width: 60ch; }\n.dz-depot-red-network .is { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 24px; }\n.dz-depot-red-network .is img { width: 100%; height: 200px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-depot-red-network .dt { padding: 0 24px; }\n.dz-depot-red-network h2 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 26px; margin: 0 0 12px; }\n.dz-depot-red-network table { width: 100%; border-collapse: collapse; }\n.dz-depot-red-network td { padding: 0 14px 0 0; height: 48px; border-bottom: 2px solid var(--border); font-size: 14.5px; }\n.dz-depot-red-network td:first-child { font-family: var(--pv-display); text-transform: uppercase; font-weight: 600; letter-spacing: -.01em; font-size: 20px; width: 190px; }\n.dz-depot-red-network tr.amb2 td:first-child { color: var(--accent); }\n.dz-depot-red-network .fn { margin: 14px 0 0; font-size: 13px; color: var(--muted-foreground); line-height: 1.55; max-width: 62ch; }\n.dz-depot-red-network .cp { display: flex; gap: 12px; padding: 24px; }\n.dz-depot-red-network .pl.sm { height: 48px; min-width: 200px; align-items: center; }\n.dz-depot-red-network .pl.sm .ds { align-self: center; padding-bottom: 0; }\n.dz-depot-red-network .pl.sm b { font-size: 18px; }\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"
}