[{"data":1,"prerenderedAt":296},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-affordance-design-system-components-i18n-slugs":134,"language-blog-slug-en-affordance-design-system-components":141},{"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","affordance-design-system-components",{"locale":139,"value":140},"nl","affordance-design-system-componenten",{"page":142},{"slug":137,"i18nSlugs":143,"social":146,"title":151,"subtitle":79,"isArchived":152,"headerIllustration":153,"date":158,"authors":159,"introTitle":168,"items":169,"pivots":221,"relatedBlogPosts":241,"tags":265,"onMountedScript":173,"onUnmountedScript":173},[144,145],{"locale":136,"value":137},{"locale":139,"value":140},{"title":147,"description":148,"image":149},"Affordance in Design System Components | De Voorhoede","By using affordance principles, design systems become easier to use and more flexible, making it simpler for developers to build web applications. Discover how.",{"url":150},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1716534481-linkedin-blog-6.jpg","Affordance in Design System Components",false,{"url":154,"alt":155,"width":156,"height":157},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1716533178-2024-voorhoede-blog-affordance-table-1.svg",null,581,594,"2024-05-27T09:00:00.000+02:00",[160],{"name":161,"lastName":162,"slug":163,"image":164},"Sjoerd","Beentjes","sjoerd",{"url":165,"alt":155,"width":166,"height":167},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534892-sjoerd.jpg",1637,2182,"Let's consider a table and a chair as examples. The primary affordance of a table is its ability to support items, facilitated by its flat, horizontal surface. Similarly, the main affordance of a chair is to provide a place to sit, suggested by its features like a flat seat supported by legs and, often, a backrest to support the user's back. However, while it's not the primary affordance, a table can also be used as a seating surface. Likewise, a chair can be used to stand on when replacing a light bulb. This concept is known as \"perceived affordance\".",[170,175,179,183,187,191,196,199,202,205,208,211,214,217],{"__typename":171,"id":172,"title":173,"body":174},"TextSectionRecord","fae4AGbcTK-9qAq_Poz6cA","","\u003Cp>These principles are widely applied in user interface and user experience (UI\u002FUX) design, but they can also be used to enhance the developer experience (DX). In this article, we'll describe how these concepts are crucial when developing components for \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fservices\u002Fdesign-system\u002F\" title=\"service page about design systems\">design systems\u003C\u002Fa>.\u003C\u002Fp>",{"__typename":171,"id":176,"title":177,"body":178},"UmDGpfTVQcSX1O4hOwu0wQ","Affordance in UI\u002FUX Design","\u003Cp>The concept of \"affordance\", introduced by James J. Gibson and later adapted for UI\u002FUX design by Don Norman, refers to the qualities or properties of an object that define its possible uses or make it clear how it can or should be used. While Gibson focused on the inherent properties of an object, Norman emphasissed the importance of \"perceived affordances\" in design, which are the qualities that suggest how an object might be used based on a user's interpretation and previous experiences. It reflects what users believe they can do with the object, which may not always align with its intended use.\u003C\u002Fp>",{"__typename":171,"id":180,"title":181,"body":182},"AcUqr0-ZSiWT60LA8C7kVg","Applying Affordance to Front-End Components","\u003Cp>A challenge with design system components is the uncertainty around their implementation and developer expectations. Understanding what developers expect can lead to better adoption and satisfaction.\u003C\u002Fp>\n\u003Ch4>Defining Boundaries\u003C\u002Fh4>\n\u003Cp>When designing components, it's crucial to set clear boundaries around their intended uses:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>Identify primary use cases and interactions.\u003C\u002Fli>\n  \u003Cli>Specify constraints and limitations.\u003C\u002Fli>\n  \u003Cli>Document these affordances and constraints clearly.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Developers may see additional affordances beyond the primary ones. Instead of ignoring these, consider:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>Does this align with the design system's goals and principles?\u003C\u002Fli>\n  \u003Cli>Is this an edge case or a common use case?\u003C\u002Fli>\n  \u003Cli>Will this affect the component's integrity or usability?\u003C\u002Fli>\n  \u003Cli>Can this be supported without complicating the primary use case?\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Answering these questions will help keep your components robust and versatile.\u003C\u002Fp>\n\u003Ch3>Implementing Boundaries\u003C\u002Fh3>\n\u003Cp>After defining boundaries, implement them in the code:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>Offer configuration options for primary and common affordances.\u003C\u002Fli>\n  \u003Cli>Use clear, intuitive naming for props, methods, and events.\u003C\u002Fli>\n  \u003Cli>Provide validation warnings for improper usage.\u003C\u002Fli>\n  \u003Cli>Document proper usage with code examples and highlight anti-patterns.\u003C\u002Fli>\n  \u003Cli>Engage with developers to address unintended usage.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Adapt these strategies to your front-end stack to guide developers toward the best practices while allowing necessary flexibility.\u003C\u002Fp>",{"__typename":171,"id":184,"title":185,"body":186},"Xi17APIqRqK3k08f6r5AiQ","Best Practices for Implementing Affordances","\u003Ch3>Keep it simple: use HTML as your example\u003C\u002Fh3>\n\u003Cp>When implementing components from a design system, consider developers' familiarity with plain HTML. By adhering to the \u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FPrinciple_of_least_astonishment\" target=\"_blank\" title=\"Wikipedia page of principle of least astonishment\" rel=\"noopener\">\u003Ci>principle of least astonishment\u003C\u002Fi>\u003C\u002Fa>, ensure components behave like native HTML elements, making them intuitive and easy to use.\u003C\u002Fp>\n\u003Cp>Allow your components to accept standard HTML attributes as props. For instance, a custom button should support the attributes and events a native button should handle, utilising developers' existing HTML knowledge. A great example of this is how web components can \u003Ca href=\"https:\u002F\u002Fweb.dev\u002Farticles\u002Fcustom-elements-v1#extending_elements\" title=\"Article on web.dev about custom elements\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">extend existing native elements\u003C\u002Fspan>\u003C\u002Fa> for customisation.\u003C\u002Fp>\n\u003Cp>It's also a good practice to design components to accept children as nested elements. For example, a list component should handle child elements, like how an HTML \u003Ccode><ul>\u003C\u002Fcode> contains \u003Ccode><li>\u003C\u002Fcode> elements. Similarly, when building a combobox, it should accept child components like an HTML \u003Ccode><select>\u003C\u002Fcode> contains \u003Ccode><option>\u003C\u002Fcode> elements. This approach reflects the natural composition of HTML.\u003C\u002Fp>\n\u003Cp>These are just some examples of how to design components. Following practices like these reduces the learning curve, making components more developer-friendly and easier to adopt.\u003C\u002Fp>\n\u003Ch3>Test with implementation early\u003C\u002Fh3>\n\u003Cp>Test your components in real-world implementations early on. This provides valuable feedback, helps validate affordances, catches edge cases, refines the API, and identifies accessibility issues.\u003C\u002Fp>\n\u003Cp>Collaborate with a pilot team of developers, provide beta releases, set up isolated testing environments, and establish clear feedback channels. Iterating based on real-world feedback ensures components are robust, flexible, and developer-friendly.\u003C\u002Fp>",{"__typename":171,"id":188,"title":189,"body":190},"b49X6gp7QSqXL9q47tPjcQ","Examples of Affordance in Front-End Components","\u003Cp>The following examples are some use cases that we encountered during the development of component libraries for clients. These examples are built using React, but could just as well be applied in Web Components or other frameworks, like Vue or Angular.\u003C\u002Fp>\n\u003Ch3>Extending HTML elements\u003C\u002Fh3>\n\u003Cp>Let’s say we have a “Button” component. This component has three variants and can have two sizes. The code for this component now looks like this:\u003C\u002Fp>",{"__typename":192,"id":193,"language":194,"body":195},"CodeBlockRecord","Z0l4OF6nQcmkNeS6hDZuDg","javascript","import { type PropsWithChildren } from 'react';\n\ninterface ButtonProps {\n  variant?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'default' | 'large';\n}\n\nexport const Button = ({\n  variant = 'primary',\n  size = 'default',\n  children,\n}: PropsWithChildren\u003CButtonProps>) => {\n  return (\n    \u003Cbutton className={`button--variant-${variant} button--size-${size}`}>\n      {children}\n    \u003C\u002Fbutton>\n  );\n};\n\n\u002F\u002F Implementation\nexport const Page = () => (\n  \u003CButton\n    \u002F\u002F this will not work\n    aria-controls=\"[id]\"\n  >\n    Click me!\n  \u003C\u002FButton>\n);\n",{"__typename":171,"id":197,"title":173,"body":198},"aldSG-XaSvWDvvATACEUPQ","\u003Cp>Looks good right? Now a developer who’s implementing this component asks you how to add an \u003Ccode>aria-controls\u003C\u002Fcode> attribute to it for an accessibility issue that he has. We could just add that specific attribute to the list of allowed props, but since he could come back the next day with a new attribute that we’re missing, we should probably give him some more flexibility:\u003C\u002Fp>",{"__typename":192,"id":200,"language":194,"body":201},"YQD8lk30RZS3nmvNZMvHoA","import { ComponentProps, forwardRef } from 'react';\n\ninterface ButtonProps extends ComponentProps\u003C'button'> {\n  variant?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'default' | 'large';\n}\n\nexport const Button = forwardRef\u003CHTMLButtonElement, ButtonProps>(\n  ({ variant = 'primary', size = 'default', children, ...rest }, ref) => {\n    return (\n      \u003Cbutton\n        ref={ref}\n        className={`button--variant-${variant} button--size-${size}`}\n        {...rest}\n      >\n        {children}\n      \u003C\u002Fbutton>\n    );\n  }\n);\n\n\u002F\u002F Implementation\nexport const Page = () => (\n  \u003CButton\n    \u002F\u002F this will work!\n    aria-controls=\"[id]\"\n  >\n    Click me!\n  \u003C\u002FButton>\n);\n",{"__typename":171,"id":203,"title":173,"body":204},"K9-yV-5wRtSD8nYcDSY8Fw","\u003Cp>Two things are added here:\u003C\u002Fp>\n\u003Col>\n  \u003Cli>The component now accepts all attributes a button element can receive, due to \u003Cspan style=\"font-weight: 400;\">\u003Ccode>extends ComponentProps<'button'>\u003C\u002Fcode>\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>Using \u003Ccode>forwardRef\u003C\u002Fcode>, the implementor can access the underlying rendered button DOM node\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch3>Some key benefits of this approach:\u003C\u002Fh3>\n\u003Cul>\n  \u003Cli>\u003Cstrong>Accessibility\u003C\u002Fstrong>: Easily add aria attributes and other accessibility properties.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>Familiarity\u003C\u002Fstrong>: Mirrors the standard button API, leveraging existing HTML knowledge and enhancing component affordances.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>Flexibility\u003C\u002Fstrong>: Avoids anticipating every use case in the component's props.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>Simplicity\u003C\u002Fstrong>: Keeps the component's prop interface focused on core concerns like variant and size, while still providing extensive functionality through standard HTML attributes.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Using \u003Ccode>forwardRef\u003C\u002Fcode> allows access to the underlying button DOM node, useful for third-party integrations, programmatic focus, or measuring dimensions.\u003C\u002Fp>\n\u003Cp>By using this pattern consistently throughout the component library, we provide a predictable development experience. This approach enhances component usability, encourages adherence to best practices, and reduces the learning curve of using the library.\u003C\u002Fp>\n\u003Ch3>Allow for experimentation\u003C\u002Fh3>\n\u003Cp>Card components are frequently found in component libraries. Here's a possible implementation:\u003C\u002Fp>",{"__typename":192,"id":206,"language":194,"body":207},"YoNR58N1QWyKkm95RdAccQ","import type { MouseEventHandler, PropsWithChildren } from 'react';\n\ninterface CardProps {\n  title: string;\n  body: string;\n  actionTitle: string;\n  onActionClick: MouseEventHandler\u003CHTMLButtonElement>;\n}\n\nexport const Card = ({\n  title,\n  body,\n  actionTitle,\n  onActionClick,\n}: PropsWithChildren\u003CCardProps>) => {\n  return (\n    \u003Carticle className=\"card\">\n      \u003Cheader className=\"card__header\">\n        \u003Ch2>{title}\u003C\u002Fh2>\n      \u003C\u002Fheader>\n      \u003Cdiv className=\"card__body\">\n        \u003Cp>{body}\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cfooter className=\"card__footer\">\n        \u003Cbutton onClick={onActionClick}>{actionTitle}\u003C\u002Fbutton>\n      \u003C\u002Ffooter>\n    \u003C\u002Farticle>\n  );\n};\n\n\u002F\u002F Implementation\nexport const Page = () => (\n  \u003CCard\n    title=\"Axolotl\"\n    body=\"The axolotl is a paedomorphic salamander closely related to the tiger salamander.\"\n    actionTitle=\"Learn more\"\n    onActionClick={() =>\n      (window.location.href = 'https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FAxolotl')\n    }\n  \u002F>\n);\n",{"__typename":171,"id":209,"title":173,"body":210},"egRj7MBmRhSnb2MV1MQ61A","\u003Cp>While this implementation is solid and functional for many cases, it can present some limitations:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\u003Cstrong>Rigid Structure:\u003C\u002Fstrong> The component strictly defines the title as an h2 and the body as a p element.\u003C\u002Fli>\n  \u003Cli>\u003Cstrong>Limited Interactivity\u003C\u002Fstrong>: The footer is limited to a single button with a predefined action.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>We can refactor the Card component to accept more flexible props:\u003C\u002Fp>",{"__typename":192,"id":212,"language":194,"body":213},"Tpb18jylRrCeJyaQDs_tww","import type { PropsWithChildren, ReactNode } from 'react';\n\ninterface CardProps {\n  header: ReactNode;\n  body: ReactNode;\n  footer: ReactNode;\n}\n\nexport const Card = ({\n  header,\n  body,\n  footer,\n}: PropsWithChildren\u003CCardProps>) => {\n  return (\n    \u003Carticle className=\"card\">\n      \u003Cheader className=\"card__header\">{header}\u003C\u002Fheader>\n      \u003Cdiv className=\"card__body\">{body}\u003C\u002Fdiv>\n      \u003Cfooter className=\"card__footer\">{footer}\u003C\u002Ffooter>\n    \u003C\u002Farticle>\n  );\n};\n\n\u002F\u002F Implementation\nexport const Page = () => (\n  \u003CCard\n    header={\u003Ch2>Axolotl\u003C\u002Fh2>}\n    body={\n      \u003Cp>\n        The axolotl is a paedomorphic salamander closely related to the{' '}\n        \u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FTiger_salamander\">\n          tiger salamander\n        \u003C\u002Fa>\n        .\n      \u003C\u002Fp>\n    }\n    footer={\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FAxolotl\">Learn more\u003C\u002Fa>}\n  \u002F>\n);\n",{"__typename":171,"id":215,"title":173,"body":216},"GJ2eZMsaQD2sKw0wrHB_Sg","\u003Cp>The flexible approach offers several benefits:\u003C\u002Fp>\n\u003Col>\n  \u003Cli>The customisable header allows the use of any heading level (h1, h2, etc.) or custom components, and the inclusion of links or other interactive elements.\u003C\u002Fli>\n  \u003Cli>The body content can be rich and varied, as it accepts any JSX, enabling the addition of rich text, images, and other HTML elements. This setup also makes it possible to easily integrate with a CMS for dynamic content.\u003C\u002Fli>\n  \u003Cli>The footer supports multiple actions by allowing buttons, links, or interactive elements, and the ability to add any event listener to them.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Using these more flexible patterns across components give developers more freedom, resulting in less friction and better adoption.\u003C\u002Fp>",{"__typename":171,"id":218,"title":219,"body":220},"QA4aWuwZQem21zhUVzVB-Q","Conclusion","\u003Cp>Implementing affordance principles in design system components is crucial for creating intuitive and flexible user interfaces. Clear boundaries, thoughtful component design, and real-world testing ensure components are versatile and maintain their primary functionality.\u003C\u002Fp>\n\u003Cp>Encouraging experimentation and getting regular feedback helps create a better development environment and more maintainable code. By using affordance principles, design systems become easier to use and more flexible, making it simpler for developers to build web applications.\u003C\u002Fp>",[222],{"title":223,"body":224,"links":225,"mailchimpValue":173,"mailchimpName":173,"mailchimpId":173,"formType":233,"contactPerson":234},"Need help with your design system?","\u003Cp>See what we can do for your digital product.\u003C\u002Fp>\n",[226],{"__typename":227,"id":228,"title":229,"link":230},"InternalLinkRecord","135155038","Read about our service",{"__typename":231,"slug":232},"ServiceRecord","design-system","none",{"name":235,"lastName":173,"jobTitle":236,"image":237},"Jasper","CTO, Co-founder",{"url":238,"alt":155,"width":239,"height":240},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,[242,251,258],{"slug":243,"title":244,"date":245,"authors":246},"building-design-system-react-web-components","Building a Design System with React Web Components","2023-06-19T02:00:00.000+02:00",[247,249],{"name":235,"image":248},{"url":238,"alt":155,"width":239,"height":240},{"name":161,"image":250},{"url":165,"alt":155,"width":166,"height":167},{"slug":252,"title":253,"date":254,"authors":255},"how-to-select-framework-design-system-components","How to select a framework for design system components","2022-12-12T01:00:00.000+01:00",[256],{"name":235,"image":257},{"url":238,"alt":155,"width":239,"height":240},{"slug":259,"title":260,"date":261,"authors":262},"kick-start-your-design-system-with-a-design-inventory-workshop","Kick-start your Design System with a Design Inventory Workshop","2021-09-16T02:00:00.000+02:00",[263],{"name":235,"image":264},{"url":238,"alt":155,"width":239,"height":240},[266],{"id":267,"title":268,"slug":269,"blogPosts":270},"JBiZUe8mQVujxlNVR5gx8Q","Design Systems","design-systems",[271,278,285],{"slug":272,"title":273,"date":274,"authors":275},"accessibility-in-design-systems","Accessibility in Design Systems","2025-06-17T14:15:56.000+02:00",[276],{"name":161,"image":277},{"url":165,"alt":155,"width":166,"height":167},{"slug":279,"title":280,"date":281,"authors":282},"design-system-from-scratch-from-the-shelf","Design System: from scratch or from the shelf?","2024-11-19T13:16:02.759+01:00",[283],{"name":235,"image":284},{"url":238,"alt":155,"width":239,"height":240},{"slug":286,"title":287,"date":288,"authors":289},"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",[290],{"name":291,"image":292},"Wessel",{"url":293,"alt":291,"width":294,"height":295},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1721035942-wessel.jpg",2135,2868,1776256139082]