Stichting Kalenda

What this case study is

Kalenda is a parody. The foundation does not exist. There is no board, no donations, no postbox, no eighth of the month. I invented a small Dutch non-profit that ships a deliberately useless product (a typed letter to anyone who asks, recapping the month that just ended) and built its website the way a real cultural foundation in Rotterdam would commission it.

I did this for a specific reason. Most studio sites prove range with the same proof: SaaS dashboard, fintech onboarding, B2B pricing page. The work I most wanted to be hired for, the work I would put on a wall, lives outside that lane. So I built a piece that is not a landing page in the SaaS register at all. Long form editorial. Photography led. Two languages. A donate widget that reads like a museum membership form. A drop cap. Postmark stamps. A footnote that runs through the page.

The rest of this write up is for a potential client. It walks through the calls I made on Kalenda and why, so you can see what your project would get if you hired me. Read it as a conversation: this is how I think when a brief lands on the desk.

What you can see I do: brand and visual identity from first principles, design tokens, typography systems, component design, motion direction, photography direction, multilingual UX, accessibility, performance budgets, full stack Astro / Cloudflare implementation, and the editorial discipline to keep it all on one note.

The brief I set myself, and how I’d run yours

I treated this like a real engagement. I wrote the brief, named the constraints, picked a reference register, and made design calls from there. Every project I take on starts the same way. If the brief is fuzzy, the design will be fuzzy. So the first session with a client is always: who is this for, what do they read, what do they expect, and what would they trust.

The Kalenda brief, in three lines:

1. Who is this for. A Dutch reader who already supports cultural non-profits. Old enough to remember typed letters. Young enough to find the foundation through a friend on Instagram.
2. What do they expect. The visual register of Volkskrant Magazine, a Stedelijk catalogue, a Bezige Bij book jacket. Not a startup landing page.
3. What would they trust. Real photographs. Named recipients. A published ANBI block with line items. A footer that openly says who built it.

When I work with a real foundation, museum, label, or editorial brand, I run the exact same process. The references shift. The discipline does not.

The first call: register

The most expensive mistake on a project like this is the wrong register. I see it constantly. A non-profit hires a studio that builds in the SaaS register because it is the studio’s default, and the result is a website with bento grids, gradient hero metrics, glassmorphic cards, and a CTA that says “Get started for free.” That site looks like every other site. The donor reads it once and never returns.

For Kalenda I made the call early to refuse the SaaS default outright:

• No bento grid. Editorial pages flow as columns and full bleed photographs, not as 12 column dashboards.
• No glassmorphism, no dark glow, no gradient text. These are the visual fingerprints of AI generated marketing pages. A foundation page that uses them reads as fake immediately.
• No hero metric layout. “10,000+ users” in a four column row is for software companies, not for foundations.
• No icon library. Where another site would reach for a Lucide icon, I tried a postmark first.

These are not stylistic preferences. They are decisions made in service of one question: would the audience trust this. The answer drove everything below.

The visual identity, decision by decision

I start every identity by working out what the brand is of, in the most literal sense. Kalenda is a foundation that produces typed letters. So the brand is of paper. Once you have that anchor, the system writes itself.

The palette

Five tokens. Three are paper variants. The accent is the wax seal red. Folio is the colour of ink on old paper margins. Margin is the printed margin line.

I picked these colours not from a Figma swatch panel but by looking at actual letters. The cream is what unbleached A5 paper looks like in winter daylight. Paper soft is the same cream half a stop darker, used for the inside of envelopes and the back of cards. Ink is not black. Ink is a brown black, the colour of typewriter ink that has soaked one millimetre into the paper. Stamp red is wax red, specifically: the cooled, slightly-matte red of a sealing wax stick, which is darker than fire-engine red and warmer than maroon. Folio is the desaturated tan that ink turns into when it has been sitting on a yellowing margin for thirty years.

Every name in the system carries this reasoning. --kal-paper. --kal-ink. --kal-stamp. --kal-folio. The names are deliberate. A future collaborator should be able to read the variable name and know, without looking at the hex, what register the colour is from.

Why only five. The smaller the palette, the harder the page works. With six colours you can solve a layout problem by adding another colour. With five, you cannot. Every visual decision has to come from typography, weight, photography, or whitespace. That constraint is the single biggest thing keeping the page off the AI design treadmill.

