Stichting Kalenda

Wat dit portfoliostuk is

Kalenda is een parodie. De stichting bestaat niet. Geen bestuur, geen donaties, geen brievenbus, geen achtste van de maand. Ik heb een kleine Nederlandse stichting verzonnen die een bewust nutteloos product levert (een getypte brief aan iedereen die er om vraagt, met een terugblik op de maand die net voorbij is) en haar website gebouwd zoals een echte Rotterdamse culturele stichting die in opdracht zou geven.

Ik heb dat met een specifieke reden gedaan. De meeste studio-sites bewijzen hun bereik met hetzelfde bewijsmateriaal: een SaaS-dashboard, een fintech-onboarding, een B2B-prijspagina. Het werk waar ik het liefst voor word ingehuurd, het werk dat ik aan een muur zou hangen, leeft buiten die baan. Dus heb ik een stuk gemaakt dat in het geheel geen landingspagina is in het SaaS-register. Lang en editoriaal. Fotografie­gestuurd. Tweetalig. Een donatie­widget die leest als een lidmaatschapsformulier van een museum. Een dropcap. Poststempels. Een voetnoot die door de hele pagina loopt.

De rest van dit stuk is voor een potentiële opdrachtgever. Het loopt door de keuzes die ik op Kalenda heb gemaakt en waarom, zodat u kunt zien wat uw project zou krijgen als u mij inhuurt. Lees het als een gesprek: zo denk ik wanneer er een briefing op tafel ligt.

Wat u kunt zien dat ik doe: brand en visuele identiteit vanaf nul, design tokens, typografische systemen, componentontwerp, motion direction, fotografie­regie, meertalige UX, toegankelijkheid, performance budgets, full-stack implementatie in Astro op Cloudflare en de editoriale discipline om het allemaal op één toon te houden.

De briefing die ik mijzelf gaf, en hoe ik die van u zou aanpakken

Ik heb dit als een echte opdracht behandeld. Ik schreef de briefing, benoemde de beperkingen, koos een referentie-register, en maakte vanuit die positie ontwerp­keuzes. Elk project dat ik aanneem begint zo. Een vage briefing levert een vaag ontwerp op. Dus de eerste sessie met een opdrachtgever gaat altijd over: voor wie is dit, wat lezen ze, wat verwachten ze, en wat zouden ze vertrouwen.

De Kalenda-briefing in drie regels:

1. Voor wie. Een Nederlandse lezer die culturele stichtingen al steunt. Oud genoeg om zich getypte brieven te herinneren. Jong genoeg om de stichting via een vriendin op Instagram te vinden.
2. Wat verwachten ze. Het visuele register van Volkskrant Magazine, een Stedelijk-catalogus, een omslag van de Bezige Bij. Geen startup-landingspagina.
3. Wat zouden ze vertrouwen. Echte foto’s. Lezers met namen. Een gepubliceerd ANBI-blok met regels. Een footer die openlijk vermeldt wie het heeft gemaakt.

Wanneer ik werk voor een echte stichting, museum, label of editoriaal merk, voer ik exact hetzelfde proces. De referenties verschuiven. De discipline niet.

De eerste keuze: register

De duurste fout op een project als dit is het verkeerde register. Ik zie het constant. Een stichting huurt een studio in die in het SaaS-register werkt omdat dat haar standaard is, en het resultaat is een website met bento grids, gradient hero metrics, glasmorfe kaarten en een CTA die “Probeer gratis” zegt. Die site lijkt op alle andere sites. De donor leest hem één keer en komt nooit meer terug.

Voor Kalenda heb ik vroeg besloten om de SaaS-default ronduit te weigeren:

• Geen bento grid. Editoriale pagina’s lopen als kolommen en full-bleed foto’s, niet als 12-koloms dashboards.
• Geen glasmorfisme, geen donker oplichten, geen gradient text. Dat zijn de vingerafdrukken van AI-gegenereerde marketingpagina’s. Een stichtingspagina die ze gebruikt leest meteen als nep.
• Geen hero metric layout. “10.000+ gebruikers” in een vier-koloms rij is voor softwarebedrijven, niet voor stichtingen.
• Geen icoonbibliotheek. Waar een andere site naar een Lucide-icoon zou grijpen, probeer ik eerst een poststempel.

