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

How can one design system serve React, Angular, and Vue? See how Deutsche Bahn open-sourced its largest internal project to solve cross-framework compatibility.

#1about 1 minute

Unifying Deutsche Bahn's digital landscape with a design system

Deutsche Bahn faces complexity from diverse applications, multiple frameworks, and non-functional requirements like accessibility across internal and external teams.

#2about 2 minutes

Why open source is the solution for collaboration and quality

Open source principles enable collaboration with external partners, improve component reusability, and serve as a quality gate for the entire system.

#3about 2 minutes

Fostering a supportive open source culture at Deutsche Bahn

The company supports open source through leadership backing, dedicated time for contributions, architecture guilds, and active internal developer communities.

#4about 1 minute

Moving the design system from inner source to open source

The DB UX design system was moved from a private inner source model to public open source to better include external partners and agencies.

#5about 2 minutes

The technical stack for a multi-framework component library

The system uses Sketch and Zeplin for design tokens via Style Dictionary and Mitosis to generate components for multiple frameworks like React and Angular.

#6about 1 minute

Establishing quality gates in the development process

A cross-functional process involves community, accessibility, and brand teams, using pre-releases, Playwright for visual regression testing, and GitHub Actions.

#7about 2 minutes

Managing community feedback and contributions

Feedback is gathered from a large internal web development community via MS Teams before being migrated to public GitHub issues for transparency.

#8about 3 minutes

Q&A: The decision to move away from Storybook

While previously used with Stencil.js, the team is not currently using Storybook due to challenges with their Mitosis-based mono-repo and documentation integration.