Why no blue, no green, no neutral grey. Because none of those colours appear on a real letter. Adding any of them would have weakened the conceit. Cool greys belong to enterprise software. They do not belong to a Rotterdam foundation that writes letters by hand.

The dark theme

The dark theme is not the inverse of the light theme. A foundation reading like a museum catalogue does not flip to a high-contrast neon palette at night. The brief I gave myself for dark mode was: “what does it feel like to read this letter by lamplight in a Rotterdam apartment at ten in the evening.” The result is a deep brown background, cream text, and the same wax seal red, untouched.

Why the stamp red survives both modes. Wax does not change colour at night. Holding the accent across themes also gives the brand one immovable visual anchor that the visitor recognises whether they are reading at noon or eleven in the evening. This is a small thing that pays off whenever a client sees their site rendered in their colleague’s dark mode for the first time.

The full token block, exactly as it ships:

.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;
}

When you hire me, you get the full token system in a doc like this. Every value has a reason. None of them are lifted from a starter kit.

Typography: two faces, three sizes, one rule

Two typefaces. Source Serif 4 for everything readable. JetBrains Mono for what should feel typed: postmarks, dates, photo captions, financial line items, eyebrows, footnotes.

Why Source Serif 4. It is a contemporary serif designed by Frank Grießhammer at Adobe with editorial body in mind. It has a real italic (not a slanted roman), a wide weight range as a variable font, and a presence that carries display sizes without going precious. The alternative was Crimson Pro or a classic like Caslon. Source Serif won because its true italic in the headlines (No month *without* word.) carries the editorial register without leaning historical.

Why JetBrains Mono and not a typewriter face. A real typewriter face like American Typewriter would have been too literal. The page is referencing typed letters, not impersonating them. JetBrains Mono in 11 pixels with 12% letter spacing reads as foundation rubber-stamp ink. It looks typed without being kitsch.

The display sizes are responsive but the relationship between them is fixed:

.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; }

Why letter-spacing is negative on the display sizes. At 7rem the default tracking opens up the serifs, and the headline reads as a list of words. Tightening to -0.015em pulls the words back into a single hand-set headline. This is the kind of micro-decision I make on every project.

Why the page never bolds anything for emphasis. Bold reads as software UI. Italic and the stamp colour do that work instead. “We have not missed one” gets the italic plus stamp red treatment. The eye lands on it because it is different, not because it is louder.

The drop cap

The mission paragraph opens with a stamp-red italic drop cap. Four lines tall.

.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;
}

Why a drop cap. It is the single editorial signal that announces “a person made this, and they read editorial design.” A SaaS page would never use a drop cap. A foundation site is the exact place for one. The visitor’s brain registers the page as “this is a magazine, not a marketing site” before the first paragraph is read.

Layout grammar: three columns, two paddings

A lot of editorial pages on the web fall apart because they reach for grid systems built for SaaS dashboards. Twelve columns. Eight different gutters. Layout debt by section three.

Kalenda uses three named column widths, applied according to what the section is doing.

.kal-col-narrow { max-width: 640px; }   /* body copy, FAQ, single column reading */
.kal-col-mid    { max-width: 880px; }   /* impact counter, mission, archive */
.kal-col-wide   { max-width: 1180px; }  /* hero, recipients gallery, donate widget */

Why these specific widths. 640px is the upper bound of comfortable reading at the body type size (around 65 characters per line). 880px is what a single page magazine spread reads at without becoming a wall of text. 1180px is the maximum wide bleed before the page starts feeling like a software dashboard.

Section padding has two settings, large and regular, both fluid:

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

Why two and not seven. Editorial pages need rhythm. Rhythm is impossible if every section has a unique vertical breathing pattern. Two settings, applied consistently, gives the page its print-like cadence at every screen size.

When I work with you, this is what your design tokens doc looks like. A short list of named decisions, each with reasoning. Not a 200 token Figma library that nobody uses.

Components, with the call I made on each

I want to walk through five components individually. Each one represents a specific decision against a more obvious choice. This is the part of the case study that shows you what kind of design partner you’d be hiring.

