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 5 — 2026-07-23 brand-and-content rebrand (client feedback round, real deck)
Why: a real client feedback round on V2/V3/V7 only (not the other seven variants). Full ground truth in website/variants/_brand/BRAND.md and the shared spec website/variants/content-v2v3v7.md, which now diverges intentionally from content.md on cost language for these three variants.
Colour: every invented pine-green value (#00623A/#0E4D30/#B8431F/#D9531F family) replaced with the three verified 180DC greens sampled from the official logo files — #78B038 (blocks/large surfaces), #4A7322 (AA-safe text/links on white), #3D6B1C (extra-safe small text). The old container-orange/yellow token roles now carry brand green instead. Applied to CSS custom properties, the crane-strip SVG fills, and the figcaption accent.
Logo & favicon: the invented 180° glyph in the header replaced with the real 180DC globe mark (img/180dc-globe.webp). The full black-text branch lockup placed in the new Mission section; the white wordmark lockup placed in the footer. Favicon (both pages) recoloured from orange #D9531F to brand green #78B038.
Terminology: every "pro bono" / "€0" / "free" / "at no cost" removed and reframed as "uniquely affordable" / "low-cost" per the client's approved language table — the underlying offer (still no charge to clients) is unchanged, only the phrasing. "Team lead" → "Project Manager" throughout. Board roles renamed "President" → "Branch President", "Vice President" → "Branch Vice-President". "Why free doesn't mean unchecked" → "Why affordable doesn't mean unchecked". The for-clients "Bill of lading" card relabelled "Engagement summary"; its €0/Freight-prepaid row replaced with a Cost row reading "Uniquely affordable".
Information architecture: added a new Mission section (previously missing entirely) and a dedicated Our Work section with its own nav entry and three reserved case-study cards (Situation → Approach → Outcome, each visibly [PLACEHOLDER — case study awaiting client consent] — no invented clients or outcomes). Nav tightened to Mission · What we do · Our work · For clients · Join · Team · Contact; Partners moved out of the top nav into the hero doors and footer; "Crew" renamed "Team" throughout. The old exclusionary qualifier ("if your primary goal is impact rather than profit... you likely qualify") removed from the for-clients hero and replaced with welcoming copy — a softened version now lives in the new Mission section instead. Primary "Work with us" CTA now targets for-clients.html#intake directly (one click, no extra scrolling to the form).
Engagement cycles: the invented "8–10 weeks" / "10–12 weeks" language replaced with the two real cycles — October–January and March–June — and the four-phase timeline retitled to be cycle-relative (start of cycle / week 1 / through the cycle / end of cycle) instead of hard week counts. Added an "always expanding, case-by-case" line inviting out-of-scope inquiries. The intake form itself (five fields, non-submitting) is unchanged — it was already working well.
Join, rebuilt: now states both recruitment windows (Cycle 1 = September, Cycle 2 = January/February), describes both roles explicitly (Consultant — no experience required, with an explicit reassurance that people shouldn't self-select out; Project Manager — experience wanted, usual path is Consultant then PM), reserves a recruitment-portal link placeholder, adds a distinct Events block placeholder, and reserves two member-testimonial slots.
Team/Board: the "Crew manifest" table replaced with a reserved portrait-frame grid — dashed, diagonally hatched 3:4 photo slots (the same reserved-frame idea V1 uses, recoloured to V2 green) — each with name, renamed role, and email. Added visible placeholders for team photos (awaiting photo session) and for the roster itself, which is flagged pending confirmation against Monday.com — the monday MCP could not be authorised in this non-interactive session (needs /mcp or claude mcp interactively).
V2-specific jargon dial-back: per client feedback ("likes the theme, not the terminology"), kept the full port/container visual system but stripped obscuring cargo vocabulary from headings and copy — hero code strip no longer says "CARGO … PRO BONO STRATEGY", "Cargo manifest" → "What we're made of", "Six containers — pick your load" → "What we do", "Every deliverable clears customs" → "Every deliverable is reviewed before it reaches you".
Outstanding blockers (not resolved this pass): (1) Monday.com board-roster confirmation — auth pending, flagged in the Team section rather than presented as final; (2) the "first multi-city branch" claim is confirmed live on 180dc.org and kept as-is, but a one-line sign-off from Stefan Kluwer (Branch President) is recommended before treating it as fully final; (3) case studies, team photos, testimonials, partner logos, and the recruitment/events links all remain honest placeholders awaiting real content.
Entry 6 — 2026-07-25 live-review feedback round
Note on terminology: the client's live-review feedback asked for "Project Manager" to be renamed "Team Leader" everywhere, which is the reverse of Entry 5's "Team lead" → "Project Manager" change (itself pulled from the org's Terminology Requirement doc, which still lists "Team Leader" as the disallowed term). Flagged to the client; per their explicit choice, "Team Leader" is what ships. Board titles (Branch President etc.) are unaffected.
Changed: booking-request form moved to directly under the hero on for-clients (was at the bottom); Mission section headline reworded (the old "…and least able to pay for it" framing read oddly) and its logo plate enlarged, centred, and reshadowed to match the site's other cards instead of sitting small and off-centre; every home-page section now alternates a light/dark/concrete ground so categories stop merging visually. Nav split into scroll-anchor links (What we do, Our work, Team, Contact) and own-page links (Mission, For clients, Students), the latter marked with a trailing → so the two behaviours are visually distinct before a click. Mission and Get Involved graduated from home-page sections into their own pages (mission.html, for-students.html) mirroring the existing For Clients pattern, each with a condensed teaser left on the home page. Mission page adds an explicit "part of 180DC worldwide" section linking to 180dc.org.
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.