Dit zijn geen stilistische voorkeuren. Het zijn beslissingen die in dienst staan van één vraag: zou het publiek dit vertrouwen. Het antwoord stuurde alles wat hieronder staat.

De visuele identiteit, beslissing voor beslissing

Ik begin elke identiteit door uit te zoeken waar het merk van is, in de meest letterlijke zin van het woord. Kalenda is een stichting die getypte brieven produceert. Het merk is dus van papier. Zodra je dat anker hebt, schrijft het systeem zichzelf.

Het kleurpalet

Vijf tokens. Drie zijn papiervarianten. Het accent is wax-zegelrood. Folio is de kleur van inkt op oude papiermarges. Margin is de gedrukte marge­lijn.

Ik heb deze kleuren niet uit een Figma-palet gekozen, maar door naar echte brieven te kijken. Het crème is hoe ongebleekt A5-papier eruitziet bij winterlicht. Paper-soft is hetzelfde crème, een halve stop donkerder, voor de binnenkant van enveloppen en de achterkant van kaarten. Inkt is niet zwart. Inkt is bruin-zwart, de kleur van schrijfmachine-inkt die één millimeter in het papier is gezakt. Stamp red is wax-rood, specifiek: het afgekoelde, licht matte rood van een staaf zegel­was, dat donkerder is dan brandweer­rood en warmer dan bordeaux. Folio is het ontzadigde tan dat inkt wordt zodra het dertig jaar op een vergelende marge heeft gestaan.

Elke naam in het systeem draagt deze redenering met zich mee. --kal-paper. --kal-ink. --kal-stamp. --kal-folio. De namen zijn bewust gekozen. Een toekomstige collega moet aan de variabel­naam kunnen aflezen, zonder de hex op te zoeken, uit welk register de kleur komt.

Waarom maar vijf. Hoe kleiner het palet, hoe harder de pagina werkt. Met zes kleuren kun je een lay-outprobleem oplossen door er nog één bij te doen. Met vijf niet. Elke visuele beslissing moet komen uit typografie, gewicht, fotografie of witruimte. Die beperking is in haar eentje het grootste ding dat de pagina van de AI-tredmolen weghoudt.

Waarom geen blauw, geen groen, geen koel grijs. Omdat geen van die kleuren op een echte brief voorkomt. Eén ervan toevoegen zou de illusie verzwakken. Koele grijzen horen bij enterprise-software. Niet bij een Rotterdamse stichting die brieven met de hand typt.

Het donkere thema

Het donkere thema is niet de inverse van het lichte. Een stichting die als een museum­catalogus leest, slaat ‘s nachts niet om in een neon-palet met hoog contrast. De briefing die ik mezelf voor dark mode gaf was: “hoe voelt het om deze brief te lezen bij lamplicht in een Rotterdams appartement, om tien uur ‘s avonds.” Het resultaat is een diepbruine achtergrond, crème tekst, en hetzelfde wax­zegelrood, ongewijzigd.

Waarom het stamp red beide modi overleeft. Was verandert ‘s nachts niet van kleur. Het accent vasthouden over thema’s heen geeft het merk ook één onverwrikbaar visueel anker, dat de bezoeker herkent of die nu om twaalf uur ‘s middags of om elf uur ‘s avonds leest. Een klein ding dat zich uitbetaalt zodra een opdrachtgever zijn site voor het eerst in de dark mode van een collega ziet.

Het volledige tokenblok, exact zoals het in productie staat:

.kalenda {
  --kal-paper: #f4efe6;
  --kal-paper-soft: #ece5d6;
  --kal-ink: #1a1714;
  --kal-stamp: #a2342a;
  --kal-folio: #7e7466;
  --kal-margin: #e6dfd2;

  --kal-serif: 'Source Serif 4', 'Georgia', serif;
  --kal-mono: 'JetBrains Mono', 'SFMono-Regular', monospace;

  --kal-col-narrow: 640px;
  --kal-col-mid: 880px;
  --kal-col-wide: 1180px;

  --kal-pad-section: clamp(40px, 5.5vw, 72px);
  --kal-pad-section-lg: clamp(56px, 7vw, 96px);
}