The postmark eyebrow (instead of a pill tag)

Most marketing pages use a small pill tag above a section heading. Coloured background, rounded corners, one or two words inside. It is the single most overused element of the SaaS era. Every section on Kalenda replaces it with one of two alternatives.

The first is a JetBrains Mono small caps line: STICHTING KALENDA · ROTTERDAM · SINDS 2014. Eleven pixels. Twelve percent letter spacing. Folio colour.

The second is an inline SVG postmark circle with a date and three dots, used on the FAQ and the CTA section.

<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>

Why this matters for you. The postmark eyebrow costs more time to design than <span class="pill">tag</span>. It is also the single most identity-defining element on the page. When I take on a client, I look for one element like this. Something the brand owns visually. A signature mark that nobody else’s website uses. That is the difference between a site that looks like a template and a site that looks like a brand.

The recipient cards (real people, not testimonials)

Four polaroid-tilted cards. Each one has a portrait, a “READER SINCE MARCH 2017” pasted-paper stamp, a quoted line below the photo, and metadata in JetBrains Mono. On click, a full bleed editorial modal opens with the recipient’s long note, their favourite month and why, and a quoted excerpt from a letter addressed to them.

The tilts are individual and asymmetric (-1.4deg, +1.2deg, -0.8deg, +1.6deg) so the cards read as four prints pinned to a board, not as four cells in a grid.

Why I avoided the testimonial card pattern. A testimonial card with a Headshot, a Quote, and a Name-Title-Company is the marketing world’s default. It has been worn out completely. Nobody reads them. The Kalenda recipient card is structured as a documentary portrait with metadata. The reader is not asked to trust the foundation because Henk says it is good. The reader is asked to imagine being Henk.

Why no entrance animation. I had one in an earlier build (cards faded in on scroll). On a static review the recipients section appeared blank in any pre-scroll state. Bad. The cards are too important to depend on a JavaScript reveal. They ship visible.

The impact counter (with SSR’d values)

<p class="kal-impact__line">
  We have written
  <span class="kal-impact__num kal-mono"
        data-kal-counter data-target="4318">4,318</span>
  letters across
  <span class="kal-impact__num kal-mono"
        data-kal-counter data-target="127">127</span>
  months for
  <span class="kal-impact__num kal-mono"
        data-kal-counter data-target="812">812</span>
  Vrienden van Kalenda <em>· with one notable exception.*</em>
</p>
<p class="kal-impact__foot kal-mono kal-folio">
  * one letter, hand-written, March 2019
</p>

The numbers are in the SSR HTML at their final values. Locale-aware: the EN page reads “4,318”, the NL page reads “4.318”. When the user scrolls into view, the values animate from 88% of target up to the final value, so the motion still rewards a real visit.

Why this matters. A counter that starts at zero and animates up looks great on the demo. It is a disaster in three production scenarios: when JavaScript fails, when prefers-reduced-motion: reduce is set, and when a screen reader hits the page pre-animation. In all three the page reads “We have written 0 letters across 0 months for 0 Vrienden van Kalenda.” On a non-profit page, the impact numbers ARE the credibility. They cannot be deferred to a script.

A small thing, but it is the kind of thing that separates a portfolio piece from a working production page. Real sites have to survive bad JavaScript days.

The donate widget (bilingual without losing voice)

The donate widget had to do three things at once. Feel like the smallest possible commitment (“a stamp costs five euros”). Make the recurring tier the obvious default. Be navigable in two languages without losing the foundation’s character.

The cadence toggle reads “One-time eenmalig / Monthly maandelijks” on the English page, with the Dutch as a small mono subtitle. Reversed on the Dutch page. The visitor reads either word. The Dutch never disappears; it sits there as flavour, never as gatekeeping.

The three tiers each have a Dutch name (Vriend, Vriend van de Maand, Beschermheer), an amount, and a body line. The middle tier has a small ”★ MOST CHOSEN” badge that sits above the card edge as a printed sticker, not as an overlay glyph that would crowd the tier name.

The microcopy line below the tiers updates with selection. It is the most-rewritten part of the page:

• €5: “covers a stamp. Stamps have gotten more expensive.”
• €15: “covers a sheet of paper, the envelope, the wax seal, and a small thank-you we will not pressure you to display.”
• €40: “covers an afternoon at the typewriter, an annual book at year’s end, and our gratitude, which is real.”

