Strong digital products
The DB UI ecosystem accelerates digital products development @ Deutsche Bahn – open for all web tech stacks, compatible to brand standards and accessible, we're about democratizing the development.
"DB Personenverkehr" (passenger service) and DB Systel have merged their Design Systems for Web by introducing a new version 2. Our goal is to enable a coherent basic UX on the basis of "Moderne Ikone" (modern icon) for customer- and employee-applications. To ensure consistency end to end through the phases starting with concept, through design up until development, we're even also providing the DB UX Design System version 2 as code components by DB Systel and "Reisendeninformationen" (traveler informations).
To empower all colleagues that are working in the fields of development, concept, design and content-production, for delivering the very best digital experiences.
Product ecosystem
-
DB UI Base
General assets and Design Tokens for universal usage in Web and Native App development contexts
-
DB UI Core
Robust HTML UI components, reusable visual styles and mature tools.
-
DB UI Elements – Web Components
Universal JavaScript UI components based on Web-Standards
-
DB UI Elements – JS Framework components
Proxy wrappers around Web Components for Angular, React and Vue
By DB UI Base we're providing general assetes and Design Tokens for the universal usage in Web as well as Native App development projects.
By DB UI Core we're providing robust HTML UI components as a basis for Web Development, reusable visual styles and mature tools.
Especially for JavaScript application development we're providing universal UI components by DB UI Elements – either Web Components based on Web Standards, as well as proxies / wrappers for the most common JavaScript frameworks that feel like native JavaScript framework components.
Core principals
-
Consistent & Compliant
DB UI Core is based on the DB UX Design System, that are the guidelines for any Personenverkehr Customer and Deutsche Bahn Enterprise website and web applications.
-
Accessible
DB UI Core 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
-
Declarative
DB UI Core 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.
-
Decoupled
DB UI Core is decoupled from the JavaScript layer, to implement the patterns in any Web Development technology context; and we're providing universal Web Components and native JS framework components with DB UI Elements as well.
-
Evergreen
As DB UX Design System evolves, so does DB UI Core, meaning apps only need to keep their DB UI Core package updated to ensure the latest look and feel.
-
Community driven
A platform providing the space and technology for a common basis of curated components; their development is mainly driven by the community, adapted out of the work done in projects and through the huge amount of feedback.
How to use
For using DB UI Core, you need to install it as a dependency to your
project and then link it within your HTML / CSS.
Please have a look into the
Docs / Get Started(docs)
for detailed instructions.
In case that you're developing a JavaScript application, please have a
look at
DB UI Elements, that's based on DB UI Core and provides Web Components for easier
integration into this tech context.
More information
Additionally we'll provide some more information over time regrading the whole ecosystem:
- DB UX Design System documentation within the DB Marketingportal (german)
- Confluence / Base Wiki – "Technische Umsetzung des Enterprise UI Design Systems" (german, only available internally)
- Confluence – Web UI Component Library (only available internally)
- Changelog
- Architectural Decision Records
Give us your feedback!
This is only the beta version of our framework and we really want your
feedback – either within the
DB UI Channel by Web Dev Community in Microsoft Teams (only
available DB internally)
, or directly at
db-ux-designsystem@deutschebahn.com
. So please support us in any way possible, this is greatly appreciated!
We're particularly keen to add as many examples to the behaviours as
possible, to further clarify them.