{
  "id": "rust-freight-front",
  "name": "Haulier Front",
  "theme": "rust-freight",
  "category": "Landing",
  "description": "A haulage company page whose proof is a live on-time percentage and a fleet count, not a stock photograph of a lorry at sunset.",
  "layout": "A condensed uppercase headline filling the width above a grayscale yard photograph, then a three-column figures band separated by 2px rules with no gaps.",
  "modules": [
    {
      "key": "bar",
      "name": "Top bar",
      "html": "\n<header class=\"tb\"><span class=\"br\">Freight North</span><nav><a href=\"#\">Services</a><a href=\"#\">Fleet</a><a href=\"#\">Track a unit</a><a href=\"#\">Careers</a></nav><a class=\"cta\" href=\"#\">Get a rate</a></header>"
    },
    {
      "key": "hero",
      "name": "Hero",
      "html": "\n<div class=\"hr\"><h1>Forty-one trucks, six trailers types, one phone number that a human answers.</h1><p>Palletised and full-load haulage across the north and into the Netherlands. Nothing is subcontracted without telling you first.</p></div>"
    },
    {
      "key": "plate",
      "name": "Yard plate",
      "html": "\n<figure class=\"pl\"><img src=\"{{ART yard}}\" alt=\"{{ARTALT yard}}\"></figure>"
    },
    {
      "key": "figures",
      "name": "Figures band",
      "html": "\n<section class=\"fg\">\n  <div><b>96.4<i>%</i></b><span class=\"k\">on time, last 90 days</span></div>\n  <div><b>41</b><span class=\"k\">trucks, all owned</span></div>\n  <div><b>1971</b><span class=\"k\">operating since</span></div>\n</section>"
    },
    {
      "key": "services",
      "name": "Services",
      "html": "\n<section class=\"sv\">\n  <article><span class=\"n\">01</span><h2>Full load</h2><p>Curtain, flatbed, coil well and low loader. Twelve lashing points as standard.</p></article>\n  <article><span class=\"n\">02</span><h2>Palletised</h2><p>Next-day across the north, two-day to the south, on our own network.</p></article>\n  <article><span class=\"n\">03</span><h2>Port work</h2><p>Immingham, Hull and Teesport daily. Beckton yard is inside the perimeter.</p></article>\n  <article><span class=\"n\">04</span><h2>Abnormal</h2><p>Over-height and over-width to 4.6 m, with the route survey included in the rate.</p></article>\n</section>"
    }
  ],
  "moduleCount": 5,
  "reorderable": true,
  "meta": {
    "id": "rust-freight-front",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T20:08:33+09:00",
    "updatedAt": "2026-09-01T20:08:33+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/rust-freight-front.json",
  "structure": "A condensed uppercase headline filling the width above a grayscale yard photograph, then a three-column figures band separated by 2px rules with no gaps.",
  "html": "<div class=\"dz dz-rust-freight-front\" data-design=\"rust-freight-front\" data-theme=\"rust-freight\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Top bar\">\n<header class=\"tb\"><span class=\"br\">Freight North</span><nav><a href=\"#\">Services</a><a href=\"#\">Fleet</a><a href=\"#\">Track a unit</a><a href=\"#\">Careers</a></nav><a class=\"cta\" href=\"#\">Get a rate</a></header></section>\n<section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Hero\">\n<div class=\"hr\"><h1>Forty-one trucks, six trailers types, one phone number that a human answers.</h1><p>Palletised and full-load haulage across the north and into the Netherlands. Nothing is subcontracted without telling you first.</p></div></section>\n<section class=\"dz-mod\" data-mod=\"plate\" aria-label=\"Yard plate\">\n<figure class=\"pl\"><img src=\"https://designlookbook.dev/assets/img/rust-freight-yard.webp\" alt=\"A freight yard of empty track under a grey sky\"></figure></section>\n<section class=\"dz-mod\" data-mod=\"figures\" aria-label=\"Figures band\">\n<section class=\"fg\">\n  <div><b>96.4<i>%</i></b><span class=\"k\">on time, last 90 days</span></div>\n  <div><b>41</b><span class=\"k\">trucks, all owned</span></div>\n  <div><b>1971</b><span class=\"k\">operating since</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>Full load</h2><p>Curtain, flatbed, coil well and low loader. Twelve lashing points as standard.</p></article>\n  <article><span class=\"n\">02</span><h2>Palletised</h2><p>Next-day across the north, two-day to the south, on our own network.</p></article>\n  <article><span class=\"n\">03</span><h2>Port work</h2><p>Immingham, Hull and Teesport daily. Beckton yard is inside the perimeter.</p></article>\n  <article><span class=\"n\">04</span><h2>Abnormal</h2><p>Over-height and over-width to 4.6 m, with the route survey included in the rate.</p></article>\n</section></section>\n</div>",
  "css": "\n.dz-rust-freight-front { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-rust-freight-front .tb { display: flex; align-items: center; gap: 22px; padding: 14px 22px; border-bottom: 2px solid var(--foreground); }\n.dz-rust-freight-front .br { font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 28px; }\n.dz-rust-freight-front .tb nav { display: flex; gap: 20px; margin-left: 16px; }\n.dz-rust-freight-front .tb a { font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 15px; color: var(--foreground); text-decoration: none; }\n.dz-rust-freight-front .tb a:hover { color: var(--accent); }\n.dz-rust-freight-front .cta { margin-left: auto; background: var(--primary); color: var(--primary-foreground) !important; border: 2px solid var(--primary); border-radius: var(--pv-radius-md); padding: 8px 18px; }\n.dz-rust-freight-front .hr { padding: 30px 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: end; gap: 30px; }\n.dz-rust-freight-front .hr h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 66px; line-height: .96; margin: 0; }\n.dz-rust-freight-front .hr p { font-size: 15px; line-height: 1.5; margin: 0 0 6px; }\n.dz-rust-freight-front .pl { margin: 0; border-top: 2px solid var(--foreground); border-bottom: 2px solid var(--foreground); }\n.dz-rust-freight-front .pl img { width: 100%; height: 220px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-rust-freight-front .fg { display: grid; grid-template-columns: repeat(3, 1fr); }\n.dz-rust-freight-front .fg div { padding: 22px; border-right: 2px solid var(--foreground); border-bottom: 2px solid var(--foreground); display: flex; flex-direction: column; gap: 5px; }\n.dz-rust-freight-front .fg div:last-child { border-right: 0; }\n.dz-rust-freight-front .fg b { font-family: var(--pv-mono); font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }\n.dz-rust-freight-front .fg b i { font-size: 22px; font-style: normal; color: var(--muted-foreground); }\n.dz-rust-freight-front .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }\n.dz-rust-freight-front .sv { display: grid; grid-template-columns: repeat(4, 1fr); }\n.dz-rust-freight-front .sv article { padding: 20px 18px 24px; border-right: 2px solid var(--foreground); }\n.dz-rust-freight-front .sv article:last-child { border-right: 0; }\n.dz-rust-freight-front .n { font-family: var(--pv-mono); font-size: 12px; color: var(--accent); }\n.dz-rust-freight-front .sv h2 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 24px; margin: 7px 0 8px; }\n.dz-rust-freight-front .sv p { font-size: 14px; line-height: 1.45; margin: 0; }\n@media (prefers-reduced-motion: reduce) { .dz-rust-freight-front *, .dz-rust-freight-front *::before, .dz-rust-freight-front *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/rust-freight.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&family=Courier+Prime:wght@400;500;600;700&display=swap"
}