A design system is meant to be a source of truth that is shared throughout an organization's digital presence. But in reality it often becomes fragmented as it is shared between design tools, documentation, and front-end frameworks.

This project is an exploration of how web components can be leveraged to share components and design patterns across systems.

By using native web components as a base for components we hope to use long-lasting, native web technologies to bridge the divides between these different environments. We wrote and compiled these components using StencilJS, and used its built-in output targets to generate component wrappers for a number of popular frameworks.

In addition we documented these components in Storybook, designed with them in visual design tools like Framer and UXPin Merge, and integrated them into a block-based CMS editing experience with Storyblok.

By bridging the gap between code, design tools, documentation, and content editing tools, we were able to write component code once, and share it across an entire organization, empowering diverse teams to create and contribute to the design system.

Below you can view a few examples of how these components were leveraged in different environments.