V3 — De Stijl
Thesis: Dutch modernist — Mondrian-inspired asymmetric grids, primary accents against 180-green, oversized geometric composition. The black line is the design; color is placed, not sprayed. One of ten competing design variants; content identical across all ten (see website/variants/content.md).
Specification
Palette
Off-white #FCFCF7 · Black #161616 · Red #C8102E · Blue #1348A0 · Yellow #F2CB05 · 180-green #00693C as the fourth primary. Color rule (hardened in round 2): the interface color is green only — chips, keys, eyebrow squares are always green; red/blue/yellow live exclusively in mute compositional planes and are never attached to labeled content, so color never fakes a legend. Text on yellow is always black. Body text is black on white, always AA.
Type
Schibsted Grotesk only — 400 body, 500 kickers (uppercase, 0.14–0.16em tracking), 800 display at −0.03em. One family, three voices; the grid does the differentiating.
Line & spacing
The 6px black line divides everything; 2px lines subdivide. No border-radius, no shadows, no gradients anywhere. Compositions are CSS grid with deliberately unequal columns (1.6 / 0.6 / 0.9).
Motion
One motion on the whole site: the 180° numeral makes its half-turn into place on first view (JS-gated, reduced-motion-gated). Generic scroll-reveals were deleted in round 2 — one purposeful movement beats forty polite ones. Hover: cells fill flat color, doors invert to black.
Signature elements
Hero as a Mondrian composition whose cells are content (headline plane, 180° green plane, aphorism on yellow) · door-row CTAs as grid cells · proof strip with colored numerals · team as a mosaic with color swatches · timeline as four proportional week-blocks — the project block is widest because that's where the work lives.
Honesty devices
Missing content sits on yellow plates with black borders — [PLACEHOLDER] as a compositional element. No images at all in this variant: zero raster weight, nothing to fake.
How it was made & how to extend it
Build: hand-written static HTML/CSS, one stylesheet, no framework, no build step, no images. Single font family self-hosted (~138 KB of woff2). The lightest variant of the ten by design.
Mood calibration: Mondrian and Rietveld as *system*, not costume — asymmetric balance, primary color as punctuation, the line as the protagonist. The web translation must resist centering everything; De Stijl balance is asymmetric or it is nothing.
To extend to the full site: every page is a new composition from the same six planes: black line, white ground, four colors. Our Work becomes a gallery of compositions (one per case, Situation/Approach/Outcome as three unequal planes); Impact becomes a proof-strip page; Team gets photo cells (black-and-white, color swatch retained) after the photo session. Never center a composition; never use more than one red plane per viewport; the green plane is always the largest colored plane — brand discipline inside the art discipline.
Deploy: zip-deploy to Netlify via API (see website/variants/tools/deploy.ps1).
Rounds
Round 0 — initial construction. Built from the shared content spec. Reveal motion JS-gated from the start (lesson from V1 round 1).
Lighthouse — final build (local run, 2026-07-09). Home 100 / 100 / 100 / 100 (perf / accessibility / best-practices / SEO), 146 KB. For-clients 100 / 100 / 100 / 100, 141 KB. Guide 100 / 100 / 100 / 100, 141 KB. Both quality bars cleared at the maximum.
Round 3 — Critic (final). Verdict: "top-two in a ten-way field and could win on discipline alone." Remaining notes, all actioned: the review quadrant's black tile dissolved into the black band and the step colors were semantically inverted (deliver was red) — remapped to white→yellow→red→green, ending on brand green; the hero's mute planes now work for a living (red carries "Pro bono — €0, always", white carries "1st multi-city branch worldwide"); the mobile nav's empty sixth cell now seats the 180° mark; the red label tile leads the mobile service list instead of interrupting it and the blue link tile compresses to bar height; placeholders switched to neutral grey hatch so scaffolding never wears the palette; the people-card slider motif simplified to a plain rule with emails sized down; "First" set as "1st"; the intake page gained a what-happens-next note and fields a green focus state; the mobile numeral got an inset so it never clips.
Round 2 — Critic. Top notes: the for-clients service index overlapped its own text on mobile (span given a column but no row); the 180° rotation — "the single most on-mission moment on the site" — was buried small in its plane; color cycling on chips, stats, and people-cards implied a legend that didn't exist; the hero aphorism was deleted on mobile to dodge a layout problem; the field's mute planes read as absence; the quality quadrant begged to be semantic (four steps, four planes); the "snap" motion was a generic fade; assorted type rags. Changed: index rows got explicit grid rows; the numeral now dominates its plane at up to 12.5rem with a slimmer middle column for real asymmetry; a hard color rule installed — interface color is green only, red/blue/yellow live in mute planes (chips, swatches, stats, and eyebrows all uniform now); the aphorism plane returns full-width on mobile; the field's red plane carries the section's label and the blue plane carries the for-clients link; the quality quadrant now IS the diagram (1·draft / 2·review / 3·revise / 4·deliver, one word per plane); all scroll-reveals deleted — the half-turn is the site's one motion; placeholders switched to dashed-hatched so they can't be mistaken for real yellow planes; nav gets a sixth mute green cell on mobile; headline and door labels rag-fixed.
Round 1 — Critic. Top notes: the for-clients mobile hero collided (inline grid placements survived the breakpoint — disqualifying); two placeholder plates set light text on yellow (illegible); the six-service grid was "a generic SaaS card wall, pasted twice" — symmetric exactly where the thesis demands asymmetry; hero headline rag ("meets" orphaned); the site's best sentence (the "full turn" aphorism) was its smallest text; the Week-0 timeline column strangled its copy; red discipline broke the site's own one-red-plane rule; nav crammed at 390px. Changed: hero planes now place via classes so breakpoints win — mobile stacks cleanly; hard rule added (text on yellow is always black); services recomposed as one asymmetric field — Digital Transformation as a 2-row green plane, two pure color planes in the weave — and the for-clients copy compressed to a chip-index linking home; headline breaks set by hand with "for good." kept whole; aphorism raised to 1.12rem at the top of its plane; week columns got minimum character widths and the final block moved from red to blue (red = one plane per viewport, and never "alert" on good news); nav becomes a two-row ruled grid below 560px; the 180° numeral now turns 180° into place on first view (reduced-motion gated); facts placed into hero planes ("Est. 2019 · Delft → Rotterdam").