{
  "id": "ferro-brut-site",
  "name": "Site Front",
  "theme": "ferro-brut",
  "category": "Landing",
  "description": "A contractor front page where the headline is stencil-sized, the proof is a table of finished jobs, and the only soft thing on the page is the sky in the photograph.",
  "layout": "A hero whose headline spans all twelve columns at 92px with the image butted directly beneath it edge to edge, then a four-column capability band divided only by 3px rules.",
  "modules": [
    {
      "key": "bar",
      "name": "Top bar",
      "html": "\n<header class=\"tb\"><span class=\"br\">Ferro</span><nav><a href=\"#\">Work</a><a href=\"#\">Capability</a><a href=\"#\">Safety</a><a href=\"#\">Contact</a></nav><a class=\"cta\" href=\"#\">Request a quote</a></header>"
    },
    {
      "key": "hero",
      "name": "Hero",
      "html": "\n<div class=\"hr\"><h1>We pour<br>the things<br>other people<br>stand on.</h1>\n<p>Structural concrete, ground works and steel erection across the north. Forty-one crews. No subcontracted supervision.</p></div>"
    },
    {
      "key": "plate",
      "name": "Site plate",
      "html": "\n<figure class=\"pl\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure>"
    },
    {
      "key": "caps",
      "name": "Capability band",
      "html": "\n<section class=\"cp\">\n  <div><span class=\"n\">01</span><h2>Groundworks</h2><p>Bulk excavation, piling mats, drainage, sub-base.</p></div>\n  <div><span class=\"n\">02</span><h2>Structural</h2><p>Slabs, cores, retaining walls, post-tensioned decks.</p></div>\n  <div><span class=\"n\">03</span><h2>Steel</h2><p>Erection, decking, fire protection, mezzanines.</p></div>\n  <div><span class=\"n\">04</span><h2>Finishes</h2><p>Power float, joint sealing, surface hardening.</p></div>\n</section>"
    },
    {
      "key": "jobs",
      "name": "Completed jobs",
      "html": "\n<section class=\"jb\"><h2 class=\"sh\">Recently handed over</h2>\n<table><thead><tr><th>Job</th><th>Client</th><th>Value</th><th>Handed over</th></tr></thead>\n<tbody>\n  <tr><td>Beckton Yard, phase 2</td><td>Marden Rail</td><td>£4.10m</td><td>Aug 2026</td></tr>\n  <tr><td>Hollin Bank flood wall</td><td>NW Water</td><td>£2.86m</td><td>Jun 2026</td></tr>\n  <tr><td>Unit 9, Carrfield</td><td>Peak Logistics</td><td>£1.94m</td><td>Apr 2026</td></tr>\n  <tr><td>Kirkstall footbridge</td><td>City Council</td><td>£0.71m</td><td>Feb 2026</td></tr>\n</tbody></table></section>"
    }
  ],
  "moduleCount": 5,
  "reorderable": true,
  "meta": {
    "id": "ferro-brut-site",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T19:43:16+09:00",
    "updatedAt": "2026-09-01T19:43:16+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/ferro-brut-site.json",
  "structure": "A hero whose headline spans all twelve columns at 92px with the image butted directly beneath it edge to edge, then a four-column capability band divided only by 3px rules.",
  "html": "<div class=\"dz dz-ferro-brut-site\" data-design=\"ferro-brut-site\" data-theme=\"ferro-brut\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Top bar\">\n<header class=\"tb\"><span class=\"br\">Ferro</span><nav><a href=\"#\">Work</a><a href=\"#\">Capability</a><a href=\"#\">Safety</a><a href=\"#\">Contact</a></nav><a class=\"cta\" href=\"#\">Request a quote</a></header></section>\n<section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Hero\">\n<div class=\"hr\"><h1>We pour<br>the things<br>other people<br>stand on.</h1>\n<p>Structural concrete, ground works and steel erection across the north. Forty-one crews. No subcontracted supervision.</p></div></section>\n<section class=\"dz-mod\" data-mod=\"plate\" aria-label=\"Site plate\">\n<figure class=\"pl\"><img src=\"https://designlookbook.dev/assets/img/ferro-brut-hero.webp\" alt=\"A poured concrete wall with a painted hazard yellow stripe\"></figure></section>\n<section class=\"dz-mod\" data-mod=\"caps\" aria-label=\"Capability band\">\n<section class=\"cp\">\n  <div><span class=\"n\">01</span><h2>Groundworks</h2><p>Bulk excavation, piling mats, drainage, sub-base.</p></div>\n  <div><span class=\"n\">02</span><h2>Structural</h2><p>Slabs, cores, retaining walls, post-tensioned decks.</p></div>\n  <div><span class=\"n\">03</span><h2>Steel</h2><p>Erection, decking, fire protection, mezzanines.</p></div>\n  <div><span class=\"n\">04</span><h2>Finishes</h2><p>Power float, joint sealing, surface hardening.</p></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"jobs\" aria-label=\"Completed jobs\">\n<section class=\"jb\"><h2 class=\"sh\">Recently handed over</h2>\n<table><thead><tr><th>Job</th><th>Client</th><th>Value</th><th>Handed over</th></tr></thead>\n<tbody>\n  <tr><td>Beckton Yard, phase 2</td><td>Marden Rail</td><td>£4.10m</td><td>Aug 2026</td></tr>\n  <tr><td>Hollin Bank flood wall</td><td>NW Water</td><td>£2.86m</td><td>Jun 2026</td></tr>\n  <tr><td>Unit 9, Carrfield</td><td>Peak Logistics</td><td>£1.94m</td><td>Apr 2026</td></tr>\n  <tr><td>Kirkstall footbridge</td><td>City Council</td><td>£0.71m</td><td>Feb 2026</td></tr>\n</tbody></table></section></section>\n</div>",
  "css": "\n.dz-ferro-brut-site { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-ferro-brut-site .tb { display: flex; align-items: center; gap: 24px; padding: 14px 24px; border-bottom: 3px solid var(--foreground); }\n.dz-ferro-brut-site .br { font-family: var(--pv-display); text-transform: uppercase; letter-spacing: .01em; font-weight: 400; font-size: 30px; }\n.dz-ferro-brut-site .tb nav { display: flex; gap: 22px; margin-left: 20px; }\n.dz-ferro-brut-site .tb a { font-family: var(--pv-display); text-transform: uppercase; letter-spacing: .01em; font-weight: 400; font-size: 15px; color: var(--foreground); text-decoration: none; }\n.dz-ferro-brut-site .tb a:hover { color: var(--accent); }\n.dz-ferro-brut-site .cta { margin-left: auto; background: var(--primary); color: var(--primary-foreground); border: 3px solid var(--foreground); border-radius: 0; font-family: var(--pv-display); text-transform: uppercase; letter-spacing: .01em; font-weight: 400; font-size: 15px; padding: 8px 16px; }\n.dz-ferro-brut-site .hr { padding: 34px 24px 26px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: end; gap: 30px; }\n.dz-ferro-brut-site .hr h1 { font-family: var(--pv-display); text-transform: uppercase; letter-spacing: .01em; font-weight: 400; font-size: 92px; line-height: .92; letter-spacing: -.01em; margin: 0; }\n.dz-ferro-brut-site .hr p { font-size: 15px; line-height: 1.5; margin: 0 0 8px; max-width: 42ch; }\n.dz-ferro-brut-site .pl { margin: 0; border-top: 3px solid var(--foreground); border-bottom: 3px solid var(--foreground); }\n.dz-ferro-brut-site .pl img { width: 100%; height: 210px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-ferro-brut-site .cp { display: grid; grid-template-columns: repeat(4, 1fr); }\n.dz-ferro-brut-site .cp div { padding: 22px 20px; border-right: 3px solid var(--foreground); }\n.dz-ferro-brut-site .cp div:last-child { border-right: 0; }\n.dz-ferro-brut-site .n { font-family: var(--pv-mono); font-size: 13px; font-weight: 700; color: var(--accent); }\n.dz-ferro-brut-site .cp h2 { font-family: var(--pv-display); text-transform: uppercase; letter-spacing: .01em; font-weight: 400; font-size: 26px; margin: 8px 0 8px; }\n.dz-ferro-brut-site .cp p { font-size: 14px; line-height: 1.45; margin: 0; }\n.dz-ferro-brut-site .jb { border-top: 3px solid var(--foreground); padding: 22px 24px 28px; }\n.dz-ferro-brut-site .sh { font-family: var(--pv-display); text-transform: uppercase; letter-spacing: .01em; font-weight: 400; font-size: 26px; margin: 0 0 14px; }\n.dz-ferro-brut-site table { width: 100%; border-collapse: collapse; }\n.dz-ferro-brut-site th { font-family: var(--pv-display); text-transform: uppercase; letter-spacing: .01em; font-weight: 400; font-size: 15px; text-align: left; padding: 8px 10px; border-bottom: 3px solid var(--foreground); }\n.dz-ferro-brut-site th:nth-child(3), .dz-ferro-brut-site td:nth-child(3) { text-align: right; font-family: var(--pv-mono); }\n.dz-ferro-brut-site td { padding: 11px 10px; font-size: 14.5px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-ferro-brut-site tbody tr:hover { background: var(--secondary); }\n@media (prefers-reduced-motion: reduce) { .dz-ferro-brut-site *, .dz-ferro-brut-site *::before, .dz-ferro-brut-site *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/ferro-brut.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Bebas+Neue:wght@400;500;600;700&family=Roboto+Condensed:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;600;700&display=swap"
}