With DB UI Base we provide you with basic Design Tokens and assets based on the DB Design System UX Guides + Standards, that can be shared across web and native apps projects.

For more information, have a look at our hosted patternlab.

As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound to clear guidelines and restrictions even when being used with the code that we're providing with this product; Deutsche Bahn fully reserves all rights and ownership regarding the Deutsche Bahn brand, even though that we're providing the code of DB UI products free to use and release it under the Apache 2.0 license. Please have a look at our brand portal at https://marketingportal.extranet.deutschebahn.com/ for any further questions and whom to contact on any 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 must remove or replace any Deutsche Bahn brand and design assets as well as protected characteristics and trademarks. We're even also planning to provide a neutral theme that would make it much easier for you to use our product without the trademarks by Deutsche Bahn.

This especially relates to the files in the directories /assets/ and source/images and source/favicon.ico as well.

Install DB UI Base like this:

npm i -save @db-ui/base

Install Tailwind based on your framework: Installations, but don't use npx tailwindcss init.

Instead, run this command in your project:

node ./node_modules/@db-ui/base/build/tailwind/tailwind-config-generator.mjs

This will create your tailwind.config.js.

If you don't want to have a customizable config, you can also use the default tailwind-config by running:

node ./node_modules/@db-ui/base/build/tailwind/tailwind-config-generator.mjs default

The config contains all colors, fonts and spacings. Make sure to check the official guidelines for spacings (1 unit === 16px).

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

All of the style tokens and assets are in this package. Make any changes to suit your needs. This package has iOS, Android, and web code, and is based on Amazon Style Dictionary Complete Example.

To get started, run

npm install
npm run build

The npm build task is what performs the style dictionary build steps to generate the files for each platform.

We fetch all tokens like colors, spacings and typography via Zeplin API. To update those files you need to add a zeplin token to your environment.

For this copy .env.template and rename it to .env and generate a personal access token in the Browser.

Afterwards paste your Token into the .env file DEVELOPER_ZEPLIN_ACCESS_TOKEN=MY_TOKEN.

To fetch the newest style-tokens via Zeplin API run npm run zeplin:tokens and the /tokens/zeplin.json should be updated.

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.

This project is licensed under Apache-2.0, Copyright 2022 by DB Systel GmbH.