DB UX Design System v3 🚂💖

DB UX Design System v3 provides robust HTML UI components, reusable visual styles, and powerful tooling to help developers, designers, and content authors build, maintain, and scale best-of-class digital experiences.

Packages

Package	Content	Version
@db-ux/core-foundations	CSS/SCSS/Tailwind styles and assets
@db-ux/core-components	CSS/SCSS styles for components
@db-ux/ngx-core-components	Native Angular components
@db-ux/react-core-components	Native React components
@db-ux/v-core-components	Native Vue 3 components
@db-ux/wc-core-components	Web Components
@db-ux/agent-cli	CLI tool that copies the @db-ux documentation to your repository
@db-ux/mcp-server	Model Context Protocol (MCP) Server
@db-ux/core-eslint-plugin	ESLint plugin for component usage validation
@db-ux/core-stylelint	Stylelint plugin for CSS/SCSS usage

Which package should I choose?

For JavaScript framework-specific components: Choose your framework package (React, Angular, Vue, Web Components) which includes styling and JavaScript behavior.

For other users: Use @db-ux/core-components - it includes everything you need (foundations + component styles).

For design tokens only: Use @db-ux/core-foundations if you only need colors, spacing, fonts, and icons without pre-built component styles.

How to use

1. Install your preferred package via pnpm (or npm/yarn):

   • For React: pnpm i @db-ux/react-core-components
   • For Angular: pnpm i @db-ux/ngx-core-components
   • For Vue: pnpm i @db-ux/v-core-components
   • For Web Components: pnpm i @db-ux/wc-core-components
   • For styling only (e.g. for pure HTML integrations): pnpm i @db-ux/core-components

2. Include the CSS styles as described in the "Styling Dependencies" section of each package's README.

💡 Note: All framework packages automatically include the necessary foundation styles - you don't need to install @db-ux/core-foundations separately!

We even provide some examples of integrations.

AI Agent Support

We provide dedicated tooling to integrate the DB UX Design System directly into your AI coding assistants (like GitHub Copilot, Amazon Q, Cursor, or Claude).

Model Context Protocol (MCP) Server

For IDEs and AI tools that support the Model Context Protocol (e.g., Claude plugins, Cursor, Windsurf), we provide a standalone MCP server. It equips your AI with our official documentation, design tokens, and a powerful migration engine to automatically refactor legacy v2 code into modern v3 standards.

Add the server to your AI assistant's MCP configuration:

{
	"mcpServers": {
		"db-ux": {
			"command": "npx",
			"args": ["-y", "@db-ux/mcp-server", "db-ux-mcp"]
		}
	}
}

Agent CLI (Copilot Instructions)

For developers using GitHub Copilot or similar tools that read workspace instructions, we provide the @db-ux/agent-cli tool.

Run this command in your repository:

npx @db-ux/agent-cli

This will create or update .github/copilot-instructions.md with component documentation based on your installed @db-ux packages, helping AI agents provide better suggestions.

📖 Learn more about @db-ux/agent-cli node package

Code Quality

To help enforce correct usage of DB UX Design System components in your codebase, we provide the @db-ux/core-eslint-plugin ESLint plugin.

Quick Start

Install the plugin:

pnpm install eslint @db-ux/core-eslint-plugin --save-dev

Then add it to your ESLint config:

// eslint.config.js
import dbUx from "@db-ux/core-eslint-plugin";

export default [
	{
		plugins: {
			"db-ux": dbUx
		},
		rules: dbUx.configs.recommended.rules
	}
];

📖 Learn more about @db-ux/core-eslint-plugin node package

Creating Custom Components

For developers looking to create custom components that extend the design system in their applications, we provide comprehensive guidance:

📖 Creating Custom Components Guide - Learn how to build your own components using design system foundations

This guide covers:

• Setup and Configuration: Getting started with the design system packages
• Design Principles: Following DB UX Design System guidelines and best practices
• Component Patterns: Structured approaches to building consistent components
• Code Examples: Practical implementations for cards, forms, navigation, and more
• Framework Support: Specific guidance for React, Vue, Angular, and vanilla HTML/CSS
• Accessibility: Ensuring your components are inclusive and compliant
• Common Pitfalls: What to avoid and how to maintain design system consistency

