{
  "id": "ferro-brut-hire",
  "name": "Hire Catalogue",
  "theme": "ferro-brut",
  "category": "Search & Browse",
  "description": "A plant catalogue where the filters are a single ruled column of checkboxes and every machine is a wide row with its weight and reach set in mono.",
  "layout": "A 240px filter column with a 3px rule down its right edge, and machines as full-width rows 132px tall whose photographs are square and butted to the left edge of the row.",
  "modules": [
    {
      "key": "bar",
      "name": "Search bar",
      "html": "\n<header class=\"sb\"><h1>Hire</h1><input type=\"search\" value=\"excavator\" aria-label=\"Search plant\"><button type=\"button\">Find</button><span class=\"ct\">31 machines</span></header>"
    },
    {
      "key": "filters",
      "name": "Filters",
      "html": "\n<aside class=\"ft\">\n  <fieldset><legend>Class</legend><label><input type=\"checkbox\" checked>Excavator</label><label><input type=\"checkbox\">Dozer</label><label><input type=\"checkbox\">Telehandler</label><label><input type=\"checkbox\">Dumper</label></fieldset>\n  <fieldset><legend>Weight</legend><label><input type=\"checkbox\">Under 5t</label><label><input type=\"checkbox\" checked>5–15t</label><label><input type=\"checkbox\" checked>15–30t</label><label><input type=\"checkbox\">Over 30t</label></fieldset>\n  <fieldset><legend>Availability</legend><label><input type=\"checkbox\" checked>This week</label><label><input type=\"checkbox\">Next week</label></fieldset>\n</aside>"
    },
    {
      "key": "rows",
      "name": "Machine rows",
      "html": "\n<ol class=\"ms\">\n  <li><figure><img src=\"{{ART plate}}\" alt=\"{{ARTALT plate}}\"></figure><div><h2>22t tracked excavator</h2><span class=\"m\">Zero tail swing · quick hitch · 9.4m reach</span></div><dl><div><dt>Weight</dt><dd>22.4 t</dd></div><div><dt>Rate</dt><dd>£640</dd></div><div><dt>Free</dt><dd>Mon</dd></div></dl><button type=\"button\">Hold</button></li>\n  <li><figure><img src=\"{{ART scaffold}}\" alt=\"{{ARTALT scaffold}}\"></figure><div><h2>14t tracked excavator</h2><span class=\"m\">Standard boom · tilt rotator · 8.1m reach</span></div><dl><div><dt>Weight</dt><dd>14.1 t</dd></div><div><dt>Rate</dt><dd>£520</dd></div><div><dt>Free</dt><dd>Wed</dd></div></dl><button type=\"button\">Hold</button></li>\n  <li class=\"out\"><figure><img src=\"{{ART texture}}\" alt=\"{{ARTALT texture}}\"></figure><div><h2>30t tracked excavator</h2><span class=\"m\">Long reach · 13.2m · rock breaker mount</span></div><dl><div><dt>Weight</dt><dd>30.8 t</dd></div><div><dt>Rate</dt><dd>£880</dd></div><div><dt>Free</dt><dd>—</dd></div></dl><button type=\"button\" disabled>On hire</button></li>\n  <li><figure><img src=\"{{ART paint}}\" alt=\"{{ARTALT paint}}\"></figure><div><h2>8t wheeled excavator</h2><span class=\"m\">Road legal · blade · 6.0m reach</span></div><dl><div><dt>Weight</dt><dd>8.2 t</dd></div><div><dt>Rate</dt><dd>£410</dd></div><div><dt>Free</dt><dd>Mon</dd></div></dl><button type=\"button\">Hold</button></li>\n</ol>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "ferro-brut-hire",
    "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-hire.json",
  "structure": "A 240px filter column with a 3px rule down its right edge, and machines as full-width rows 132px tall whose photographs are square and butted to the left edge of the row.",
  "html": "<div class=\"dz dz-ferro-brut-hire\" data-design=\"ferro-brut-hire\" data-theme=\"ferro-brut\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Search bar\">\n<header class=\"sb\"><h1>Hire</h1><input type=\"search\" value=\"excavator\" aria-label=\"Search plant\"><button type=\"button\">Find</button><span class=\"ct\">31 machines</span></header></section><section class=\"dz-mod\" data-mod=\"filters\" aria-label=\"Filters\">\n<aside class=\"ft\">\n  <fieldset><legend>Class</legend><label><input type=\"checkbox\" checked>Excavator</label><label><input type=\"checkbox\">Dozer</label><label><input type=\"checkbox\">Telehandler</label><label><input type=\"checkbox\">Dumper</label></fieldset>\n  <fieldset><legend>Weight</legend><label><input type=\"checkbox\">Under 5t</label><label><input type=\"checkbox\" checked>5–15t</label><label><input type=\"checkbox\" checked>15–30t</label><label><input type=\"checkbox\">Over 30t</label></fieldset>\n  <fieldset><legend>Availability</legend><label><input type=\"checkbox\" checked>This week</label><label><input type=\"checkbox\">Next week</label></fieldset>\n</aside></section><section class=\"dz-mod\" data-mod=\"rows\" aria-label=\"Machine rows\">\n<ol class=\"ms\">\n  <li><figure><img src=\"https://designlookbook.dev/assets/img/ferro-brut-plate.webp\" alt=\"A bolted steel plate against a concrete face\"></figure><div><h2>22t tracked excavator</h2><span class=\"m\">Zero tail swing · quick hitch · 9.4m reach</span></div><dl><div><dt>Weight</dt><dd>22.4 t</dd></div><div><dt>Rate</dt><dd>£640</dd></div><div><dt>Free</dt><dd>Mon</dd></div></dl><button type=\"button\">Hold</button></li>\n  <li><figure><img src=\"https://designlookbook.dev/assets/img/ferro-brut-scaffold.webp\" alt=\"Scaffolding poles crossing against a flat grey sky\"></figure><div><h2>14t tracked excavator</h2><span class=\"m\">Standard boom · tilt rotator · 8.1m reach</span></div><dl><div><dt>Weight</dt><dd>14.1 t</dd></div><div><dt>Rate</dt><dd>£520</dd></div><div><dt>Free</dt><dd>Wed</dd></div></dl><button type=\"button\">Hold</button></li>\n  <li class=\"out\"><figure><img src=\"https://designlookbook.dev/assets/img/ferro-brut-texture.webp\" alt=\"Close-up of rough concrete with aggregate showing through\"></figure><div><h2>30t tracked excavator</h2><span class=\"m\">Long reach · 13.2m · rock breaker mount</span></div><dl><div><dt>Weight</dt><dd>30.8 t</dd></div><div><dt>Rate</dt><dd>£880</dd></div><div><dt>Free</dt><dd>—</dd></div></dl><button type=\"button\" disabled>On hire</button></li>\n  <li><figure><img src=\"https://designlookbook.dev/assets/img/ferro-brut-paint.webp\" alt=\"Worn hazard yellow paint flaking off a concrete floor\"></figure><div><h2>8t wheeled excavator</h2><span class=\"m\">Road legal · blade · 6.0m reach</span></div><dl><div><dt>Weight</dt><dd>8.2 t</dd></div><div><dt>Rate</dt><dd>£410</dd></div><div><dt>Free</dt><dd>Mon</dd></div></dl><button type=\"button\">Hold</button></li>\n</ol></section>\n</div>",
  "css": "\n.dz-ferro-brut-hire { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 240px minmax(0, 1fr); }\n.dz-ferro-brut-hire .sb { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 3px solid var(--foreground); }\n.dz-ferro-brut-hire .sb h1 { font-family: var(--pv-display); text-transform: uppercase; letter-spacing: .01em; font-weight: 400; font-size: 34px; margin: 0 14px 0 0; }\n.dz-ferro-brut-hire .sb input { font: inherit; font-size: 15px; background: var(--card); color: var(--foreground); border: 3px solid var(--foreground); border-radius: 0; padding: 9px 12px; width: 280px; }\n.dz-ferro-brut-hire .sb input:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }\n.dz-ferro-brut-hire .sb button { font: inherit; 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: 16px; padding: 9px 20px; cursor: pointer; }\n.dz-ferro-brut-hire .ct { margin-left: auto; font-family: var(--pv-mono); font-size: 14px; }\n.dz-ferro-brut-hire .ft { border-right: 3px solid var(--foreground); padding: 18px 18px 24px; }\n.dz-ferro-brut-hire fieldset { border: 0; padding: 0; margin: 0 0 22px; }\n.dz-ferro-brut-hire legend { font-family: var(--pv-display); text-transform: uppercase; letter-spacing: .01em; font-weight: 400; font-size: 19px; padding: 0 0 8px; }\n.dz-ferro-brut-hire .ft label { display: flex; align-items: center; gap: 9px; font-size: 14px; padding: 6px 0; border-bottom: var(--pv-bw) solid var(--border); cursor: pointer; }\n.dz-ferro-brut-hire .ft input { width: 16px; height: 16px; accent-color: var(--primary); }\n.dz-ferro-brut-hire .ms { list-style: none; margin: 0; padding: 0; }\n.dz-ferro-brut-hire .ms li { display: grid; grid-template-columns: 132px minmax(0, 1fr) 260px 110px; align-items: center; gap: 20px; border-bottom: 3px solid var(--foreground); }\n.dz-ferro-brut-hire .ms figure { margin: 0; }\n.dz-ferro-brut-hire .ms img { width: 132px; height: 132px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-ferro-brut-hire .ms h2 { font-family: var(--pv-display); text-transform: uppercase; letter-spacing: .01em; font-weight: 400; font-size: 24px; margin: 0 0 4px; }\n.dz-ferro-brut-hire .m { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground); }\n.dz-ferro-brut-hire .ms dl { display: flex; gap: 22px; margin: 0; }\n.dz-ferro-brut-hire .ms dt { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); }\n.dz-ferro-brut-hire .ms dd { margin: 3px 0 0; font-family: var(--pv-mono); font-size: 17px; font-weight: 700; }\n.dz-ferro-brut-hire .ms button { font: inherit; font-family: var(--pv-display); text-transform: uppercase; letter-spacing: .01em; font-weight: 400; font-size: 15px; background: transparent; border: 3px solid var(--foreground); padding: 9px 0; margin-right: 20px; cursor: pointer; color: var(--foreground); }\n.dz-ferro-brut-hire .ms button:hover:not(:disabled) { background: var(--primary); }\n.dz-ferro-brut-hire .ms button:disabled { opacity: .45; cursor: not-allowed; }\n.dz-ferro-brut-hire .out { background: var(--secondary); }\n@media (prefers-reduced-motion: reduce) { .dz-ferro-brut-hire *, .dz-ferro-brut-hire *::before, .dz-ferro-brut-hire *::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"
}