V5 — Soft Impact
Thesis: warm and human, designed for the non-profit director — photography-led, rounded geometry, gentle motion, generous air, pastel-shifted green. The variant that leads with care rather than machinery. One of ten competing design variants; content identical across all ten (see website/variants/content.md).
Specification
Palette
Cream #FBF7F0 · warm ink #2C3A31 · deep green #3D6A52 (AA at any size) · sage #55876B · washes #E7F0E9 / #F2EDE2. No pure white, no pure black, nothing saturated. Amber lives only in the seed-packet placeholders.
Type
Fraunces 400/600 (display — a warm soft serif with real italic) + Nunito Sans 400/700 (body, rounded humanist). Kickers 0.78rem, uppercase, 0.14em.
Geometry & spacing
22px radii on everything; pill buttons and pill week-markers; soft 2px-blur shadows, never hard edges. 1160px measure, 4.2rem section rhythm, air everywhere.
Motion
One gentle move: 700ms bloom (fade + 16px rise) on scroll, JS-gated behind html.js, off under prefers-reduced-motion. Cards lift 3px on hover. Nothing pulses, nothing scans.
Photography
Real places, honestly captioned: the Delft canal (where we started), the Erasmus Bridge (our second home), a sapling for the quality section. All Pexels, credited in captions, WebP, ~390 KB total. No stock people presented as us — team photos are dashed reserved circles with initials.
Honesty devices
Placeholders are 🌱 seed packets — dashed amber chips that read as "planted, growing" rather than alarm. The team section says out loud why the circles are empty.
How it was made,
& how to extend it
Build: hand-written static HTML/CSS, one stylesheet, no framework, no build step. Photography via the Pexels API, compressed with sharp; fonts self-hosted woff2 (~132 KB).
Mood calibration: the warmth register of good non-profit brands — generous whitespace, honest photography of real places, serif voice — while keeping consulting credibility (real numbers row, the quality system present but soft-spoken). The line to hold when extending: warm, never cute; caring, never unserious.
To extend to the full site: Our Work becomes story cards (photo, one paragraph, one real number) once cases exist; Team swaps the initial-circles for real photos in the same round frames; Impact is the pebbles row grown into a page. Reuse .band for alternating washed sections, .stones for any sequence, .leaves for card grids. If an element needs a sharp corner or a dark background, it belongs to another variant.
Deploy: zip-deploy to Netlify via API (see website/variants/tools/deploy.ps1).
Rounds
Round 0 — initial construction. Built from the shared content spec, with every accumulated lesson from V1–V4 baked in: JS-gated motion, forward-slash zips, hand-broken headlines, one placeholder register, no inline grid placements.
Round 3 — Critic (final). Verdict: "desktop would place top-three on coherence and character alone" — but mobile had a disqualifying robustness bug: the scroll-reveal could permanently hide content (half the board cards missed the observer), plus a viewport overflow. Changed: a 1.2s failsafe now force-reveals anything the observer missed — content can never stay hidden — and overflow-x: clip guards the viewport; mobile member cards restacked as a proper two-column grid (name / role / email under each other); "Contact" dropped from the nav (the footer owns it) so pills never orphan; the bare arc glyph now sits in its wash circle everywhere it bullets a list (bare arcs remain only as stat brackets); the for-clients quality section's lone pill replaced by two dashed case-study skeletons shaped like the content they await; self-praising honesty copy cut from five mentions to two; hero CTAs resolved to one row — "Start a scoping call" primary, "Join as a consultant" secondary; the client-page photo swapped for market day at the Markthal (daylight, people, on-thesis).
Round 2 — Critic. Top notes: the photography led in the wrong direction (night shot vetoing the palette, cold steel on the client page); the 180°-arc mark was "a wifi icon" at 18px while the register stayed template; five components shared one white-card shape so nothing ranked; the amber placeholders out-shouted the CTAs — one sat directly under "Request the call"; 44 identical un-staggered reveals; the hero exit read as footnote debris; ten near-identical small type sizes; mobile nav clipped with hidden scrollbar; terracotta defined but never spent. Changed: photos swapped for warm daylight (the Markt in Delft; the Willemsbrug at sunset) and warm-graded in the pipeline (saturation −14%, +5% brightness, cream tint) so the images are the palette's largest swatch; the hero photo is now cropped by a full 180° arch — the mark at architectural scale — with the same arc keying the un-carded stat numerals (Fraunces at up to 3.4rem straight on the cream) and bulleting the outcomes list; placeholders re-dressed in-palette (sage dash, wash fill, no emoji) and the form disclaimer moved above the form as a quiet italic note; reveals cut to 450ms with 70ms grid stagger; three doors, three weights in the hero; terracotta spent exactly three ways (hero italic, the final board-ready week pill, link hover); mobile nav wraps as pills and the team compresses to compact rows.
Round 1 — Critic. Top notes: "a very well-groomed Squarespace nonprofit theme with excellent copy" — the thesis said photography-led but the hero photo was a postage stamp (of algae-covered water, no less); zero distinctiveness below the headline voice; the sapling photo was "the single most clichéd sustainability stock image in existence"; three equal hero CTAs; a third of the site repeated across pages; mobile nav orphaned "Contact"; "First" read as a mistake in a numeral row; the bridge photo too cold for the register; the "serious" half leaned entirely on copy. Changed: the hero photo now leads — full column height at half the canvas, swapped for Delft at twilight (warm-lit houses); the site's two ownable devices promoted into a visual language — a 180°-arc mark replaces the meaningless letter chips and bullets the outcomes list, dashed lines run through captions; the sapling replaced by the actual review artifact (the findings card: evidence / logic / clarity / calibration — the real rubric, nothing invented); one primary CTA with quiet text links; for-clients de-duplicated (compact outcomes list + one-line quality pointer); the week-by-week timeline now sits on the site's one deep-green full-bleed band — softness as a choice, not a default; mobile nav scrolls in one row; "1st"; stat numerals up 40%; measures capped; the guide headline hand-broken.