[data-kal-theme='dark'] .kalenda {
  --kal-paper: #1b1814;
  --kal-paper-soft: #221d18;
  --kal-ink: #e8e1d2;
  --kal-folio: #a09686;
  --kal-margin: #2e2823;
}

Wanneer u mij inhuurt krijgt u het volledige tokensysteem in een document als dit. Elke waarde heeft een reden. Niets is uit een starter-kit gehaald.

Typografie: twee letters, drie maten, één regel

Twee letterfamilies. Source Serif 4 voor alles wat leesbaar moet zijn. JetBrains Mono voor wat als getypt moet aanvoelen: poststempels, datums, foto­bijschriften, financiële regels, eyebrows, voetnoten.

Waarom Source Serif 4. Het is een hedendaagse schreef die door Frank Grießhammer bij Adobe is ontworpen, met editoriaal lopen tekst in gedachten. Het heeft een echte cursief (geen schuingedrukte rechtop), een breed gewichts­bereik als variable font, en een aanwezigheid die display-formaten draagt zonder kostbaar te worden. Het alternatief was Crimson Pro of een klassieker zoals Caslon. Source Serif won omdat zijn echte cursief in de koppen (“Geen maand zonder bericht.”) het editoriale register draagt zonder historisch te leunen.

Waarom JetBrains Mono en geen schrijfmachine­letter. Een echte schrijfmachine­letter zoals American Typewriter zou te letterlijk zijn geweest. De pagina verwijst naar getypte brieven, ze imiteert ze niet. JetBrains Mono in 11 pixels met 12% letter­spatiëring leest als rubber­stempel-inkt. Hij ziet er getypt uit zonder kitsch te worden.

De display-maten zijn responsief, maar de relatie tussen ze ligt vast:

.kalenda h1 { font-size: clamp(3rem, 8.5vw, 7rem); line-height: 0.96; }
.kalenda h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.05; }
.kalenda h3 { font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.2; }

Waarom de letter­spatiëring negatief is op de display-maten. Bij 7rem opent de standaard­tracking de schreven en leest de kop als een lijst woorden. Aanknijpen tot -0.015em trekt de woorden weer samen tot één hand­gezette kop. Dit is het soort micro-keuze dat ik op elk project maak.

Waarom de pagina nooit iets vet zet voor nadruk. Vet leest als software-UI. Cursief en de stamp-kleur doen dat werk. “We hebben geen één gemist” krijgt cursief plus stamp red. Het oog landt erop omdat het anders is, niet omdat het luider is.

De dropcap

De missie­alinea opent met een stamp-rode cursieve dropcap. Vier regels hoog.

.kal-dropcap::first-letter {
  font-size: 4.4em;
  line-height: 0.85;
  float: left;
  padding: 6px 14px 0 0;
  color: var(--kal-stamp);
  font-style: italic;
  font-weight: 500;
}

Waarom een dropcap. Het is het ene editoriale signaal dat zegt “een mens heeft dit gemaakt, en die mens leest editoriale ontwerpen.” Een SaaS-pagina zou nooit een dropcap gebruiken. Een stichtingssite is precies de juiste plek. Het hoofd van de bezoeker registreert de pagina als “dit is een tijdschrift, geen marketingsite” voordat de eerste alinea is gelezen.

Lay-out­grammatica: drie kolommen, twee paddings

Veel editoriale pagina’s op het web vallen uit elkaar omdat ze grijpen naar grids die voor SaaS-dashboards zijn gebouwd. Twaalf kolommen. Acht verschillende gutters. Lay-out­schuld bij sectie drie.

Kalenda gebruikt drie genoemde kolombreedtes, toegepast naar wat de sectie doet.

.kal-col-narrow { max-width: 640px; }   /* lopende tekst, FAQ, enkele kolom lezen */
.kal-col-mid    { max-width: 880px; }   /* impact-teller, missie, archief */
.kal-col-wide   { max-width: 1180px; }  /* hero, lezers­galerij, donatie­widget */

