{
  "id": "depth-charge-fleet",
  "name": "Fleet Front",
  "theme": "depth-charge",
  "category": "Landing",
  "description": "A product page for fleet telemetry that leads with the one thing operators buy on: how long after a fault appears the shore team sees it.",
  "layout": "A navy hero with the headline over a hull photograph darkened to the ground colour, then a single latency figure filling a full-width band above a four-cell capability grid.",
  "modules": [
    {
      "key": "nav",
      "name": "Navigation",
      "html": "\n<header class=\"nv\"><span class=\"br\">Depth Charge</span><nav><a href=\"#\">Platform</a><a href=\"#\">Sensors</a><a href=\"#\">Class approval</a><a href=\"#\">Pricing</a></nav><a class=\"cta\" href=\"#\">Book a demo</a></header>"
    },
    {
      "key": "hero",
      "name": "Hero",
      "html": "\n<figure class=\"hr\"><img src=\"{{ART hull}}\" alt=\"{{ARTALT hull}}\"><figcaption><span class=\"k\">Fleet telemetry</span><h1>The shore team sees the fault before the phone call.</h1><p>Engine, fuel, bilge and cargo telemetry off the vessel over any link you have, including the bad one.</p></figcaption></figure>"
    },
    {
      "key": "latency",
      "name": "Latency band",
      "html": "\n<div class=\"lt\"><b>4.2<i>s</i></b><span class=\"u\">median time from sensor to shore dashboard</span><span class=\"m\">Measured across 118 vessels over the last 90 days, including satellite-only legs.</span></div>"
    },
    {
      "key": "caps",
      "name": "Capability grid",
      "html": "\n<section class=\"cp\">\n  <article><span class=\"n\">01</span><h2>Works on a bad link</h2><p>Store and forward with delta compression. A day of telemetry is 4 MB.</p></article>\n  <article><span class=\"n\">02</span><h2>Class approved</h2><p>DNV and LR type approval for remote condition monitoring.</p></article>\n  <article><span class=\"n\">03</span><h2>Alarms, not dashboards</h2><p>The default is silence. You are told when a limit is crossed, and only then.</p></article>\n  <article><span class=\"n\">04</span><h2>Your data leaves with you</h2><p>Full historical export on request, in the raw sensor format, within 48 hours.</p></article>\n</section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "depth-charge-fleet",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T20:13:22+09:00",
    "updatedAt": "2026-09-01T20:13:22+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/depth-charge-fleet.json",
  "structure": "A navy hero with the headline over a hull photograph darkened to the ground colour, then a single latency figure filling a full-width band above a four-cell capability grid.",
  "html": "<div class=\"dz dz-depth-charge-fleet\" data-design=\"depth-charge-fleet\" data-theme=\"depth-charge\">\n<section class=\"dz-mod\" data-mod=\"nav\" aria-label=\"Navigation\">\n<header class=\"nv\"><span class=\"br\">Depth Charge</span><nav><a href=\"#\">Platform</a><a href=\"#\">Sensors</a><a href=\"#\">Class approval</a><a href=\"#\">Pricing</a></nav><a class=\"cta\" href=\"#\">Book a demo</a></header></section>\n<section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Hero\">\n<figure class=\"hr\"><img src=\"https://designlookbook.dev/assets/img/depth-charge-hull.webp\" alt=\"A navy painted steel hull with a lime waterline stripe\"><figcaption><span class=\"k\">Fleet telemetry</span><h1>The shore team sees the fault before the phone call.</h1><p>Engine, fuel, bilge and cargo telemetry off the vessel over any link you have, including the bad one.</p></figcaption></figure></section>\n<section class=\"dz-mod\" data-mod=\"latency\" aria-label=\"Latency band\">\n<div class=\"lt\"><b>4.2<i>s</i></b><span class=\"u\">median time from sensor to shore dashboard</span><span class=\"m\">Measured across 118 vessels over the last 90 days, including satellite-only legs.</span></div></section>\n<section class=\"dz-mod\" data-mod=\"caps\" aria-label=\"Capability grid\">\n<section class=\"cp\">\n  <article><span class=\"n\">01</span><h2>Works on a bad link</h2><p>Store and forward with delta compression. A day of telemetry is 4 MB.</p></article>\n  <article><span class=\"n\">02</span><h2>Class approved</h2><p>DNV and LR type approval for remote condition monitoring.</p></article>\n  <article><span class=\"n\">03</span><h2>Alarms, not dashboards</h2><p>The default is silence. You are told when a limit is crossed, and only then.</p></article>\n  <article><span class=\"n\">04</span><h2>Your data leaves with you</h2><p>Full historical export on request, in the raw sensor format, within 48 hours.</p></article>\n</section></section>\n</div>",
  "css": "\n.dz-depth-charge-fleet { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-depth-charge-fleet .nv { display: flex; align-items: center; gap: 24px; padding: 16px 24px; }\n.dz-depth-charge-fleet .br { font-family: var(--pv-display); font-size: 21px; font-weight: 600; color: var(--primary); }\n.dz-depth-charge-fleet .nv nav { display: flex; gap: 20px; margin-left: 14px; }\n.dz-depth-charge-fleet .nv a { font-size: 13.5px; color: var(--muted-foreground); text-decoration: none; }\n.dz-depth-charge-fleet .nv a:hover { color: var(--foreground); }\n.dz-depth-charge-fleet .cta { margin-left: auto; font-size: 13px; background: var(--primary); color: var(--primary-foreground) !important; border-radius: var(--pv-radius-md); padding: 9px 18px; }\n.dz-depth-charge-fleet .hr { margin: 0; position: relative; }\n.dz-depth-charge-fleet .hr img { width: 100%; height: 300px; object-fit: cover; display: block; filter: var(--img-filter); opacity: .5; }\n.dz-depth-charge-fleet .hr figcaption { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 24px; background: linear-gradient(90deg, var(--background) 22%, color-mix(in srgb, var(--background) 40%, transparent)); }\n.dz-depth-charge-fleet .k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); display: block; }\n.dz-depth-charge-fleet .hr h1 { font-family: var(--pv-display); font-size: 44px; font-weight: 600; line-height: 1.08; margin: 10px 0 12px; max-width: 22ch; }\n.dz-depth-charge-fleet .hr p { font-size: 16px; line-height: 1.55; color: var(--muted-foreground); margin: 0; max-width: 46ch; }\n.dz-depth-charge-fleet .lt { background: var(--card); border-radius: var(--pv-radius); margin: 20px 24px; padding: 24px 26px; display: flex; flex-direction: column; gap: 4px; border-left: 4px solid var(--primary); }\n.dz-depth-charge-fleet .lt b { font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 76px; font-weight: 500; line-height: .96; letter-spacing: -.03em; color: var(--primary); }\n.dz-depth-charge-fleet .lt b i { font-size: 30px; font-style: normal; color: var(--muted-foreground); }\n.dz-depth-charge-fleet .u { font-family: var(--pv-display); font-size: 20px; font-weight: 600; }\n.dz-depth-charge-fleet .m { font-size: 13px; line-height: 1.5; color: var(--muted-foreground); margin-top: 6px; max-width: 68ch; }\n.dz-depth-charge-fleet .cp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0 24px 26px; }\n.dz-depth-charge-fleet .cp article { background: var(--card); border-radius: var(--pv-radius); padding: 16px 18px 18px; }\n.dz-depth-charge-fleet .n { font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 11.5px; color: var(--primary); }\n.dz-depth-charge-fleet .cp h2 { font-family: var(--pv-display); font-size: 19px; font-weight: 600; margin: 8px 0 7px; }\n.dz-depth-charge-fleet .cp p { font-size: 13.5px; line-height: 1.55; color: var(--muted-foreground); margin: 0; }\n@media (prefers-reduced-motion: reduce) { .dz-depth-charge-fleet *, .dz-depth-charge-fleet *::before, .dz-depth-charge-fleet *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/depth-charge.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Titillium+Web:wght@400;500;600;700&family=Share+Tech+Mono:wght@400;500;600;700&display=swap"
}