Design specification · not client-facing
Thesis: a professional two-city narrative—clean institutional copy beside a contained, credited city film rather than over a full-bleed background. Home moves from real Rotterdam footage through a restrained brand-green confluence into real Delft footage; Mission, For clients, and Students each carry a different route-specific film. It differs from Port's photographic maritime system, Polder's diagrammatic landscape, Lumen's image-light calm, and Atlas's information-first mapping by making the branch's Delft–Rotterdam connection a sequence across pages while keeping motion bounded, optional, and outside the reading layer.
Design system
| Palette | Verified 180DC green #78B038 for surfaces and large decorative marks; AA-safe #4A7322 for links and small green text; extra-safe #3D6B1C for dense labels. White, pale green wash, and green-black neutrals support those three brand greens. No competing hue. |
|---|---|
| Typography | System UI stack only—Segoe UI, Helvetica Neue, Arial. No font request, no flash, and no font-license or transfer cost. Large editorial headings use tight spacing; body copy stays conventional and calm. |
| Layout | 1160px maximum measure, white-dominant split heroes with copy and facts in one column and a contained 8:5 film in the other, then alternating content bands. At 860px the film moves below the complete text block. Cards use 18px corners, hairline green-tinted rules, and restrained elevation. |
| Signature | Four real, route-specific city films framed as editorial context; visible place labels and documentary credits; a restrained #78B038 grade and two static “confluence” lines inside the media frame; and disciplined fact grids. The green treatment supplies the slight atmospheric quality without fabricating either city. |
| Navigation | On Home, plain links scroll to What we do (#services), Our work (#work), and Team (#committee). Bordered links with an arrow open Mission, For clients, and Students. On own pages, those scroll links explicitly return to index.html#services, index.html#work, and index.html#committee. |
| Accessibility | Skip links, visible focus rings, semantic headings, labelled form fields, responsive navigation, AA-safe text colors, descriptive film labels, visible source captions, and 44px playback controls. The text never sits over video. Each source-less video has a poster fallback; reduced motion never attaches the MP4, no-JavaScript renders the poster and full copy, and Data Saver requires an explicit play action. |
Real places, visibly credited
The media is city context, not evidence of 180DC work. Every film sits beside the claim-bearing copy, carries its city in the frame, and names its creator, source, and licence in a visible caption.
The opening film begins with Rotterdam's river scale, passes through a short #78B038 confluence treatment, and resolves in Delft. Its Rotterdam and Delft excerpts are unique to Home and credited separately; the transition is editorial treatment, not a claim that the two views form one continuous geography.
A separate Oostpoort and water film anchors the branch story where it began. Its caption identifies Delft and explicitly says that the footage is not an 180DC project or team event.
A distinct Maasvlakte film supplies port, water, and infrastructure scale beside the engagement proposition. It is contextual footage—not a client, case study, outcome, or branch engagement.
An official TU Delft NewMedia Centre aerial gives the student page a contemporary, campus-specific register. The campus users visible at a distance belong to the credited source and are never presented as this branch's members or consulting team.
The public pages self-host their compressed MP4s and WebP posters; no third-party player, tracking request, remote embed, or audio stream is shipped. The earlier generated img/hero-confluence.webp remains as historical build material but is no longer referenced by a public page. Its slight fantasy quality survives only as a transparent brand-green grade and static diagonal lines inside each bounded film frame.
Documentary ledger: each public figcaption links to the exact source page and its licence evidence—Wikimedia Commons for three routes, and TU Delft NewMedia Centre's official YouTube source for Students. Final verification checks those links, attribution terms, city identity, file sizes, and the absence of footage reuse across routes.
One-shot motion, poster-first delivery
Initial HTML stores the route's MP4 path in data-src; the video element has no media source. Its WebP poster, place label, credit, and all hero copy are complete before JavaScript runs. With JavaScript disabled, a matching noscript image fills the same reserved 8:5 frame.
media-controller.js attaches only the film present on the visited page, and only when its frame approaches the viewport. Normal-mode playback is muted, inline, and one-shot: it pauses off-screen or when the tab is hidden, exposes a 44px Pause control, stops at the final frame, and offers Replay rather than looping.
prefers-reduced-motion: reduce keeps the MP4 detached and the poster static, including when the preference changes at runtime. Data Saver and 2G connections retain the poster until the visitor explicitly chooses Play. If loading or autoplay fails, the credited poster remains legible and the controller never hides the copy.
| Home | Rotterdam → green confluence → Delft. MP4 ceiling: 720 KB; visited-page ceiling: 900 KB. |
|---|---|
| Mission | Delft origin. MP4 ceiling: 520 KB; visited-page ceiling: 700 KB. |
| For clients | Rotterdam port scale. MP4 ceiling: 420 KB; visited-page ceiling: 650 KB. |
| Students | TU Delft campus. MP4 ceiling: 440 KB; visited-page ceiling: 650 KB. |
The repository now stores several films, so the relevant performance invariant is the transfer for the page a visitor actually opens. No route references, preloads, or prefetches another route's MP4. Posters target 40 KB or less, and final measured transfer—not nominal bitrate—is the release gate.
Content and honesty
The copy follows the current V2/V11 public pages: founded in 2019; first multi-city branch; TU Delft × Erasmus Rotterdam; six service areas; two consulting cycles, October–January and March–June; recruitment in September and January/February; and exactly two roles, Consultant and Team Leader.
The source brand document contains older terminology that prefers Project Manager. Current V2/V11 guides record the later explicit client override to Team Leader, and the user repeated that requirement for V14. Public pages therefore use Team Leader and contain no Project Manager reference.
Real footage changes the evidence standard, not the branch facts. Place labels and source captions say only what the linked documentary source supports. Every caption separates city or campus context from 180DC projects, clients, members, and events; no film may be used to fill a missing case study, team portrait, testimonial, partner, or impact result.
Impact numbers; three case studies with Situation → Approach → Outcome; team photos; provisional roster; partner logos; non-submitting intake form; recruitment portal; events calendar; and two member testimonials. Those gaps remain visibly reserved. No city film, still frame, fake client, outcome, statistic, person, quote, or partner fills any one of them.
Build and critique log
The original still-image version completed three critiques and a verification pass. The contained-film redesign is a second material build, so it receives three fresh screenshot reviews and a new final verification rather than inheriting the earlier result.
Created five static HTML pages and one stylesheet under v14-confluence. Added the one compressed hero still plus three official compressed logo assets. No framework, external font, video, analytics, or runtime dependency. The missing RECOMMENDATION.md precondition was explicitly waived by the user.
Fresh review findings: mobile skip/header collision; clipped horizontal navigation; a demo form styled too much like a working endpoint; an overlong one-column mobile roster; a hero crop that leaned too heavily toward plausible crane forms on small screens; identical hero treatment across all four public pages; generic rounded-card repetition below the hero; and repeated long placeholder labels becoming visual noise.
Applied fixes: made the skip link fully invisible until :focus-visible; converted the mobile nav to a complete two-row grid and made the header static; disabled and relabelled the demonstration submit control while replacing the final dead-end CTA with email; retained two roster columns at 390px; shifted the mobile crop toward the dike/water curve; added distinct Mission/Clients/Students crop and opacity treatments; flattened the service cards into a connected institutional grid and added confluence hairlines to content bands; consolidated section-level placeholder explanations and shortened repeated card markers without hiding their full accessible labels.
Fresh review findings: internal guide material and the variant label read as prototype exposure; the disabled client form was still too prominent relative to a live action; placeholders and Home depth still dominated the public experience; the mobile hero needed more midtone detail; large branch and quality claims needed direct evidence; and repeated defensive headings risked making honesty itself feel synthetic.
Applied fixes: marked the non-client guide noindex, nofollow; made email the live navigation and primary intake action while retaining the explicitly required, disabled form preview; compressed reserved mobile portraits to wide compact frames; raised Home-mobile image midtones and kept differentiated subpage crops; linked to the official global network and Delft–Rotterdam branch history; and replaced several defensive “template/verified/real voices” headlines with plain institutional language.
Constraints retained deliberately: the guide remains linked because every recent gallery variant includes its design write-up; placeholder sections remain because visible honest gaps are a direct content-parity requirement; and Home retains the shared facts, services, work, student, partner, and team sections rather than becoming a reduced campaign page.
Fresh review findings: the same six services had drifted into slightly different descriptions on Home and For clients; mobile navigation targets were still cramped; the client-journey connector did not run cleanly through its nodes; desktop portrait and testimonial placeholders remained too tall; the guide abbreviated its real anchor destinations; and one mobile inline-link arrow could wrap onto a line by itself.
Applied fixes: made the full six-description set byte-for-byte consistent across both pages; raised mobile navigation to 44px targets and 12px labels, with the contextual action spanning two columns; connected desktop timeline nodes center-to-center and used per-step vertical connectors in the single-column layout; shortened desktop portrait frames and removed testimonial minimum height; documented every literal anchor destination; and kept the final link word and arrow together.
Integrity at that checkpoint: all five built HTML routes and every local link, fragment, stylesheet, and image resolved. The public-page audit found all required branch facts, all six canonical service descriptions in exact parity, Consultant and Team Leader terminology, and honest case-study, team-photo, and testimonial gaps. That build shipped one non-logo still and zero video; its full directory was under 220 KB, and hero-confluence.webp was 18,244 bytes.
Responsive and motion at that checkpoint: no horizontal overflow appeared at 320px, 390px, or 768px on any route. Mobile navigation targets were at least 44px high. No-JavaScript screenshots retained every heading and content section. Normal mode reported the 34-second Ken Burns animation and a changing parallax offset; reduced-motion mode reported a zero offset, no image animation, and zero running animations.
Lighthouse at that checkpoint: Home 99/100/100/100 at 72 KB; Mission 100/100/100/100 at 66 KB; For clients 100/100/100/100 at 68 KB; For students 100/100/100/100 at 67 KB. Values were Performance/Accessibility/Best Practices/SEO from local runs. Those measurements describe the retired still-image presentation and are not performance evidence for the film redesign.
Gallery at that checkpoint: a real 1280×800 render was compressed into the 720px WebP thumbnail, and the card, comparison-table row, and distinguishing one-line thesis were present. The redesign requires a replacement thumbnail and revised comparison data after its own verification.
Replaced the full-bleed generated-image heroes with white-dominant split layouts across Home, Mission, For clients, and Students while preserving their copy, fact grids, calls to action, navigation pattern, and content gaps. Each route now contains one source-less video, its own WebP poster and MP4 path, a visible city label, a documentary caption, and a distinct real-footage role: Home Rotterdam → Delft; Mission Delft origin; For clients Rotterdam scale; Students TU Delft campus.
Added one shared media-controller.js for route-local source attachment, viewport and tab pausing, one-shot Play/Pause/Replay state, runtime reduced-motion changes, Data Saver and 2G opt-in, and poster retention on failure. Removed the live Ken Burns and parallax treatment. The prior abstract still remains unreferenced historical material; verified brand-green grading and static confluence lines provide continuity inside the contained media frames.
Status: implementation complete; independent redesign critiques and final verification remain required below. No earlier screenshot, transfer figure, Lighthouse result, or gallery thumbnail is carried forward as proof.
Status: Completed from fresh 1440×900, 768×1024, 390×844, and 320×800 screenshots of all four public heroes.
Fresh review findings: the contained 8:5 frames, copy-first desktop composition, green grade, city labels, and controls felt professional and should remain. Four correctable issues surfaced: Home's film said Rotterdam → Delft while its eyebrow and city fact reversed that sequence; on narrow phones the fact grids pushed the film too far below the opening message; the original low-light metal-printer excerpt looked soft and generic beside the other footage; and 0.71rem captions sat at the lower legibility limit.
Applied fixes: aligned Home's narrative cues to Rotterdam → Delft while retaining the official Delft–Rotterdam masthead; made stacked heroes order introduction and actions → film and caption → fact grid, with a 2rem phone gap; replaced the soft student excerpt with a bright, contemporary aerial sequence from TU Delft's official NewMedia Centre; and raised captions to 0.75rem with 1.55 line-height. The restrained green transition, bounded film frame, and desktop geometry were intentionally retained.
Status: Completed by a fresh reviewer across normal playback, reduced motion, no JavaScript, Data Saver, off-screen and hidden-tab pausing, explicit-pause retention, autoplay rejection, replay, media failure, and 320/390/768/1440px layouts. All four routes retained their posters and captions, loaded only their own film, kept active controls at least 44px high, and recorded Lighthouse Accessibility 100.
Fresh review findings: three degraded-state issues needed correction: a source-less native video could expose “Unable to play media” to assistive technology; Data Saver hid the focused control while a manual request loaded and exposed no persistent loading state; and a stale rejected play() promise could overwrite a new runtime reduced-motion state. The automated content check also used looser caps than this guide, and repeated cold Lighthouse runs showed volatile Home total-blocking-time while the longer 10.8-second, 707 KB composite offered an obvious optimization target.
Applied fixes: treated each silent decorative video as hidden from the accessibility tree while preserving the visible figcaption and no-JavaScript image alternative; kept the Data Saver control visible and focusable as an aria-live, aria-busy Loading state; invalidated stale play promises with a guarded token; added direct regression checks for all three paths; aligned every automated ceiling with the table above; tightened Home to an 8.0-second 768×480 film at 488,439 bytes without losing the Rotterdam → green confluence → Delft sequence; and scheduled automatic attachment for the first post-paint idle opportunity while keeping manual playback immediate.
Status: Completed by a third fresh reviewer after the final media encodes and controller fixes. The review checked the four public heroes at desktop and 390px, every source and licence URL, the local media ledger, city and campus identification, documentary disclaimers, content parity, navigation, fragments, focus treatment, and all automated audit results.
Fresh review findings: the redesign was judged ready to keep: Rotterdam reads unmistakably first on Home, Delft follows after the green confluence, all four films are byte-distinct and route-specific, no text sits over media, every caption separates context from branch work, all external credit links returned HTTP 200, and no generated image is presented as documentary evidence. One guide sentence incorrectly described all four sources as Wikimedia Commons even though Students uses TU Delft NewMedia Centre's official YouTube source. The reviewer also noted that YouTube marks that source simply as CC BY without exposing a version-specific deed.
Applied fixes: corrected the documentary-ledger sentence to distinguish the three Commons sources from the official TU Delft YouTube source. The Students credit deliberately links YouTube's own CC BY evidence rather than inventing a licence version; title, creator, source, excerpt, and edits remain explicit in MEDIA-CREDITS.md. No layout, film assignment, public copy, or interaction change was recommended.
Integrity: all four silent files are H.264 Main, yuv420p, 24 fps, fast-start MP4s with no audio stream. Home is 8.000s, 768×480, and 488,439 bytes; Mission is 6.792s, 960×600, and 507,466 bytes; For clients is 5.792s, 960×600, and 407,989 bytes; Students is 6.792s, 960×600, and 337,299 bytes. The content/link audit passed every shared fact, six exact service descriptions, Consultant/Team Leader terminology, placeholder, local page link, fragment, unique-film hash, and strict ceiling.
Responsive and degraded modes: automated checks passed without horizontal overflow at 320px, 390px, 768px, and 1440px; all active navigation and film controls met the 44px target; and captions remained visible. Normal one-shot playback, explicit Pause/Play/Replay, off-screen and hidden-tab pausing, user-pause retention, reduced motion with zero MP4 request, no-JavaScript poster/copy, Data Saver opt-in and loading status, failed-media poster fallback, and the runtime reduced-motion/play-rejection race all passed.
Performance: strict complete-route estimates are Home 600,242 bytes, Mission 638,939 bytes, For clients 524,768 bytes, and Students 464,219 bytes. Lighthouse transferred 552 KB on Home, 589 KB on Mission, 478 KB on For clients, and 419 KB on Students. Accessibility, Best Practices, and SEO were 100 on every route. Local cold-launch Performance was host-volatile—77–100 for repeated Home samples, and the first route in a shared browser absorbed the same slowdown—while warm sequential runs reached 100; the gallery reports the range rather than selecting only the best run.
Gallery: generated and visually checked a real reduced-motion 720×450 WebP screenshot at 21,232 bytes, then replaced the obsolete abstract-still card, spotlight thesis, comparison row, imagery/JavaScript/motion labels, transfer figure, and score note.
Extension rule
A new public route may reuse the split hero, fact grids, service list, cards, static green grade, source-less loading controller, and caption pattern. It must receive its own verified footage and lightweight poster, its own visible creator/source/licence credit and “context, not branch work” disclaimer, and its own measured route budget. Never turn the film back into a full-page text background, preload another route's source, reuse a clip to imply a new context, add audio, loop automatically, or let motion carry information that is absent from the poster and copy.