Waarom precies deze breedtes. 640px is de bovengrens van comfortabel lezen op de body-grootte (rond 65 tekens per regel). 880px is wat een eenpagina­spread leest zonder een muur tekst te worden. 1180px is de maximale wide-bleed voor de pagina als software-dashboard begint aan te voelen.

Sectie­padding heeft twee instellingen, groot en standaard, beide vloeiend:

--kal-pad-section: clamp(40px, 5.5vw, 72px);
--kal-pad-section-lg: clamp(56px, 7vw, 96px);

Waarom twee en niet zeven. Editoriale pagina’s hebben ritme nodig. Ritme is onmogelijk als elke sectie een eigen verticale ademhaling heeft. Twee instellingen, consequent toegepast, geven de pagina haar print-achtige cadans op elk schermformaat.

Wanneer ik met u werk, zo ziet uw design tokens-document eruit. Een korte lijst van benoemde keuzes, elk met onderbouwing. Geen Figma-bibliotheek met 200 tokens die niemand gebruikt.

Componenten, met de keuze die ik op elk maakte

Ik wil door vijf componenten heen lopen, één voor één. Elk vertegenwoordigt een specifieke beslissing tegen een meer voor de hand liggende keuze. Dit is het deel van het portfoliostuk dat u laat zien wat voor ontwerp­partner u inhuurt.

De poststempel-eyebrow (in plaats van een pill-tag)

De meeste marketingpagina’s zetten een kleine pill-tag boven hun sectie­kop. Gekleurde achtergrond, ronde hoeken, één of twee woorden binnenin. Het is in z’n eentje het meest versleten element van het SaaS-tijdperk. Elke sectie op Kalenda vervangt het door één van twee alternatieven.

Het eerste is een JetBrains Mono small-caps regel: STICHTING KALENDA · ROTTERDAM · SINDS 2014. Elf pixels. Twaalf procent letter­spatiëring. Folio-kleur.

Het tweede is een inline SVG poststempel­cirkel met een datum en drie stippen, gebruikt op de FAQ en de CTA-sectie.

<span class="postmark">
  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="currentColor">
    <circle cx="20" cy="20" r="18" stroke-width="0.7" />
    <text x="20" y="18" text-anchor="middle"
          font-family="JetBrains Mono" font-size="6"
          letter-spacing="0.18em">VRAGEN</text>
  </svg>
</span>

Waarom dit voor u uitmaakt. De poststempel-eyebrow kost meer ontwerptijd dan <span class="pill">tag</span>. Hij is ook in z’n eentje het meest identiteits­bepalende element op de pagina. Wanneer ik een opdrachtgever aanneem, zoek ik naar één element van dit kaliber. Iets dat het merk visueel bezit. Een handtekening die niemand anders’ website heeft. Dat is het verschil tussen een site die op een template lijkt en een site die op een merk lijkt.

De lezers­kaarten (echte mensen, geen testimonials)

Vier polaroid-gekantelde kaarten. Elke kaart heeft een portret, een “LEZER SINDS MAART 2017” geplakte­papierstempel, een geciteerde regel onder de foto, en metadata in JetBrains Mono. Bij een klik opent een full-bleed editoriale modal met de uitgebreide notitie van de lezer, hun favoriete maand en waarom, en een geciteerd fragment uit een brief aan hen.

De kantelingen zijn individueel en asymmetrisch (-1.4°, +1.2°, -0.8°, +1.6°) zodat de kaarten lezen als vier afdrukken op een prikbord, niet als vier cellen in een grid.

Waarom ik het testimonial-patroon heb vermeden. Een testimonial-kaart met een Hoofd, een Citaat en een Naam-Functie-Bedrijf is de standaard van de marketingwereld. Hij is helemaal versleten. Niemand leest ze. De Kalenda-lezers­kaart is gestructureerd als een documentaire­portret met metadata. De lezer wordt niet gevraagd om de stichting te vertrouwen omdat Henk zegt dat ze goed is. De lezer wordt gevraagd zich voor te stellen dat hij Henk is.

