januari 2025 – maart 2026

Stamp Design System

Bouwen aan Stamp, PostNL’s nieuwe design system dat stijl, toegankelijkheid en techniek over teams heen samenbrengt.

Angular, React, Web Components, TypeScript

Stamp is het design system dat we voor PostNL bouwen om stijl, toegankelijkheid en techniek samen te brengen over al hun digitale producten. Eraan werken is waar ik mijn opvattingen over toegankelijkheid, standaarden en heldere component-API's dagelijks in de praktijk breng.

Mijn rol

Ik werkte ruim een jaar aan Stamp samen met mijn tech lead, wij tweeën als de developers van De Voorhoede. Het bredere kernteam bestaat uit een product owner, designer en toegankelijkheidsexpert van PostNL.

In zo'n klein team gaat mijn werk verder dan componenten schrijven. Ik vorm component-API's, stel toegankelijkheidspatronen voor en implementeer ze, onderhoud de CI-pipeline en documenteer het systeem. Ik leg ook de basis voor nieuwe systeemonderdelen en tooling, begeleid developers die op het project komen, en werk nauw samen met de designer om ontwerpkeuzes te testen en sterkere UX-uitkomsten na te streven.

Drie packages, één systeem

Stamp wordt geleverd als drie aparte packages: Angular, React en native Web Components. PostNL draait een breed scala aan projecten en platforms, en de drie packages bestaan zodat elk team, ongeacht hun stack, het systeem kan adopteren.

Die beslissing ligt onder vrijwel al het andere op het project. Ze bepaalt hoe we componenten ontwerpen, hoe we ze documenteren en hoe nieuwe bijdragers op gang komen.

Ontwerpen voor drie tegelijk

Web Components accepteren attributen en slots, geen complexe objecten, terwijl Angular en React prima rijke props aannemen. De vorm van een API moet in drie idiomen tegelijk werken, dus leunen we naar compositie boven configuratie: kleine, gerichte componenten die samen componeren, in plaats van grotere componenten die via rijke props worden geconfigureerd. Het is een beperking die meestal alles weglaat wat slim is maar enkel in één framework werkt, en wat overblijft is doorgaans toch het betere ontwerp.

Toegankelijkheid op Stamp is geen checklist die je aan het eind toepast, het is een eigenschap van hoe het systeem is gebouwd.

Toegankelijkheid als discipline van het systeem

Dit komt duidelijk naar voren in hoe we toegankelijkheid benaderen. Het meeste werk gebeurt in HTML en CSS: semantische elementen als standaard, logische properties zodat layouts werken over schrijfrichtingen heen, lang-bewuste patronen zodat gelokaliseerde tekst de documenttaal volgt. ARIA komt alleen in beeld waar het platform echt geen antwoord heeft.

Wat deze aanpak mogelijk maakte is het team. Sparren met onze toegankelijkheidsexpert gedurende het hele project is het verschil tussen code die audits doorstaat en een systeem dat echt toegankelijk is.

De basis leggen voor AI

Ik legde de basis zodat Stamp door AI-tools gebruikt kan worden. Twee stukken werk passen samen om dat mogelijk te maken.

Het eerste is het publiceren van onze packages naar Figma Make, zodat designers die daar prototypen altijd de nieuwste componenten bij de hand hebben. Ik werkte de publicatie-flow uit en schreef een aparte npm-configuratie zodat het netjes aan CI toegevoegd kon worden als onderdeel van ons reguliere release-proces.

Het tweede is een GUIDELINES.md voor elk component, in begrijpelijke taal geschreven en beschrijvend hoe elk component wel en niet gebruikt moet worden. AI-tools hebben deze context nodig om correcte code tegen het systeem te genereren in plaats van te gokken, en dezelfde bestanden dienen tegelijk als documentatie voor developers.

Wat ik eruit meeneem

Stamp heeft me veel geleerd. Werken in een klein team met brede verantwoordelijkheid duwde me voorbij het schrijven van componenten, naar API-ontwerp, documentatie, communicatie met de teams die ons werk gebruiken, en het soort langetermijnblik dat software bouwen voor andere developers vraagt. Drie packages verdiepten mijn voorkeur voor op standaarden gebaseerde, framework-onafhankelijke fundamenten. En werken naast een tech lead, een designer en een toegankelijkheidsexpert met wie ik gedurende het project kon sparren maakte de leercurve steil en welkom.

Het team maakte het af. Scherp, betrokken, gul met hun expertise, bereid om tegengas te geven wanneer het ertoe deed. Het soort collega's dat je je herinnert.