{
  "id": "blacktop-depot",
  "name": "Depot Front",
  "theme": "blacktop",
  "category": "Landing",
  "description": "A courier company page whose hero is a single condensed word filling the width, with the proof set as three counts and no photograph of a smiling driver.",
  "layout": "A 92px uppercase headline over a grayscale depot photograph that runs full width, then a three-cell count band divided by 2px rules with no gaps.",
  "modules": [
    {
      "key": "nav",
      "name": "Navigation",
      "html": "\n<header class=\"nv\"><span class=\"br\">Blacktop</span><nav><a href=\"#\">Services</a><a href=\"#\">Coverage</a><a href=\"#\">Track</a><a href=\"#\">Drivers</a></nav><a class=\"cta\" href=\"#\">Get a quote</a></header>"
    },
    {
      "key": "hero",
      "name": "Hero",
      "html": "\n<div class=\"hr\"><h1>Overnight,<br>and we mean<br>overnight.</h1><p>Trunked from a depot we own, delivered by a driver we employ. If it misses, you hear it from us first.</p></div>"
    },
    {
      "key": "plate",
      "name": "Depot plate",
      "html": "\n<figure class=\"pl\"><img src=\"{{ART depot}}\" alt=\"{{ARTALT depot}}\"></figure>"
    },
    {
      "key": "counts",
      "name": "Count band",
      "html": "\n<section class=\"ct\">\n  <div><b>99.1<i>%</i></b><span class=\"k\">delivered next day, last 90 days</span></div>\n  <div><b>0</b><span class=\"k\">subcontracted rounds</span></div>\n  <div><b>04:55</b><span class=\"k\">last trunk leaves the hub</span></div>\n</section>"
    },
    {
      "key": "services",
      "name": "Services",
      "html": "\n<section class=\"sv\">\n  <article><span class=\"n\">01</span><h2>Overnight</h2><p>Collected by 18:00, delivered by 12:00. Anywhere on the mainland.</p></article>\n  <article><span class=\"n\">02</span><h2>Same day</h2><p>Point to point within the corridor, by a named driver, with a phone number.</p></article>\n  <article><span class=\"n\">03</span><h2>Returns</h2><p>Collected from the customer's door on the round that would have delivered.</p></article>\n  <article><span class=\"n\">04</span><h2>Pallets</h2><p>Up to 1,200 kg, tail lift as standard, booking slots at both ends.</p></article>\n</section>"
    }
  ],
  "moduleCount": 5,
  "reorderable": true,
  "meta": {
    "id": "blacktop-depot",
    "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-depot.json",
  "structure": "A 92px uppercase headline over a grayscale depot photograph that runs full width, then a three-cell count band divided by 2px rules with no gaps.",
  "html": "<div class=\"dz dz-blacktop-depot\" data-design=\"blacktop-depot\" data-theme=\"blacktop\">\n<section class=\"dz-mod\" data-mod=\"nav\" aria-label=\"Navigation\">\n<header class=\"nv\"><span class=\"br\">Blacktop</span><nav><a href=\"#\">Services</a><a href=\"#\">Coverage</a><a href=\"#\">Track</a><a href=\"#\">Drivers</a></nav><a class=\"cta\" href=\"#\">Get a quote</a></header></section>\n<section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Hero\">\n<div class=\"hr\"><h1>Overnight,<br>and we mean<br>overnight.</h1><p>Trunked from a depot we own, delivered by a driver we employ. If it misses, you hear it from us first.</p></div></section>\n<section class=\"dz-mod\" data-mod=\"plate\" aria-label=\"Depot plate\">\n<figure class=\"pl\"><img src=\"https://designlookbook.dev/assets/img/blacktop-depot.webp\" alt=\"An empty depot bay under overhead lights at night\"></figure></section>\n<section class=\"dz-mod\" data-mod=\"counts\" aria-label=\"Count band\">\n<section class=\"ct\">\n  <div><b>99.1<i>%</i></b><span class=\"k\">delivered next day, last 90 days</span></div>\n  <div><b>0</b><span class=\"k\">subcontracted rounds</span></div>\n  <div><b>04:55</b><span class=\"k\">last trunk leaves the hub</span></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"services\" aria-label=\"Services\">\n<section class=\"sv\">\n  <article><span class=\"n\">01</span><h2>Overnight</h2><p>Collected by 18:00, delivered by 12:00. Anywhere on the mainland.</p></article>\n  <article><span class=\"n\">02</span><h2>Same day</h2><p>Point to point within the corridor, by a named driver, with a phone number.</p></article>\n  <article><span class=\"n\">03</span><h2>Returns</h2><p>Collected from the customer's door on the round that would have delivered.</p></article>\n  <article><span class=\"n\">04</span><h2>Pallets</h2><p>Up to 1,200 kg, tail lift as standard, booking slots at both ends.</p></article>\n</section></section>\n</div>",
  "css": "\n.dz-blacktop-depot { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-blacktop-depot .nv { display: flex; align-items: center; gap: 22px; padding: 16px 26px; border-bottom: 2px solid var(--border); }\n.dz-blacktop-depot .br { font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 30px; }\n.dz-blacktop-depot .nv nav { display: flex; gap: 20px; margin-left: 16px; }\n.dz-blacktop-depot .nv a { font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 16px; color: var(--muted-foreground); text-decoration: none; }\n.dz-blacktop-depot .nv a:hover { color: var(--foreground); }\n.dz-blacktop-depot .cta { margin-left: auto; background: var(--primary); color: var(--primary-foreground) !important; border-radius: var(--pv-radius); padding: 8px 18px; }\n.dz-blacktop-depot .hr { padding: 30px 26px 26px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: end; gap: 30px; }\n.dz-blacktop-depot .hr h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 92px; line-height: .92; margin: 0; }\n.dz-blacktop-depot .hr p { font-size: 15px; line-height: 1.5; color: var(--muted-foreground); margin: 0 0 8px; }\n.dz-blacktop-depot .pl { margin: 0; border-top: 2px solid var(--border); border-bottom: 2px solid var(--border); }\n.dz-blacktop-depot .pl img { width: 100%; height: 200px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-blacktop-depot .ct { display: grid; grid-template-columns: repeat(3, 1fr); }\n.dz-blacktop-depot .ct div { padding: 22px 26px; border-right: 2px solid var(--border); border-bottom: 2px solid var(--border); display: flex; flex-direction: column; gap: 5px; }\n.dz-blacktop-depot .ct div:last-child { border-right: 0; }\n.dz-blacktop-depot .ct b { font-family: var(--pv-mono); font-size: 48px; letter-spacing: -.05em; }\n.dz-blacktop-depot .ct b i { font-size: 22px; font-style: normal; color: var(--muted-foreground); }\n.dz-blacktop-depot .k { font-size: 12px; color: var(--muted-foreground); }\n.dz-blacktop-depot .sv { display: grid; grid-template-columns: repeat(4, 1fr); }\n.dz-blacktop-depot .sv article { padding: 20px 22px 24px; border-right: 2px solid var(--border); }\n.dz-blacktop-depot .sv article:last-child { border-right: 0; }\n.dz-blacktop-depot .n { font-family: var(--pv-mono); font-size: 11.5px; color: var(--accent); }\n.dz-blacktop-depot .sv h2 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: .005em; font-size: 26px; margin: 7px 0 8px; }\n.dz-blacktop-depot .sv p { font-size: 14px; line-height: 1.5; color: var(--muted-foreground); margin: 0; }\n@media (prefers-reduced-motion: reduce) { .dz-blacktop-depot *, .dz-blacktop-depot *::before, .dz-blacktop-depot *::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"
}