Waarom geen entree­animatie. Ik had er één in een eerdere bouw (kaarten faden in op scroll). Bij een statische review verscheen de lezers­sectie blanco in elke pre-scroll staat. Slecht. De kaarten zijn te belangrijk om afhankelijk te zijn van een JavaScript-onthulling. Ze worden zichtbaar uitgeleverd.

De impact-teller (met SSR’d waardes)

<p class="kal-impact__line">
  We hebben
  <span class="kal-impact__num kal-mono"
        data-kal-counter data-target="4318">4.318</span>
  brieven verstuurd over
  <span class="kal-impact__num kal-mono"
        data-kal-counter data-target="127">127</span>
  maanden, voor
  <span class="kal-impact__num kal-mono"
        data-kal-counter data-target="812">812</span>
  Vrienden van Kalenda <em>· met één opmerkelijke uitzondering.*</em>
</p>
<p class="kal-impact__foot kal-mono kal-folio">
  * één brief, met de hand geschreven, maart 2019
</p>

De getallen staan in de SSR-HTML op hun eindwaardes. Locale-aware: de NL-pagina leest “4.318”, de EN-pagina leest “4,318”. Wanneer de gebruiker erin scrollt, animeren de waardes vanaf 88% van het doel naar de eindwaarde, zodat de motion een echt bezoek nog beloont.

Waarom dit ertoe doet. Een teller die op nul begint en omhoog animeert ziet er prachtig uit op de demo. Hij is een ramp in drie productie­scenario’s: als JavaScript faalt, als prefers-reduced-motion: reduce is gezet, en wanneer een schermlezer de pagina raakt voor de animatie. In alle drie leest de pagina “We hebben 0 brieven verstuurd over 0 maanden, voor 0 Vrienden van Kalenda.” Op een stichtings­pagina ZIJN de impact­getallen de geloofwaardigheid. Ze kunnen niet aan een script worden uitbesteed.

Een klein ding, maar precies het soort detail dat een portfoliostuk scheidt van een werkende productiepagina. Echte sites moeten slechte JavaScript-dagen overleven.

De donatie­widget (tweetalig zonder stem te verliezen)

De donatie­widget moest tegelijk drie dingen doen. Aanvoelen als de kleinst mogelijke verbintenis (“een postzegel kost vijf euro”). De maandelijkse tier de evidente standaard maken. Navigeerbaar zijn in twee talen zonder het karakter van de stichting te verliezen.

De cadens­toggle leest “Eenmalig one-time / Maandelijks monthly” op de Nederlandse pagina, met het Engels als kleine mono-ondertitel. Omgekeerd op de Engelse pagina. De bezoeker leest beide woorden. Het Engels verdwijnt nooit; het zit er als smaak, nooit als drempel.

De drie tiers hebben elk een Nederlandse naam (Vriend, Vriend van de Maand, Beschermheer), een bedrag, en een body-regel. De middelste heeft een kleine ”★ MEEST GEKOZEN”-badge die boven de kaart­rand zit, als een geplakte sticker, niet als een glyph in de hoek die met de tier-naam zou botsen.

De microcopy onder de tiers verandert mee met de selectie. Het is het meest herschreven deel van de pagina:

• €5: “dekt een postzegel. Postzegels zijn duurder geworden.”
• €15: “dekt een vel papier, de envelop, het lakzegel, en een klein bedankje dat we u niet zullen vragen op te hangen.”
• €40: “dekt een middag aan de typemachine, een jaarboek aan het einde van het jaar, en onze dankbaarheid, die echt is.”

De toestemmings­regel leest “Ik ga ermee akkoord kort gecontacteerd te worden, met dank.” Aan deze zin heb ik langer gewerkt dan aan de rest van het formulier samen. Waarom. Omdat toestemmings­microcopy de plek is waar de meeste stichtingen klinken alsof er een jurist heeft meegeschreven. Een regel die kort, correct én warm is, is zeldzaam en onevenredig waardevol.

Het donatie­lint (CTA in de hoek die zich uit de weg zet)

