V12 — Atlas
Thesis: the branch as one lit node in a worldwide network. Every other variant tells the Delft–Rotterdam story on its own; Atlas is the one built to answer the client's recurring feedback point head-on — "we explain who Delft–Rotterdam is, but not the big picture of 180DC worldwide." Its signature device is an inline-SVG network graph: a home node for Delft–Rotterdam, connected by faint lines to an abstract field of unlabeled nodes standing in for the rest of the network. Nothing on the map is invented — no specific branch names, cities, or counts are plotted, only the two verified claims the rest of the site already makes ("first multi-city branch," "world's largest university-based consultancy") plus Delft and Rotterdam's real coordinates.
Specification
Palette
Two registers, alternating: a deep "night map" navy (#0B1220/#060A10) for the network graphic and header/footer, and paper white with a faint green wash (#F5F8F1) for content. The verified 180DC greens (#78B038 / #4A7322 / #3D6B1C, from _brand/BRAND.md) are the only accent in both registers.
Type
System sans for display and body (zero font-loading weight), paired with a monospace stack for the signature detail: real geographic coordinates and timeline labels set in ui-monospace, reading like map annotations.
Layout & motion
1120px measure. Sections alternate night / plain / wash so the "wide view" and "the work itself" stay visually distinct. One signature move: the home node pulses and one connection line carries a travelling dot (both CSS, both prefers-reduced-motion-gated) — nothing else animates on entrance beyond the shared scroll-reveal fade.
Signature devices
The network-graph hero and mission diagrams; "node cards" for services/roles/work with a dot-and-rule marker on the left edge, echoing the map; a nav-page marker (a small green dot before Mission/For clients/Students) distinguishing page links from in-page scroll anchors.
How it was made & how to extend it
Build: hand-written static HTML/CSS, one stylesheet, no framework, no build step, no web fonts, no raster photography — the network graphics are inline SVG. The only binary assets are the three shared WebP logo files. One JS-gated, reduced-motion-gated fade-in for scroll reveals, plus the CSS-only node pulse/travel; everything renders without JavaScript.
Built already-correct, from the 2026-07-25 feedback round: unlike the original ten (and V11, which launched a round before this feedback existed), Atlas starts with every lesson from both feedback rounds already applied — the verified brand green, Team Leader terminology, a nav that visually distinguishes scroll anchors from own-page links, dedicated Mission and Students pages from day one (no retrofit), the booking form already at the top of for-clients.html, and an explicit "part of 180DC worldwide" section with a link to 180dc.org.
Honesty devices: every gap is a visible tinted placeholder — impact numbers, case studies (Situation → Approach → Outcome shown), team photos, the roster (flagged pending Monday.com confirmation), recruitment portal, events, testimonials. The network map is deliberately abstract for the same reason: plotting specific unverified branch locations or a specific worldwide branch count would be inventing a fact the way the honesty rules forbid. Nothing here is invented — no fake clients, numbers, photos, or logos, and no fake pins on the map.
To extend: new pages reuse .node-card, .chip, .coords, and the night/plain/wash alternation. Keep the rule: the night register is reserved for "wide view" moments (hero, the worldwide-network section, footer) — don't spend it on routine content or it stops meaning anything.
Log
2026-07-26 — initial build. Built as a fresh, deliberately different twelfth variant — a creative test, not a retrofit — alongside the feedback pass on V7 and V11. Content parity with every other variant (same six service areas, two roles, two cycles, honest placeholders); same golden-set quality bar to hit before it's considered a real contender: Lighthouse Performance/Accessibility ≥ 95, keyboard-navigable, WCAG AA, works without JavaScript.
Outstanding blockers (shared with the rest of the set): (1) Monday.com roster confirmation pending. (2) The "first multi-city branch" and "world's largest university-based consultancy" claims are the org's own live-page language, kept as-is; a one-line sign-off from Stefan Kluwer (Branch President) is still recommended before treating them as fully final for a formal deck. (3) Case studies, team photos, testimonials, and the recruitment/events links remain honest placeholders awaiting real content.
Still owed: Lighthouse run against a real deploy; standard Critic rounds, per the pipeline the rest of the set went through — Atlas has had none yet.