The consent line reads “I agree to be contacted, briefly, with thanks.” This sentence took longer than the rest of the form combined. Why. Because consent microcopy is where most non-profits sound like they were written by a lawyer. A line that is correct, short, and warm is rare and disproportionately valuable.

The donate ribbon (corner CTA that gets out of the way)

A persistent corner ribbon. Animates in after one and a half viewport heights. Mutes itself with pointer-events: none and slides off screen whenever the donate form or the parody disclosure footer enters view.

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));

Why. Two reasons, both important on a real site. First, a persistent CTA that floats over the same form it is advertising is worse than no persistent CTA. The user has to mentally subtract it from their reading. Second, the parody disclosure (“A fictional non-profit, written and built by Parnav Studio”) is the single most important line on the page from an ethics standpoint. Visually obscuring it would have undermined the whole project. The IntersectionObserver fix is six lines of code and saves both problems.

This is the kind of detail no critique tool catches and most marketing pages get wrong.

Motion, with a budget

Three things move on Kalenda. Counters animate from 88% to 100% of target. Recipient cards lift four pixels on hover. Lenis smooths the wheel. That is the entire motion budget.

Why so little. The page is paper. Paper does not parallax. The motion is reserved for moments where it is genuinely useful: confirming the impact numbers are alive when you reach them, telling you the cards are clickable, replacing a clicky scroll wheel with something that feels like a finger sliding a glossy magazine page.

// the entire production 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); }
    })
  });
});

Why prefers-reduced-motion matters. A small percentage of users have vestibular disorders or motion sensitivity. They have set their OS to reduce motion. A site that ignores that setting causes them physical discomfort. This three-line short-circuit (if (reduceMotion) ...) is an accessibility line item you should expect from any developer you hire. If a portfolio does not mention it, ask about it.

Bilingual posture: the hardest call

Kalenda ships in Dutch and English. The studio version of “two languages” would have been a flag dropdown in the top right and parallel translations everywhere. That was wrong on day one. Kalenda is a foundation that writes letters in Dutch, in Rotterdam, by hand. English is the visitor’s mirror, not a parallel language.

I wrote a one-line rule for what stays Dutch and what translates:

Anything that is a name, an anchor, or a ritual phrase stays Dutch. Anything that answers a question or moves the visitor toward action gets translated.

What stays Dutch on both pages:

• The wordmark, the eyebrow, the tier names, the partner band (“MET STEUN VAN.”), the persistent ribbon (“Word Vriend van Kalenda · vanaf €5 per maand”).
• The five section anchors in the navigation (Lezers, Werkwijze, Archief, Vrienden, Contact). These are anchors, not labels. Translating them would have made the page feel built for the demo, not for the world.

What translates fully on the English page:

• Hero tagline, lede, body paragraphs, mission, recipient quotes and excerpts, what-arrives-in-the-post rows, method steps.
• The FAQ. This was the single biggest revision in the build. An English visitor who needs to ask “Is this real?” cannot ask it in Dutch. Hiding the answers behind the foundation’s native language was poetic in the brief and broken in practice.
• The donate cadence toggle, with Dutch retained as a small mono subtitle.

Why this matters for your project. Most localisation work is mechanical. Run the strings through a service, swap the language, ship. That produces a page that works in a second language but loses everything that made it specific to its first. The decision rule above is the kind of thing you get when a designer is involved in localisation, not when it is treated as a vendor task.

Photography direction

Real photographs everywhere except the recipient portraits. No illustration. No AI generated stock for the hero, the envelope, or the books. The photographs do most of the storytelling.

The hero is a typed letter on a kitchen table in Wassenaar with a wax seal in the corner. The “what arrives in the post” section is three full-size photographs (an envelope on dark wood, a typewriter mid-page, a stack of linen-bound annual books tied with twine). The method section is three small square photographs (a notebook close-up, a hand on a typewriter key, a postbox). Every image is captioned in JetBrains Mono with the date or the place.

