V1 — Blueprint
Thesis: TU Delft engineering heritage — the site as an engineer's drawing of itself. Drafting grid, dimension lines, title blocks, detail callouts, annotation typography. One of ten competing design variants; content identical across all ten (see website/variants/content.md in the repo).
Design system
| Palette | Paper #FAFBF9 · Ink #10231A · Green #00713F (large text) · Deep green #00542F (small text, AA-safe) · Revision red #B3261E (placeholders only). Grid lines are the green at 5.5% and 12% opacity. |
|---|---|
| Type | Space Grotesk 400/500/700 (display & body) + IBM Plex Mono 400/500 (annotations, dimensions, tables). Annotations are 0.72rem, uppercase, 0.14em letterspacing. Display scale: clamp(2.4rem → 4.9rem) at line-height 1.04. |
| Spacing | Sections at 4.5rem vertical padding on a 12px minor / 96px major background grid. Content max-width 1080px inside a 1240px bordered "sheet". |
| Motion | Things get drawn, nothing fades: stroke-dashoffset line-drawing on SVG diagrams and 2px rules drawing in under headings. Gated behind both prefers-reduced-motion: no-preference and an html.js class — no-JS and non-scrolling renderers see the complete sheet. |
| Signature elements | Title-block header (sheet number, scale, revision) · dimension-line component with paper-gap label · lettered section tags (Fig. 1, Table 1, Details A–F) · bill-of-materials proof table · parts-list team table · dashed "selection" outlines on hover · fixed coordinate readout (desktop, pure garnish) · pro-bono rubber stamp. |
| Honesty devices | All missing content is a red dashed [PLACEHOLDER] slot styled as a revision mark — visible by design, not hidden. |
How it was made & how to extend it
Build: hand-written static HTML/CSS with a single stylesheet, no framework, no build step. Fonts self-hosted as woff2 latin subsets (~95 KB total). All imagery is inline SVG — this variant uses zero raster images, so it costs nothing to load and nothing to generate.
Mood calibration: technical-drawing and engineering-documentation aesthetics — drafting sheets, title blocks, dimension conventions — translated to the web rather than imitated as texture. The restraint is the point: one accent color, two families, everything ruled.
To extend to the full site: every new page is a numbered sheet. Reuse .titleblock, section tags (continue the letter sequence), .bom/.parts for tabular content, .detail callouts for card grids, and the .dim component wherever a quantity or span is stated. Case studies become "as-built drawings": Situation → Approach → Outcome as Figs. 1–3 with a revision table. New sections must sit on the grid; if an element needs a radius or a shadow, it doesn't belong in this variant.
Deploy: zip-deploy to Netlify via API (see website/variants/tools/deploy.ps1).
Critique & revision log
Rev A — initial construction
Built from the shared content spec.
Rev B — Critic round 1
Critic's top notes: (1) scroll-reveal left non-JS/non-scrolling renders blank — disqualifying bug; (2) hero was a generic headline on graph paper, nothing drawn in the drawing; (3) dimension-line labels collided with display type, worst on mobile; (4) no dark beat — page rhythm flat, grid too faint; (5) mobile nav wrapped with an orphan link; (6) pro-bono stamp too timid; (7) coordinate readout frozen at zeros, CTA numbering inconsistent; (8) no human/case evidence.
Changed in Rev B: motion rebuilt — nothing fades, things get drawn (line-draw SVGs + rules under headings), all JS-gated behind html.js so the sheet always renders complete; hero now leads with "Consulting for organisations doing good." plus a self-drawing general-arrangement diagram of the engagement; dimension component got its own block row and a stacked mobile form; quality section inverted to a dark poché panel with light linework; grid opacity raised (9%/18%); stamp enlarged, rotated −4°, ink-textured via SVG turbulence mask; readout hidden until pointer moves and inset inside the sheet; CTA indices made consistent (01/02/03); added "Fig. 4 — as-built drawing No. 1" case frame with honest placeholder panels; mobile nav is one scrollable row.
Not actioned (honesty rules): the Critic asked for team photos and a real client case — neither exists yet; the slots stay visibly placeholder rather than faked.
Rev C — Critic round 2
Critic's top notes: (1) self-hosted fonts 404'd in production — the deploy zip wrote backslash entry paths Netlify can't serve — so the whole type system was rendering in fallbacks; (2) the inline placeholder chip split across wrapped lines, reading as deleted text; (3) the 4-column proof table overflowed 390px viewports; (4) the dimension line struck through its own label; (5) horizontal diagrams shrank to unreadable at mobile; (6) the timeline's dimensions contradicted each other (8–10 vs 10–12 weeks) plus an orphan tick — fatal on a "drawn to scale" conceit; (7) hero diagram too timid, primary CTA index invisible; (8) six service cards duplicated verbatim on both pages; (9) placeholder color convention inconsistent; team section coldest on the site.
Lighthouse — final build (local run, 2026-07-09)
Home 100 / 100 / 100 / 100 (perf / accessibility / best-practices / SEO), 83 KB total. For-clients 100 / 100 / 100 / 100, 77 KB. Guide 100 / 100 / 100 / 100, 77 KB. Well under the 1 MB budget; both quality bars (≥95) cleared with margin.
Rev D — Critic round 3 (final)
Critic's verdict at round 3: "final three of a ten-way competition — the conceit is total, honest, and executed with rare consistency." Remaining notes were drafting-precision items: the Fig. 1 circle crossed its own label; unannotated voids in the poché band, hero, and intake column; seven red placeholder chips made the page read as failing review; the mobile timeline promised a figure it didn't show; the third CTA orphaned; CONTACT dead-ended at a bare footer; team-table column craft.
Changed in Rev D: Fig. 1 got a paper text-mask (lines break for annotations, never cross them); placeholder system split into two registers — alarm-red for the two highest-value gaps (impact numbers, first case) and grey-green hatched "Reserved" plates for everything routine; hero CTAs are now a deliberate numbered stack; poché band annotated and captioned; the intake column gained a "field note" explaining what happens after send; footer contact block now carries a scoping-call button; mobile timeline renders as a vertical dimension chain with nodes; team emails sized up.
Changed in Rev C: deploys switched to bsdtar (forward-slash zip entries — fonts now load); placeholder rebuilt as an inline-block reserved-space plate, one red convention everywhere; proof table replaced by a 4→2 column spec-cell grid with the PRO BONO stamp as the FEE value; dimension component rebuilt so the line visibly breaks around its text; the mobile timeline now hides the horizontal drawing in favour of the vertical step chain; bracket relabelled "WEEKS 2–11 · THE PROJECT" and the orphan tick deleted; a hex-value leader annotation now measures the hero's green ("↖ 180-GREEN · #00713F"); for-clients services compressed to a one-line index referencing Sheet 01; eight hatched reserved portrait frames (P-01…P-08) added above the parts list.