{
  "id": "harbour-crane-terminal",
  "name": "Terminal",
  "theme": "harbour-crane",
  "category": "Landing",
  "description": "A marketing page that shows the tile grid as the product: quantised tiles over a night quay photograph, with the constraint stated as the selling point.",
  "layout": "A full-bleed night quay hero, then a live tile field used as the feature illustration, then three uppercase claims with 2px top borders.",
  "modules": [
    {
      "key": "hero",
      "name": "Quay hero",
      "html": "\n<header class=\"hr\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"><div class=\"ov\"><span class=\"k\">Terminal operating system</span><h1>A CONTAINER YARD,<br>NOT A MASONRY WALL</h1><p>Every tile is 88, 184 or 376 pixels tall. Nothing sizes itself to its content, so nothing moves when a number gets longer, and an operator can reach for the yard map without looking.</p><button class=\"pri\">BOOK A DEMONSTRATION</button></div></header>"
    },
    {
      "key": "demo",
      "name": "Tile demonstration",
      "html": "\n<section class=\"dm\"><article class=\"tile u2\"><span class=\"k\">Moves this hour</span><p class=\"big\">184</p><span class=\"k\">target 200</span></article><article class=\"tile u2\"><span class=\"k\">Gate queue</span><p class=\"big\">12</p><span class=\"k\">avg wait 8 min</span></article><article class=\"tile u1\"><span class=\"k\">Cranes</span><p class=\"mid\">6 / 8</p></article><article class=\"tile u1\"><span class=\"k\">Occupancy</span><p class=\"mid\">74%</p></article><article class=\"tile u1\"><span class=\"k\">Reefer alarms</span><p class=\"mid bad\">2</p></article><article class=\"tile u1\"><span class=\"k\">Holds</span><p class=\"mid\">31</p></article></section>"
    },
    {
      "key": "claims",
      "name": "Three claims",
      "html": "\n<section class=\"cl\"><article><h2>TRUNCATION IS A DECISION</h2><p>Content that will not fit its unit is cut with an ellipsis. A predictable layout is worth more in a control room than a complete sentence, and we made that trade deliberately.</p></article><article><h2>ELEVEN CHARACTERS, MONOSPACED</h2><p>A container number has a check digit and it can only be checked by eye if the digits align. Every ID in the system is Source Code Pro with the check digit in amber.</p></article><article><h2>THE MAP DOES NOT MOVE</h2><p>The yard map holds the same top-left position on every configuration of every operations screen, for every operator, on every shift.</p></article></section>"
    },
    {
      "key": "end",
      "name": "Closing band",
      "html": "\n<footer class=\"en\"><img src=\"{{ART night}}\" alt=\"{{ARTALT night}}\"><div><h2>SIXTEEN TERMINALS. FOUR MILLION MOVES A YEAR.</h2><button class=\"pri\">TALK TO US</button></div></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "harbour-crane-terminal",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:18:55+09:00",
    "updatedAt": "2026-09-02T01:18:55+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/harbour-crane-terminal.json",
  "structure": "A full-bleed night quay hero, then a live tile field used as the feature illustration, then three uppercase claims with 2px top borders.",
  "html": "<div class=\"dz dz-harbour-crane-terminal\" data-design=\"harbour-crane-terminal\" data-theme=\"harbour-crane\">\n<section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Quay hero\">\n<header class=\"hr\"><img src=\"https://designlookbook.dev/assets/img/harbour-crane-hero.webp\" alt=\"Amber gantry cranes standing over a teal harbour under flat light\"><div class=\"ov\"><span class=\"k\">Terminal operating system</span><h1>A CONTAINER YARD,<br>NOT A MASONRY WALL</h1><p>Every tile is 88, 184 or 376 pixels tall. Nothing sizes itself to its content, so nothing moves when a number gets longer, and an operator can reach for the yard map without looking.</p><button class=\"pri\">BOOK A DEMONSTRATION</button></div></header></section>\n<section class=\"dz-mod\" data-mod=\"demo\" aria-label=\"Tile demonstration\">\n<section class=\"dm\"><article class=\"tile u2\"><span class=\"k\">Moves this hour</span><p class=\"big\">184</p><span class=\"k\">target 200</span></article><article class=\"tile u2\"><span class=\"k\">Gate queue</span><p class=\"big\">12</p><span class=\"k\">avg wait 8 min</span></article><article class=\"tile u1\"><span class=\"k\">Cranes</span><p class=\"mid\">6 / 8</p></article><article class=\"tile u1\"><span class=\"k\">Occupancy</span><p class=\"mid\">74%</p></article><article class=\"tile u1\"><span class=\"k\">Reefer alarms</span><p class=\"mid bad\">2</p></article><article class=\"tile u1\"><span class=\"k\">Holds</span><p class=\"mid\">31</p></article></section></section>\n<section class=\"dz-mod\" data-mod=\"claims\" aria-label=\"Three claims\">\n<section class=\"cl\"><article><h2>TRUNCATION IS A DECISION</h2><p>Content that will not fit its unit is cut with an ellipsis. A predictable layout is worth more in a control room than a complete sentence, and we made that trade deliberately.</p></article><article><h2>ELEVEN CHARACTERS, MONOSPACED</h2><p>A container number has a check digit and it can only be checked by eye if the digits align. Every ID in the system is Source Code Pro with the check digit in amber.</p></article><article><h2>THE MAP DOES NOT MOVE</h2><p>The yard map holds the same top-left position on every configuration of every operations screen, for every operator, on every shift.</p></article></section></section>\n<section class=\"dz-mod\" data-mod=\"end\" aria-label=\"Closing band\">\n<footer class=\"en\"><img src=\"https://designlookbook.dev/assets/img/harbour-crane-night.webp\" alt=\"Floodlit steel structure against a dark teal sky\"><div><h2>SIXTEEN TERMINALS. FOUR MILLION MOVES A YEAR.</h2><button class=\"pri\">TALK TO US</button></div></footer></section>\n</div>",
  "css": "\n.dz-harbour-crane-terminal { background: var(--background); color: var(--foreground); font-family: var(--pv-body); }\n.dz-harbour-crane-terminal .k { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); display: block; }\n.dz-harbour-crane-terminal .hr { position: relative; }\n.dz-harbour-crane-terminal .hr img { width: 100%; height: 500px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-harbour-crane-terminal .ov { position: absolute; inset: 0; padding: 40px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, var(--background), transparent 72%); }\n.dz-harbour-crane-terminal h1 { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.01em; font-size: 54px; line-height: 1.02; margin: 8px 0 14px; }\n.dz-harbour-crane-terminal .ov p { margin: 0 0 22px; font-size: 15.5px; line-height: 1.55; color: var(--muted-foreground); max-width: 58ch; }\n.dz-harbour-crane-terminal .pri { background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 2px; padding: 12px 22px; font: inherit; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; cursor: pointer; align-self: flex-start; }\n.dz-harbour-crane-terminal .dm { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 40px 20px; }\n\n.dz-harbour-crane-terminal .tile { background: var(--card); border: 2px solid var(--border); border-radius: 2px; padding: 14px; overflow: hidden; }\n.dz-harbour-crane-terminal .u1 { height: 88px; }\n.dz-harbour-crane-terminal .u2 { height: 184px; }\n.dz-harbour-crane-terminal .u4 { height: 376px; }\n.dz-harbour-crane-terminal .tile .k { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); display: block; }\n.dz-harbour-crane-terminal .cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; }\n.dz-harbour-crane-terminal .big { font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 52px; line-height: 1; margin: 10px 0 6px; letter-spacing: -.03em; }\n.dz-harbour-crane-terminal .mid { font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 30px; line-height: 1; margin: 8px 0 0; }\n.dz-harbour-crane-terminal .bad { color: var(--destructive); }\n.dz-harbour-crane-terminal .cl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0 20px 40px; }\n.dz-harbour-crane-terminal .cl article { border-top: 2px solid var(--primary); padding-top: 14px; }\n.dz-harbour-crane-terminal h2 { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.01em; font-size: 19px; margin: 0 0 8px; letter-spacing: .02em; }\n.dz-harbour-crane-terminal .cl p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted-foreground); }\n.dz-harbour-crane-terminal .en { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 0 20px 40px; }\n.dz-harbour-crane-terminal .en img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 2px; filter: var(--img-filter); }\n.dz-harbour-crane-terminal .en h2 { font-size: 30px; line-height: 1.14; margin-bottom: 20px; }\n@media (prefers-reduced-motion: reduce) { .dz-harbour-crane-terminal *, .dz-harbour-crane-terminal *::before, .dz-harbour-crane-terminal *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/harbour-crane.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600;700&display=swap"
}