[{"data":1,"prerenderedAt":242},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-design-system-tooling-i18n-slugs":134,"language-blog-slug-en-design-system-tooling":138},{"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],{"locale":136,"value":137},"en","design-system-tooling",{"page":139},{"slug":137,"i18nSlugs":140,"social":142,"title":143,"subtitle":79,"isArchived":147,"headerIllustration":148,"date":152,"authors":153,"introTitle":169,"items":170,"pivots":205,"relatedBlogPosts":206,"tags":207,"onMountedScript":156,"onUnmountedScript":156},[141],{"locale":136,"value":137},{"title":143,"description":144,"image":145},"Design System Tooling","Watch the videos of our October 2022 Design System Tooling meetup",{"url":146},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1581071665-chatting-robot.png",false,{"url":146,"alt":149,"width":150,"height":151},null,989,438,"2021-11-15T01:00:00.000+01:00",[154,162],{"name":155,"lastName":156,"slug":157,"image":158},"Jasper","","jasper",{"url":159,"alt":149,"width":160,"height":161},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,{"name":163,"lastName":156,"slug":164,"image":165},"Karlijn","karlijn",{"url":166,"alt":149,"width":167,"height":168},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,"Videos of our October 2022 Design System Tooling meetup",[171,175,179,190,194,201],{"__typename":172,"id":173,"title":156,"body":174},"TextSectionRecord","69521712","\u003Cp>\u003Cspan>Everybody wants a \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fservices\u002Fdesign-system\u002F\" title=\"design system\">design system\u003C\u002Fa> these days. As soon as you have multiple digital products, it’s hard to have a consistent look & feel and keep it that way. Design systems promise to solve this with a bonus of efficiency through reusability. But a design system is a living product in itself. How do you keep design and development in sync once part of your design system is design files and part is code? \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan>For this meet-up, we joined forces with ViriCiti! Three speakers lined up to give an introduction on Design Systems and tools that can be used when working with a Design System. Here are their talks:\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":172,"id":176,"title":177,"body":178},"69521713","The anatomy of a component, by Jasper Moelker ","\u003Cp>\u003Cspan>Components in a design system are much more than pixels in a design file. So as a developer I can't simply look at the design of a component and turn it into code. During his presentation, Jasper will share how he breaks components down to their essence, which techniques he uses and yes, which problems he always runs into.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":180,"id":181,"mute":147,"loop":147,"autoplay":147,"caption":156,"video":182,"gif":149},"ResponsiveVideoRecord","69573967",{"url":183,"title":184,"height":185,"width":186,"provider":187,"providerUid":188,"thumbnailUrl":189},"https:\u002F\u002Fyoutu.be\u002FS7X8qCkV9DA","Front-end Forward: The anatomy of a component by Jasper Moelker",113,200,"youtube","S7X8qCkV9DA","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FS7X8qCkV9DA\u002Fhqdefault.jpg",{"__typename":172,"id":191,"title":192,"body":193},"69573968","Atomic Design System with Abstract & Storybook, by Enrique Tamames & Tereza Loucova, ViriCiti","\u003Cp>\u003Cspan>Design & Frontend integration is not always easy. We need to align these two disciplines as much as we can. Abstract allows us to have a properly versioned design system as a reference for Frontend. Storybook allows us to have a single source of truth for component discovery. How do we integrate these components? How do we deploy them? Are there any standards to follow? Tereza (design) & Enrique (frontend) show how to make the aesthetics and wireframes for the product but also turn them into reality via code.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":180,"id":195,"mute":147,"loop":147,"autoplay":147,"caption":156,"video":196,"gif":149},"69573969",{"url":197,"title":198,"height":185,"width":186,"provider":187,"providerUid":199,"thumbnailUrl":200},"https:\u002F\u002Fyoutu.be\u002FG0aA9is9af4","Front-end Forward: Atomic Design System, Abstract & Storybook by Enrique Tamames & Tereza Loucova","G0aA9is9af4","https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FG0aA9is9af4\u002Fhqdefault.jpg",{"__typename":172,"id":202,"title":203,"body":204},"69573970","Next meetup","\u003Cp>\u003Cspan>Want to attend our next meetup in person? Keep an eye on our \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.meetup.com\u002FFront-end-Forward\u002F\">Front-end Forward meetup group\u003C\u002Fa>\u003Cspan> and check out our own \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fevents\u002F\">event page\u003C\u002Fa>\u003Cspan>!\u003C\u002Fspan>\u003C\u002Fp>",[],[],[208],{"id":209,"title":210,"slug":211,"blogPosts":212},"JBiZUe8mQVujxlNVR5gx8Q","Design Systems","design-systems",[213,224,231],{"slug":214,"title":215,"date":216,"authors":217},"accessibility-in-design-systems","Accessibility in Design Systems","2025-06-17T14:15:56.000+02:00",[218],{"name":219,"image":220},"Sjoerd",{"url":221,"alt":149,"width":222,"height":223},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534892-sjoerd.jpg",1637,2182,{"slug":225,"title":226,"date":227,"authors":228},"design-system-from-scratch-from-the-shelf","Design System: from scratch or from the shelf?","2024-11-19T13:16:02.759+01:00",[229],{"name":155,"image":230},{"url":159,"alt":149,"width":160,"height":161},{"slug":232,"title":233,"date":234,"authors":235},"write-components-once-run-everywhere-with-mitosis-a-beautiful-dream-or-reality","“Write components once, run everywhere” with Mitosis; a beautiful dream or reality?","2024-09-16T13:04:31.307+02:00",[236],{"name":237,"image":238},"Wessel",{"url":239,"alt":237,"width":240,"height":241},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1721035942-wessel.jpg",2135,2868,1776256143953]