Een persistent lint in de hoek. Schuift in na anderhalve viewport­hoogte. Mute’t zichzelf met pointer-events: none en glijdt van het scherm zodra het donatie­formulier of de parodie-disclosure-footer in beeld komt.

const io = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    overlapping += e.isIntersecting ? 1 : -1;
    overlapping = Math.max(0, overlapping);
  });
  ribbon.dataset.muted = overlapping > 0 ? 'true' : 'false';
}, { threshold: 0.01 });

document.querySelectorAll('.kal-footer, #vrienden').forEach((t) => io.observe(t));

Waarom. Twee redenen, beide belangrijk op een echte site. Eén: een persistente CTA die over hetzelfde formulier zweeft dat hij aanprijst, is erger dan geen persistente CTA. De gebruiker moet hem mentaal aftrekken van wat ze lezen. Twee: de parodie-disclosure (“Een fictieve stichting, geschreven en gebouwd door Parnav Studio”) is in z’n eentje de belangrijkste regel op de pagina, ethisch gezien. Hem visueel verbergen zou het hele project ondermijnen. De IntersectionObserver-fix is zes regels code en lost beide problemen op.

Dit is het soort detail dat geen review-tool oppakt en dat de meeste marketingpagina’s verkeerd doen.

Motion, met een budget

Drie dingen bewegen op Kalenda. Tellers animeren van 88% naar 100% van hun doel. Lezers­kaarten lichten vier pixels op bij hover. Lenis maakt het scrollen vloeiend. Dat is het hele motion-budget.

Waarom zo weinig. De pagina is papier. Papier doet geen parallax. De motion is gereserveerd voor momenten waarop ze daadwerkelijk nuttig is: bevestigen dat de impact­getallen leven wanneer u ze bereikt, vertellen dat de kaarten klikbaar zijn, een klikkend scrollwiel vervangen door iets dat aanvoelt als een vinger die langs een glanzend tijdschrift glijdt.

// het volledige productie-motion-budget
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
document.querySelectorAll<HTMLElement>('[data-kal-counter]').forEach((el) => {
  const target = Number(el.dataset.target ?? 0);
  if (reduceMotion) {
    el.textContent = target.toLocaleString(localeAttr);
    return;
  }
  const start = Math.max(0, target - Math.round(target * 0.12));
  const obj = { val: start };
  ScrollTrigger.create({ trigger: el, start: 'top 88%', once: true,
    onEnter: () => gsap.to(obj, { val: target, duration: 1.2, ease: 'power2.out',
      onUpdate: () => { el.textContent = Math.floor(obj.val).toLocaleString(localeAttr); }
    })
  });
});

Waarom prefers-reduced-motion ertoe doet. Een kleine groep gebruikers heeft vestibulaire stoornissen of motion-gevoeligheid. Ze hebben hun OS op reduce gezet. Een site die die voorkeur negeert, veroorzaakt fysiek ongemak. Deze drie­regelige short-circuit (if (reduceMotion) ...) is een toegankelijkheids­regel die u van elke ontwikkelaar die u inhuurt mag verwachten. Als een portfolio er niet over praat, vraag er dan naar.

Tweetalige houding: de moeilijkste keuze

Kalenda gaat live in het Nederlands en Engels. De studio-versie van “twee talen” zou een vlaggen­dropdown rechtsboven zijn geweest met parallelle vertalingen overal. Dat was vanaf dag één fout. Kalenda is een stichting die haar brieven schrijft in het Nederlands, in Rotterdam, met de hand. Engels is de spiegel voor de bezoeker, niet een parallelle taal.

Ik schreef één regel voor wat Nederlands blijft en wat vertaalt:

Alles wat een naam, een anker of een rituele zin is, blijft Nederlands. Alles wat een vraag beantwoordt of de bezoeker richting actie beweegt, wordt vertaald.

Wat op beide pagina’s Nederlands blijft:

• Het wordmark, de eyebrow, de tier-namen, de partner­band (“MET STEUN VAN.”), het persistente lint (“Word Vriend van Kalenda · vanaf €5 per maand”).
• De vijf sectie­ankers in de navigatie (Lezers, Werkwijze, Archief, Vrienden, Contact). Dat zijn ankers, geen labels. Ze vertalen zou de pagina hebben laten aanvoelen alsof hij voor de demo was gebouwd, niet voor de wereld.

Wat op de Engelse pagina volledig vertaalt:

• Hero-tagline, lede, body-alinea’s, missie, lezer­citaten en -fragmenten, “wat er met de post komt”-rijen, werkwijze­stappen.
• De FAQ. Dit was de grootste herziening in de bouw. Een Engelse bezoeker die wil vragen “Is this real?” kan dat niet in het Nederlands. De antwoorden achter de moedertaal van de stichting verbergen was poëtisch in de briefing en kapot in de praktijk.
• De donatie-cadens­toggle, met het Nederlands behouden als kleine mono-ondertitel.

Waarom dit voor uw project uitmaakt. Het meeste lokalisatie­werk is mechanisch. Strings door een service jagen, taal omwisselen, opleveren. Dat produceert een pagina die werkt in een tweede taal, maar alles verliest wat haar specifiek maakte in de eerste. De regel hierboven is wat u krijgt zodra een ontwerper bij lokalisatie betrokken is, niet wanneer het als leveranciers­taak wordt behandeld.

Fotografie­regie

Echte foto’s overal, behalve voor de lezers­portretten. Geen illustraties. Geen AI-gegenereerde stockfoto voor de hero, de envelop of de boeken. De foto’s doen het meeste vertel­werk.

De hero is een getypte brief op een keukentafel in Wassenaar met een lakzegel in de hoek. De “wat er met de post komt”-sectie is drie volledige foto’s (een envelop op donker hout, een typemachine in actie, een stapel jaarboeken in linnen, met touw vast). De werkwijze­sectie is drie kleine vierkante foto’s (een notitieboek-close-up, een hand op een typemachine­toets, een brievenbus). Elk beeld krijgt een bijschrift in JetBrains Mono met een datum of een plaats.

Waarom alle foto’s bijschriften in mono krijgen. Bijschriften vertellen de lezer dat de foto’s geen stock zijn. Ze plaatsen elk beeld in tijd en plek. Ze versterken het mono-als-archief­stempel-idee dat in de eyebrow is geïntroduceerd. En ze belonen de lezer die vertraagt. De toets op een pagina als deze is of de bezoeker de bijschriften leest. Doet ze dat, dan werkt de pagina.

Waarom de lezers­portretten AI-gegenereerd zijn en waarom ik dat openlijk zeg. Ik had vier portretten nodig met consistent documentair register: 35 mm-kadrering, beschikbaar licht, geen glimlachen tenzij de persoon natuurlijk zou glimlachen, geen studio-achtergrond. Vier echte mensen vinden die aan die criteria voldoen is werk voor een echt project. Voor een portfoliostuk heb ik ze met die briefing gegenereerd. Het resultaat is de enige plek op de pagina waar de fotografie niet letterlijk is, en ik benoem het hier voor de eerlijkheid.

De voetnoot die niet wil ophouden

Ik wil dit benoemen omdat het de ene zet is die de pagina aan elkaar bindt en zonder uitleg onzichtbaar zou blijven.

In maart 2019 raakte het lint van de typemachine op bij brief 127. De vrijwilliger die die middag aan het bureau zat, schreef de brief met de hand. De ontvanger heeft het niet opgemerkt. De stichting meldt het openlijk: in de impact-teller (“met één opmerkelijke uitzondering”), in de FAQ (“Het is één keer gebeurd, in maart 2019”) en op de ANBI-pagina onder het jaarverslag.

Hetzelfde zit op nog twee plekken. Het financiën­blok vermeldt “Uitgaven · onvoorzien (één paraplu) · €18” omdat iemand in oktober 2024 een paraplu heeft laten staan. De microcopy bij “Help ons door te schrijven” belooft “een klein bedankje dat we u niet zullen vragen op te hangen.” Zodra u deze drie ziet, leest de pagina anders.

