> Markdown version of [/videos/819-db-ux-design-system-how-we-ve-open-sourced-our-largest-inner-source-project](https://www.wearedevelopers.com/videos/819-db-ux-design-system-how-we-ve-open-sourced-our-largest-inner-source-project). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# DB UX Design System – How we’ve open sourced our largest inner source project

Open-sourcing your internal design system is the ultimate quality gate. Learn how Deutsche Bahn leverages Mitosis to generate framework-agnostic components for over 1,000 developers.

- **Speakers:** Anna Schoderer, Maximilian Franzke
- **Event:** World Congress 2023
- **Published:** November 10, 2023
- **Duration:** 13:57
- **URL:** https://www.wearedevelopers.com/videos/819-db-ux-design-system-how-we-ve-open-sourced-our-largest-inner-source-project

## Summary

**Context & Solution:** Deutsche Bahn transitioned their massive UX Design System from an internal inner-source model to full open-source on GitHub to solve a core enterprise challenge: fragmentation. With a vast ecosystem of B2C and B2B applications, the company needed to support multiple JavaScript frameworks, strict accessibility standards, and seamless collaboration with external agencies. By opening the project, they eliminated the friction of partners having to rebuild components from scratch and fostered a stronger culture of reusability and public learning. **Architecture & Tooling:** To build a truly framework-agnostic system, the team leverages a modern design token pipeline using Sketch, Zeplin, and Amazon Style Dictionary, ensuring visual consistency across web, iOS, and Android. They transitioned from Stencil.js and web components—due to current React compatibility issues—to the Mitosis component generator. This allows them to write UI components once and compile them into native HTML, Vue, Angular, React, and even Microsoft PowerApps components. Quality is enforced through GitHub Actions pipelines, NPM pre-releases, and visual regression testing with Playwright. **Outcomes & Insights:** This initiative highlights how corporate open-source strategies act as a powerful quality gate. Open-sourcing forces rigorous documentation, simplifies cross-team code guidelines, and actively engages a community of over 1,000 internal developers alongside external contributors. The leadership actively supports this by allocating up to 20% of developer time to open-source contributions, proving that enterprise design systems thrive when treated as collaborative, transparent, and cross-functional products rather than isolated internal repositories.

**Keywords:** enterprise ux design system, inner source migration, multi-framework component library, design tokens architecture, amazon style dictionary, zeplin api integration, mitosis component generator, javascript framework compatibility, playwright visual regression, github actions pipeline, cross-functional ui development, enterprise open-source culture, web accessibility standards, microsoft powerapps integration

## Chapters

1. **Managing enterprise frontend complexity across diverse web applications** (00:04) — Managing diverse enterprise web applications introduces framework fragmentation and steep non-functional requirements.
1. **Decreasing technical complexity through open source collaboration models** (01:56) — Addressing software complexity by collaborating with external partners enables component reuse and enforces consistent quality gates.
1. **Fostering an internal open source culture for enterprise developers** (03:27) — Overcoming documentation gaps by granting developers dedicated time for open source contributions drives cross-team collaboration.
1. **Organizing leadership and community support for open source** (05:56) — Structuring architecture guilds and special interest groups reduces organizational silos by unifying enterprise-wide open source initiatives.
1. **Transitioning an enterprise design system to open source** (06:44) — Resolving external partner exclusion by moving an inner source design system to public repositories ensures efficient component reuse.
1. **Selecting a technical stack for cross-platform UI components** (08:15) — Using design tokens and UI generators solves framework incompatibility by providing unified components across diverse frontend stacks.
1. **Agile team processes and progressive component quality gates** (09:55) — Preventing component degradation requires interdisciplinary teams to implement automated pipelines and visual regression testing.
1. **Managing community contributions and technical frontend tooling transitions** (11:19) — Triaging internal community feedback into public issues helps teams successfully navigate major technical migrations away from restrictive tooling.

## Related Moments

- [Expanding open source contributions from the creative design community](https://www.wearedevelopers.com/videos/1345-building-collaborative-open-source-tools-for-developers-and-designers-pablo-ruiz-muzquiz-from-penpot) (from "Building Collaborative Open Source tools for Developers and Designers - Pablo Ruiz-Muzquiz from Penpot")
- [Transitioning a platform framework from inner-source to open-source](https://www.wearedevelopers.com/videos/1919-one-platform-could-not-fit-them-all) (from "One Platform Could Not Fit Them All")
- [Applying open source practices to internal company development](https://www.wearedevelopers.com/videos/1556-what-you-can-learn-from-an-open-source-project-with-500-million-downloads) (from "What you can learn from an open-source project with 500 million downloads")
- [Fueling major tech companies and the open source ecosystem](https://www.wearedevelopers.com/videos/875-coffee-with-developers-david-heinemeier-hansson) (from "Coffee with Developers: David Heinemeier Hansson")
- [Real-world web components in the Carbon design system](https://www.wearedevelopers.com/videos/1679-building-a-framework-independent-component-library) (from "Building a framework-independent component library")
- [Abstracting internal engineering solutions into generic open source projects](https://www.wearedevelopers.com/videos/270-devops-at-netflix) (from "DevOps at Netflix")

## Related Articles

- [The Future of Open Source: A Deep Dive - Scott Chacon at WeAreDevelopers World Congress 2024](https://www.wearedevelopers.com/magazine/471-the-future-of-open-source-a-deep-dive-scott-chacon-at-wearedevelopers-world-congress-2024)
- [Dev Digest 131 - AI'm not sure about OSS](https://www.wearedevelopers.com/magazine/472-dev-digest-131-ai-m-not-sure-about-oss)
- [Dev Digest 120 - Apple and peers](https://www.wearedevelopers.com/magazine/455-dev-digest-120-apple-and-peers)
- [WeAreDevelopers Dev Digest Issue 116 - The new search wars…](https://www.wearedevelopers.com/magazine/445-wearedevelopers-dev-digest-issue-116-the-new-search-wars)

## Related Jobs

- [Senior Design Engineer](https://www.wearedevelopers.com/jobs/ext/2644934-senior-design-engineer) at **GitHub**
- [Sr Product Experience Designer](https://www.wearedevelopers.com/jobs/48426-sr-product-experience-designer) at **Dynatrace**
- [Senior AI Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/2552851-senior-ai-frontend-engineer) at **TeamViewer Germany GmbH,**
- [Senior Open Source Advisor](https://www.wearedevelopers.com/jobs/ext/1278113-senior-open-source-advisor) at **ZEISS Group**
- [Staff Systems Engineer](https://www.wearedevelopers.com/jobs/48371-staff-systems-engineer) at **Bitdrift**
- [Manager, Engineering, Secure Build and SCS Services](https://www.wearedevelopers.com/jobs/48447-manager-engineering-secure-build-and-scs-services) at **Docker, Inc.**