DB Theme

In case that you're building a website or application for Deutsche Bahn, you'll additionally have to install the DB Theme via the @db-ux/db-theme node package (even also available as an inner source node package, as described within that packages README).

Components

We maintain a status overview for all components.

Core principles

DB UX Design System Core Web is part of DB UX Design System, that are the guidelines for any Personenverkehr Customer and Deutsche Bahn Enterprise website and web applications.

DB UX Design System leverages semantic HTML, ARIA roles, states and properties to apply our styles wherever possible, thus enforcing correct, accessible markup. And we're quality checking this in partnership with the Team Digital Accessibility.

DB UX Design System uses declarative selectors instead of visual helpers to ensure our HTML class names and structure are human read- and understandable, lean, performant and so much easier to update.

As DB UX Design System evolves, so does DB UX Design System version 3, meaning apps only need to keep their DB UX Design System Core Web package updated to ensure the latest look and feel.

Migration

From DB UI Core or DB UI Elements to DB UX Design System Core

We're providing a detailed migration for each component next to the documentation of each component, like e.g. Button migration.

For a comprehensive overview of all DB-UI components and their migration status, including components that don't have direct equivalents in DB-UX Design System v3, see our DB-UI to DB-UX Design System v3 Component Migration Guide.

In between DB UX Design System Core versions

Check our migration docs for breaking changes:

• v3.x ➡ v4.0
• v2.x ➡ v3.0
• v1.x ➡ v2.0
• v0.7 ➡ v1.0
• v0.6 ➡ v0.7
• v0.5 ➡ v0.6
• v0.4 ➡ v0.5: no migration needed, no breaking changes
• v0.3 ➡ v0.4
• v0.2 ➡ v0.3
• Alpha ➡ Beta (0.0.x➡0.x.x)

FAQ

Unexpected "new" colors

We've updated to the stable version of DB UX Design System (v3) version >= 1.x, and now the colors that were supposed to be red, are colored in blue (514ec7).

Please have a look at the migration guide from version 0.6.x to version 0.7.x, you need to install and reference the DB Theme, if you're building a website or web application for Deutsche Bahn.

Things to keep in mind

Developed for and driven by the community

This is mainly a platform providing the space and technology for a common basis of curated components; their development is mainly driven by the community and adapted out of the work done in projects and through the huge amount of feedback that we're gaining out of the community. So please support us in any way possible, this is greatly appreciated!

How to start developing / contributing

If you're working as a developer on the DB UX Design System or would like to contribute (many kudos for that !), please have a look at the relevant development documentation. We even also tag issues that might be a good starter for code contributions by the tag "good first issue".

Give us your feedback!

This is only the first version of our framework and we really want your feedback - either within the DB UX Design System Channel by Web Dev Community in Microsoft Teams (only available DB internally), or directly at db-ux-designsystem@deutschebahn.com. We're particularly keen to add as many examples to the behaviours as possible, to further clarify them.

Deutsche Bahn brand

To perfectly support our users and customers on their digital journey, the use of the Deutsche Bahn brand and trademarks is subject to clear guidelines and restrictions even when used with the code provided by this product. Deutsche Bahn fully reserves all rights and ownership regarding the Deutsche Bahn brand, even though we provide the code for DB UX Design System products free of charge under the Apache 2.0 license. Please refer to our brand portal for further questions contact details regarding brand issues. As these assets and visual guidelines are retrieved from our Deutsche Bahn Marketingportal, you'll agree with the "Allgemeine Nutzungsbedingungen für das DB-Marketingportal" (german) in case of using them.

For any usage outside of Deutsche Bahn websites and applications you aren't allowed to use any Deutsche Bahn brand and design assets as well as protected characteristics and trademarks, that for not including the DB Theme.

Contributions

Contributions are very welcome, please refer to the contribution guide.

Code of conduct

We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone – have a look at our Contributor Covenant Code of Conduct.

License

This project is licensed under the Apache-2.0 license. © 2024 DB Systel GmbH.