V2 — Port of Rotterdam
Thesis: industrial-modern — container geometry, bold cargo color blocks, manifest-style data tables, crane silhouettes. The branch as heavy infrastructure for good. One of ten competing design variants; content identical across all ten (see website/variants/content.md).
Specification
| Palette | Concrete #EDEAE3 · Ink #10181E · Container orange #D9531F (blocks) / #B8431F (text) · Signal yellow #EBA937 (blocks, ink text on top) · 180 green #00623A / band #084D30 · Navy #14293A. Rule: loud colors are blocks, never small text. |
|---|---|
| Type | Archivo Black (display, uppercase, tight leading 0.98–1.02) · Archivo 400/600 (body) · Space Mono 400/700 (codes, manifests, nav). Container codes at 0.68rem / 0.18em tracking. |
| Spacing | Sections 5rem vertical; content max-width 1180px; hard edges everywhere — zero border-radius on the entire site; offset block shadows (6px/6px solid) instead of blur. |
| Motion | One move: 500ms fade-up reveal on scroll, JS-gated (no-JS renders everything) and behind prefers-reduced-motion. Hover: containers lift 3px with deeper offset shadow; buttons translate with hard shadow. |
| Signature elements | Harbor-master sticky nav bar with orange keel line · duotone crane photography (real Rotterdam, Pexels, credited) · crane-silhouette SVG strips between bands · corrugation texture (repeating-linear-gradient) on containers · cargo-manifest tables with row codes (180U-, CR-) · route-plan timeline as ports of call · stencil outline type for the recruitment line. |
| Imagery | Two Pexels photos of the actual Port of Rotterdam (hero cranes, Maasvlakte terminal), WebP, 157 KB total, credited in captions. No AI imagery in this variant. No people presented as our team. |
| Honesty devices | Missing content is a hazard-striped yellow [PLACEHOLDER] plate — the most visible element on any page it appears on. |
How it was made & how to extend it
Build: hand-written static HTML/CSS, one stylesheet, no framework, no build step. Fonts self-hosted woff2 latin subsets (~118 KB). Photography via Pexels API, compressed to WebP with sharp.
Mood calibration: the working harbor, not harbor nostalgia — signage, stencils, manifest paperwork, container yards. The web translation keeps paperwork density (tables with codes) and yard color discipline (blocks loud, text quiet).
To extend to the full site: each new page is another document in the ship's papers — Our Work becomes a shipping ledger (one row per engagement, linked to a case "bill of lading"), Team gets ID-plate cards with duotone photos once the photo session exists, Impact becomes the harbor statistics board. Reuse .manifest, .container-box, .port-stop, and the crane strip as the universal band divider. If an element wants a rounded corner or a soft shadow, it belongs to another variant.
Deploy: zip-deploy to Netlify via API (see website/variants/tools/deploy.ps1).
Critique & revision log
Entry 1 — initial construction
Built from the shared content spec. Reveal animations JS-gated from the start (lesson from V1's round-1 critique).
Entry 2 — Critic round 1
Critic's top notes: (1) both photographs 404'd in production (deploy zip wrote backslash paths — same root cause as V1's font failure) so the port thesis was invisible; (2) hero read as type-on-navy with an invisible silhouette strip; (3) crew table clipped emails on mobile; (4) off-palette mint green in display type broke the site's own color rule; (5) mobile hero type overflowed; (6) containers didn't read as containers (imperceptible corrugation, arbitrary color repeats); (7) heroes carried dead vertical space; (8) maritime jargon in client-facing H2s; (9) motion was one generic fade; (10) nav inconsistent across pages and cramped on mobile.
Lighthouse — final build (local run, 2026-07-09)
Home 100 / 96 / 100 / 100 (perf / accessibility / best-practices / SEO), 230 KB. For-clients 100 / 97 / 100 / 100, 123 KB. Guide 100 / 95 / 100 / 100, 124 KB. All pages clear both quality bars (≥95) and sit far under the 1 MB budget — photography included.
Entry 4 — Critic round 3 (final)
Critic's top notes: the round-3 screenshots caught a stale-CSS window right after deploy, so the Critic saw the services grid and crew table as empty voids — verified fine on the live site (the reveal classes fire; a Playwright check confirmed opacity: 1 after scroll). Real notes actioned: the €0 stamp collided with the FREIGHT row on the bill of lading; the quality-section photo let a third-party shipping line's wordmark out-shout ours; the crane strip read too faint; the mobile hero needed a stronger scrim and stacked links; the dark-section placeholder was the lowest-contrast text on the site; and the six service containers appeared verbatim on both pages.
Changed in Entry 4: bill of lading got bottom clearance and the stamp now overlaps the card edge, not the type; photo swapped for a brand-free Rotterdam crane frame with the credit and the claim split onto separate lines; silhouettes brightened and varied; hero scrim deepened, mobile headline floor raised, secondary links stack on mobile; dark placeholders lifted to cream-amber; for-clients services recast as a manifest of scoped engagement offers (area · what it looks like · passage) — offers, not invented past work. V2 is final after this revision.
Entry 3 — Critic round 2
Critic's top notes: (1) an overflow-wrap: anywhere rule broke "ORGANISATIONS" mid-word on every viewport — disqualifying; (2) the facts manifest clipped the €0 column on mobile with no scroll affordance; (3) mobile nav truncated "CONTACT"; (4) two display headlines fought in the recruitment section; (5) the for-clients hero wasted half its canvas while naming a bill of lading it never showed; (6) crane strip read as a repeated tile; (7) three equal-weight hero CTAs diluted hierarchy; (8) placeholder plates out-shouted real content; (9) motion was generic fade.
Changed in Entry 3: the wrap rule deleted and the clamp retuned — hand-broken lines only; facts manifest stacks into ID plates on mobile; nav wraps instead of hiding overflow; recruitment section has one headline ("Engineers, designers, economists wanted." in ink + orange) with the qualifier demoted to the kicker; the for-clients hero now carries an actual stamped bill-of-lading document card (passage, crew, cargo, freight prepaid €0); crane silhouettes vary in height and opacity; hero has a single 01 button with 02/03 as command-style text links; placeholders dropped one register in chroma and size; the only entrance motion left is the six service containers being craned in with a staggered horizontal settle.
Changed in Entry 2: deploys switched to bsdtar — the crane photo now backs the hero and the Maasvlakte image renders; display-type color rule enforced (white carries the sentence, signal yellow lands the payload — mint deleted); crew manifest collapses to stacked ID-plate cards below 640px; corrugation ribbing made visible and container codes framed as ISO-style plates; service colors locked to a deliberate navy/orange/green ×2 rhythm; hero padding capped and mobile clamp lowered (no overflow); metaphor discipline enforced — mono kickers carry the harbor language, H2s say the plain thing; manifest rows now stamp in sequentially and hazard stripes crawl slowly (both reduced-motion-gated); crane silhouettes raised to visible contrast; mobile nav is one scrollable row.