Why captions in mono on every photograph. Captions tell the reader the photographs are not stock. They locate each image in time and place. They reinforce the mono-as-archival-stamp idea introduced in the eyebrow. And they reward the reader who slows down. The case study test on a page like this is whether the visitor reads the captions. If they do, the page is working.

Why the recipient portraits are AI generated and why I am saying so openly. I needed four portraits with consistent documentary register: 35mm framing, available light, no smiles unless the subject would smile naturally, no studio backdrop. Sourcing four real people who match those criteria is a real project’s job. For a portfolio piece I generated them with that brief. The result is the only place on the page where the photography is not literal, and it is called out here for honesty.

The footnote that won’t quit

I want to call this out because it is the single device that ties the page together and it would be invisible without saying so.

In March 2019, the typewriter ribbon ran out at letter 127. The volunteer at the desk that afternoon wrote the letter by hand. The recipient never noticed. The foundation reports it openly: in the impact counter (“with one notable exception”), in the FAQ (“It happened once, in March 2019”), and on the ANBI page jaarverslag.

The same device shows up in two more places. The financials block lists “Uitgaven · onvoorzien (één paraplu) · €18” because someone left an umbrella behind in October 2024. The “Help us keep writing” microcopy promises “a small thank-you we will not pressure you to display.” Once you notice these, the entire page reads slightly differently.

Why this matters in a real brief. Long-form work rewards the reader who gets all the way through it. The reward has to actually be there. Most non-profit pages put a generic value statement at the bottom and call it done. A page that rewards close reading with three small details that all rhyme is the difference between content the reader scans and content the reader reads twice.

The skills demonstrated, plainly

If you are reading this case study because you are considering a project, here is what Kalenda demonstrates that you would get on yours:

• Brand and visual identity from first principles. Palette derived from materials, not picked from a Figma swatch panel. Typography paired by register, not by trend. Tokens with names and reasoning.
• Component design with editorial discipline. Postmarks instead of pills. Recipient cards instead of testimonials. Drop caps instead of accent boxes. The page does not look like other pages because the components do not.
• Long-form information design. A page that is 6,400 pixels tall on mobile and stays readable from the first line to the last footnote. Three column widths, two section paddings, no layout debt.
• Bilingual UX. A decision rule for what translates and what does not, applied consistently across nav, microcopy, forms, and ritual phrases.
• Accessibility as a default. SSR’d values, prefers-reduced-motion short-circuits, screen-reader-friendly markup, semantic anchors, no opacity-dependent content.
• Performance. Astro 6 SSR on Cloudflare Workers, fonts preloaded as woff2, native lazy loading on all below-the-fold images, motion budget of three things total.
• Editorial copy. Microcopy that reads like a person wrote it. Consent lines that do not sound like a lawyer. FAQ answers that admit when they do not know.
• Production discipline. A page that survives an AI slop scan with zero findings, a critique pass at three viewports, and a feedback loop that produces shippable revisions in an afternoon.

The stack

Astro 6 in SSR mode on Cloudflare Workers with the @astrojs/cloudflare adapter. Vanilla TypeScript for the donation widget, FAQ accordion, recipient modal, and ribbon visibility. GSAP with ScrollTrigger for the impact counter. Lenis for smooth scrolling. Self-hosted Source Serif 4 (variable woff2) and JetBrains Mono. Photography served from /public/kalenda/ with native lazy loading on everything below the hero.

Why this stack. Astro lets me ship server-rendered HTML with as much or as little client-side JavaScript as the page actually needs. Cloudflare Workers gives the page sub-100ms TTFB anywhere on earth. GSAP plus ScrollTrigger is the smallest, most reliable scroll-driven animation toolkit I trust in production.

What I want you to take away

Kalenda is a parody. The foundation does not exist. But the design discipline behind it is not a parody. It is the same discipline I bring to every real project. Decide the register before you decide the layout. Build a palette from materials. Pair typography by editorial need. Design components against the obvious choice. Localise like a designer, not a translator. Budget motion. Make the page survive its own bad JavaScript days.

If you are a foundation, a museum, a publisher, a label, an editorial brand, or anyone whose product is something other than software, this is roughly the kind of thing I would build for you. Tell me what you are of, in the most literal sense. Paper. Field recordings. Concrete. Wool. Lenses. The brand writes itself from there.

The wax seal, regrettably, is included.