Waarom dit telt in een echte briefing. Lange editoriale arbeid beloont de lezer die helemaal tot het einde komt. Die beloning moet er ook werkelijk zijn. De meeste stichtings­pagina’s zetten een algemene mission­statement onderaan en noemen het klaar. Een pagina die nauwkeurig lezen beloont met drie kleine details die rijmen, is het verschil tussen content die de lezer scant en content die de lezer twee keer leest.

De vaardigheden die ik op deze pagina laat zien, kort

Leest u dit portfoliostuk omdat u een project overweegt? Dan is dit wat Kalenda demonstreert dat u op uw project zou krijgen:

• Brand en visuele identiteit vanaf nul. Palet afgeleid van materialen, niet uit een Figma-swatch gepakt. Typografie gepaard naar register, niet naar trend. Tokens met namen en redenen.
• Component­ontwerp met editoriale discipline. Poststempels in plaats van pills. Lezers­kaarten in plaats van testimonials. Dropcaps in plaats van accent­vakken. De pagina lijkt niet op andere pagina’s omdat de componenten niet op andere componenten lijken.
• Lange-vorm informatie­ontwerp. Een pagina die op mobiel 6.400 pixels hoog is en leesbaar blijft van regel één tot de laatste voetnoot. Drie kolombreedtes, twee sectie­paddings, geen lay-out­schuld.
• Tweetalige UX. Een beslissingsregel voor wat vertaalt en wat niet, consequent toegepast op nav, microcopy, formulieren en rituele zinnen.
• Toegankelijkheid als standaard. SSR’d waardes, prefers-reduced-motion-uitsluitingen, schermlezer-vriendelijke markup, semantische ankers, geen content die afhankelijk is van opacity.
• Performance. Astro 6 SSR op Cloudflare Workers, woff2-fonts vooraf geladen, native lazy loading op alle beelden onder de fold, een motion-budget van drie dingen totaal.
• Editoriale tekst. Microcopy die leest alsof een mens hem heeft geschreven. Toestemmings­regels die niet als jurist klinken. FAQ-antwoorden die toegeven wat ze niet weten.
• Productie­discipline. Een pagina die haar eigen AI-slop-scan zonder bevindingen overleeft, een review op drie viewports doorstaat en in een feedback­ronde leverbare verbeteringen oplevert binnen één middag.

De stack

Astro 6 in SSR-mode op Cloudflare Workers met de @astrojs/cloudflare-adapter. Vanille TypeScript voor de donatie­widget, FAQ-accordeon, lezers­modal en lint­zichtbaarheid. GSAP met ScrollTrigger voor de impact-teller. Lenis voor smooth scrolling. Zelf-gehost Source Serif 4 (variabele woff2) en JetBrains Mono. Fotografie van /public/kalenda/ met native lazy loading op alles onder de hero.

Waarom deze stack. Astro laat me server-rendered HTML opleveren met zoveel of zo weinig client-side JavaScript als de pagina werkelijk nodig heeft. Cloudflare Workers geeft de pagina sub-100ms TTFB op elk continent. GSAP plus ScrollTrigger is de kleinste, betrouwbaarste scroll-driven animation toolkit die ik in productie vertrouw.

Wat ik wil dat u meeneemt

Kalenda is een parodie. De stichting bestaat niet. Maar de ontwerp­discipline erachter is geen parodie. Het is dezelfde discipline die ik op elk echt project meeneem. Bepaal het register voordat u de lay-out bepaalt. Bouw een palet uit materialen. Pair typografie naar editoriale behoefte. Ontwerp componenten tegen de evidente keuze. Lokaliseer als ontwerper, niet als vertaler. Begroot motion. Maak de pagina zo dat ze haar eigen slechte JavaScript-dagen overleeft.

Bent u een stichting, een museum, een uitgeverij, een platenlabel, een editoriaal merk of iemand wiens product iets anders is dan software? Dan is dit ongeveer het soort werk dat ik voor u zou maken. Vertel me waar u van bent, in de meest letterlijke zin. Papier. Veld­opnames. Beton. Wol. Lenzen. Het merk schrijft zich vanaf daar.

Het lakzegel zit, helaas, inbegrepen.