[{"data":1,"prerenderedAt":349},["ShallowReactive",2],{"DefaultLayouten":3,"language-cases-slug-stamp-postnl-design-system-i18n-slugs":134,"language-cases-slug-en-stamp-postnl-design-system":140},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135,138],{"locale":136,"value":137},"en","stamp-postnl-design-system",{"locale":139,"value":137},"nl",{"page":141,"cases":269},{"title":142,"slug":137,"i18nSlugs":143,"social":146,"heroIllustration":151,"caseTeaser":155,"content":159,"metaData":227,"quote":163,"author":163,"pivots":249},"PostNL",[144,145],{"locale":136,"value":137},{"locale":139,"value":137},{"title":147,"description":148,"image":149},"Stamp PostNL Design system created by De Voorhoede","Discover Stamp, the design system we created for PostNL to enhance consistency and efficiency within all teams. Learn more about the strategy and tools we used.",{"url":150},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1722604132-stamp-postnl.png",{"url":150,"alt":152,"width":153,"height":154},"Stamp postnl design system",3840,2160,{"title":156,"image":157},"A design system to improve consistency and efficiency within all PostNL teams",{"url":150,"alt":158,"width":153,"height":154},null,[160,165,169,179,183,197,201,205,212,216,220],{"__typename":161,"id":162,"title":163,"body":164},"TextSectionRecord","HOo-T8dcTUyU5BgR8kBMiw","","\u003Cp>\u003Cspan style=\"font-weight: 400;\">PostNL has rapidly digitized in recent years. Various suppliers gained full control over individual products. While the organization has made significant progress, its digital landscape has also become fragmented. This has compromised the consistency of the user interface. As a user, you notice that the various products function and look slightly different. Profitability is also under pressure. Therefore, there is a need for greater efficiency within the digital department. PostNL's development teams, in particular, were performing a great deal of duplicate work. It was time for a consistent and efficient solution: \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fnl\u002Fservices\u002Fdesign-system\u002F\">a design system\u003C\u002Fa> for all PostNL teams.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":161,"id":166,"title":167,"body":168},"DSX3Hl1GQgiIzFVNmeFyaQ","One Design System for React, Angular, Salesforce and other teams","\u003Cp>\u003Cspan style=\"font-weight: 400;\">PostNL uses React as its primary framework. Therefore, it was crucial that components were built within it. Because various PostNL products are built using different frameworks, we also developed web components as a unified solution. This way, every team can use the design system.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":170,"id":171,"image":172,"caption":177,"captionPosition":178},"ImageRecord","BTwkFrwDSBu53-3IO6yX1A",{"url":173,"alt":174,"width":175,"height":176},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1719836066-componenten-postnl-design-system.png","componenten design system postNL",1344,1001,"Design system components of PostNL","bottom",{"__typename":161,"id":180,"title":181,"body":182},"Sbtvh39XTwmHVIBh5pMLMw","New branding rolled out at lightning speed","\u003Cp>\u003Cspan style=\"font-weight: 400;\">The \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fstudiodumbar.com\u002Fwork\u002Fpostnl\" title=\"PostNL case van studio Dumbar over de nieuwe huisstijl\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">new PostNL corporate identity\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> is a key driver for the design system. Implementing the new branding requires additional work for all teams. Thanks to the design system, this process is very quick and easy. The design system is not only incredibly efficient for current applications, but also a valuable asset for the organization in developing and validating prototypes. Within a day, developers can create a new prototype, which previously took two weeks.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ch4>Design tokens\u003C\u002Fh4>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">PostNL's updated corporate identity and component design are incorporated into Figma. It is therefore crucial to integrate with this design tool. We developed design tokens, which allow us to extract key information from Figma for building the components. Design tokens are values ​​needed to translate the design into data, such as typography, color, shadows, or movement. These pieces of code ensure that the visual appearance and user experience are consistent across every product. As soon as the design is updated in Figma, it is immediately pushed to the components in the Design System. The design and code are automatically synchronized.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":184,"id":185,"mute":186,"loop":186,"autoplay":187,"caption":188,"gif":158,"video":189},"ResponsiveVideoRecord","MV6Jc_T_TSOjaXJi4HhxVQ",false,true,"PostNL Stamp Playground - During a hackathon, we developed a prototype for a Playground where anyone, including a PO for example, can click together an initial user interface.",{"url":190,"title":191,"height":192,"width":193,"provider":194,"providerUid":195,"thumbnailUrl":196},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=1ltp6ZYjbKs","Stamp Playground van PostNL",113,200,"youtube","1ltp6ZYjbKs","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002F1ltp6ZYjbKs\u002Fhqdefault.jpg",{"__typename":161,"id":198,"title":199,"body":200},"QaPCNsp0Q_W8cmGFcwvwbg","Digital accessibility as key focus","\u003Cp>\u003Cspan style=\"font-weight: 400;\">As the market leader in postal delivery, PostNL considers it crucial that everyone in the Netherlands can use its digital products. One of its design principles is \"We are here for everyone.\" Accessibility, or digital accessibility, has therefore been a key focus of this Design System. Designs are only finished when they are accessible. PostNL's apps already scored well on accessibility, but the web products required more work. With the design system, we improved multiple products simultaneously. This not only allows PostNL to serve more people, but also prepared them for the European Accessibility Act, which came into effect on June 28, 2025.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":161,"id":202,"title":203,"body":204},"XIQ_lSSXQZOAM3l6b2kezA","A central portal for all disciplines: from designers to copywriters","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Good documentation is essential for a successful design system. A single source containing all guidelines ensures that current and new colleagues - from designers to developers and from marketers to copywriters - work in the same way. We use Zeroheight for Stamp's documentation. All design guidelines and principles, accessibility checklists, components, and flows are described there. This ensures the design system is used as intended.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":170,"id":206,"image":207,"caption":163,"captionPosition":178},"HknqGvDCQMar_kJcNcAA2g",{"url":208,"alt":209,"width":210,"height":211},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1722606005-homepage-postnl.png","Homepagina van postnl.nl met de nieuwe branding",3416,1800,{"__typename":161,"id":213,"title":214,"body":215},"ac9XkPgpTsS2d-3qO4aooQ","Adoption strategy of the design system","\u003Cp>\u003Cspan style=\"font-weight: 400;\">The main drivers for incorporating the design system within PostNL's teams were digital accessibility and the new branding. To introduce the design system across the entire organization, we first mapped all digital products and teams. We organized these based on business value, backlog, budget, and compatibility with the design tokens and components.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">The design system was first introduced to the PostNL.nl team. After the launch of the redesigned website, the use of the design system immediately became widespread throughout the organization. Other teams became enthusiastic about using the system. For one product, we developed a separate implementation for a specific framework (Angular). This led to increased use of the design system and increased employee satisfaction within these teams.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":161,"id":217,"title":218,"body":219},"Yebxjc9URouig68GCdnaHQ","Design system governance","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Governance encompasses all processes surrounding the design system. This is crucial, as a design system is most valuable when it is embedded within the organization. At PostNL, we've managed this in various ways. The Stamp documentation tracks which functionalities are being worked on and which bugs have been fixed for each technology. For maintenance and support, the feedback loop has been expanded with a Slack channel. Users can quickly and easily ask questions and get answers about the design system's operation. This also leads to new improvements for the design system.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":221,"id":222,"title":223,"body":224,"linkLabel":225,"linkUrl":226},"CallToActionRecord","QH02GtjYQ9asnP8tf1THGw","Want a design system like PostNL's? We're happy to help!","\u003Cp>We're happy to help!\u003C\u002Fp>","Neem contact op","\u002Fen\u002Fcontact\u002F",{"expertisesTitle":228,"expertises":229,"deliverableTitle":234,"deliverables":235,"technologiesTitle":237,"technologies":238,"interestedTitle":247,"interestedLinkUrl":248,"interestedLinkLabel":142},"Expertises",[230,232],{"title":231},"Accessibility",{"title":233},"Design System","Product",[236],{"title":233},"Technologies",[239,241,243,245],{"title":240},"React",{"title":242},"AngularJS",{"title":244},"Figma",{"title":246},"Web Components","See result","https:\u002F\u002Fwww.postnl.nl\u002F",[250],{"title":251,"body":252,"links":253,"mailchimpValue":163,"mailchimpName":163,"mailchimpId":163,"formType":261,"contactPerson":262},"Need help with your design system?","\u003Cp>See what we can do for your digital product.\u003C\u002Fp>\n",[254],{"__typename":255,"id":256,"title":257,"link":258},"InternalLinkRecord","135155038","Read about our service",{"__typename":259,"slug":260},"ServiceRecord","design-system","none",{"name":263,"lastName":163,"jobTitle":264,"image":265},"Jasper","CTO, Co-founder",{"url":266,"alt":158,"width":267,"height":268},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,[270,273,276,279,282,285,288,291,294,297,300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,343,346],{"slug":271,"title":272},"quantum-inspire","Quantum Inspire",{"slug":274,"title":275},"life-terra","Life Terra",{"slug":277,"title":278},"geldmaat","Geldmaat",{"slug":280,"title":281},"pathe-thuis","Pathé Thuis",{"slug":283,"title":284},"viriciti","ViriCiti",{"slug":286,"title":287},"drop-and-fly","Drop & Fly",{"slug":289,"title":290},"15-apps-for-water-research-at-deltares","15 Apps for water research at Deltares",{"slug":292,"title":293},"a-brand-new-funda","A brand new Funda",{"slug":295,"title":296},"bouwen-is-macht","Bouwen is Macht",{"slug":298,"title":299},"world-water-atlas","World Water Atlas",{"slug":301,"title":302},"pick-up-10","Pick Up 10",{"slug":304,"title":305},"hike-one","Hike One",{"slug":307,"title":308},"dlr-inspection-app","DLR Inspection app",{"slug":310,"title":311},"tradus","Tradus",{"slug":313,"title":314},"trouw","Trouw, Volkskrant and Parool",{"slug":316,"title":317},"abn-amro-loan-wizard","ABN-AMRO loan wizard",{"slug":319,"title":320},"npo-dashboard","NPO Dashboard",{"slug":322,"title":323},"hotel-and-bungalowspecials","Hotel- and BungalowSpecials",{"slug":325,"title":326},"rtl-weekend-magazine","RTL Weekend Magazine",{"slug":328,"title":329},"2dehands-be","2dehands.be",{"slug":331,"title":332},"swipe-and-shop","Swipe & Shop",{"slug":334,"title":335},"ziggo-interactive-television","Ziggo Interactive Television",{"slug":337,"title":338},"giftforyou","GiftForYou",{"slug":340,"title":341},"commtrac","Commtrac",{"slug":137,"title":142},{"slug":344,"title":345},"tu-delft-spacefinder","TU Delft Spacefinder",{"slug":347,"title":348},"privacy-by-design-in-je-bol","In je bol",1776256134319]