Travel / iOS / Android / Web

Deutsche Bahn

Deutsche Bahn designs like a timetable: a pale gray page, dark slate text and black-weight titles, with signal red kept for the one button that books the trip.

Download
  • #EC0016
  • #282D37
  • #F0F3F5
  • #D7DCE1
  • #646973
  • #0C3992

Color

Every color token in the file, grouped by role.

Brand

  • primary#EC0016
  • on primary#FFFFFF
  • ink secondary#3C414B

Surfaces

  • canvas#FFFFFF

Text

  • ink#282D37
  • ink muted#646973
  • link#0C3992

Lines

  • divider#D7DCE1
  • scrim#000000B3 (70%)

Status

  • warning#D96000

More

  • black#16181B
  • page#F0F3F5

Typography

Each style is set with the file's own family, size, weight and spacing.

  • DB Screen HeadDB Screen Head is private and not available in open fonts. Shown in Noto Sans, the closest open match.
  • DB Screen SansDB Screen Sans is private and not available in open fonts. Shown in Noto Sans, the closest open match.
  • headline32px / 900 / 40px

    Deutsche Bahn

  • title24px / 900 / 32px

    Pack my box with five dozen liquor jugs

  • heading18px / 900 / 24px

    The quick brown fox jumps over the lazy dog

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button16px / 700 / 24px

    Continue to checkout

  • label12px / 700 / 18px

    Continue to checkout

Shape

Corner radius tokens.

  • sm4px
  • md7px
  • lg12px
  • round999px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • base16px
  • lg20px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button primary small
    button-primary-small
  • button outline
    button-outline
  • page band
    page-band
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 95 lines
version: alpha
name: Deutsche-Bahn-design-analysis
description: "A railway booking site with an engineered clarity: DB Screen Head in black weight for titles, DB Screen Sans for text, dark slate ink (#282d37) on a pale gray page (#f0f3f5), signal red (#ec0016) for the main action and 4px corners."
status: Draft
appVersion: "measured in a browser (English site), 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#ec0016"
  on-primary: "#ffffff"
  ink: "#282d37"
  ink-secondary: "#3c414b"
  ink-muted: "#646973"
  black: "#16181b"
  canvas: "#ffffff"
  page: "#f0f3f5"
  divider: "#d7dce1"
  link: "#0c3992"
  warning: "#d96000"
  scrim: "#000000b3"

typography:
  # Font note: "DB Screen Head" is a private font and is not available in open fonts. Closest open alternative: "Noto Sans".
  # Font note: "DB Screen Sans" is a private font and is not available in open fonts. Closest open alternative: "Noto Sans".
  headline:
    fontFamily: "'DB Screen Head', 'Noto Sans', Arial, Helvetica, sans-serif"
    fontSize: 32px
    fontWeight: 900
    lineHeight: 40px
  title:
    fontFamily: "'DB Screen Head', 'Noto Sans', Arial, Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 900
    lineHeight: 32px
  heading:
    fontFamily: "'DB Screen Head', 'Noto Sans', Arial, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 900
    lineHeight: 24px
  body:
    fontFamily: "'DB Screen Sans', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "'DB Screen Sans', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
  label:
    fontFamily: "'DB Screen Sans', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 18px

rounded:
  sm: 4px
  md: 7px
  lg: 12px
  round: 999px

spacing:
  sm: 8px
  base: 16px
  lg: 20px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 56px
    padding: 0 24px
  button-primary-small:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 40px
    padding: 0 16px
  button-outline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.black}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 40px
    padding: 0 16px
  page-band:
    backgroundColor: "{colors.page}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 16px

Overview

Deutsche Bahn is Germany's national railway, and bahn.de is its booking site. The look is clear and engineered: a pale gray page, dark slate text, signal red for the main action and square-ish 4px controls. [Observed]

What defines the look:

  1. A pale gray page. #f0f3f5 with white panels and #d7dce1 dividers. [Measured]
  2. Dark slate ink. Text is #282d37, secondary #3c414b and muted #646973. [Measured]
  3. Signal red for action. #ec0016 fills the main buttons, 56 high with white bold text. [Measured]
  4. Black-weight titles. DB Screen Head at 900 for 32, 24 and 18, and DB Screen Sans at 400 and 700 for text. [Measured]
  5. Engineered corners. 4px on controls, with 7.5 and 12 on panels. [Measured]

Source for this file: the bahn.de English home page measured in a browser at 1440 and 390 wide, read on 2026-10-06. The DB design system site was not read. Signed-in screens were not measured. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Signal red#ec0016Primary buttons
Text#282d37, #3c414b, #646973Titles, body, meta
Black#16181bOutline button text and edge
Page#f0f3f5Main surface
Panel#ffffffCards and forms
Divider#d7dce1Rules
Link blue#0c3992Links
Warning orange#d96000Notices
Scrim#000000 at 70 percentOverlays

Typography

DB Screen Head at weight 900 sets titles: 32 on 40, 24 on 32 and 18 on 24. DB Screen Sans sets text at 16 on 24 with 700 for buttons and 12 on 18 at 700 for small labels. [Measured]

Shape and spacing

Controls use a 4px corner. Panels use 7.5 and 12. Primary buttons are 56 high and secondary buttons 40, and the layout uses 16 and 20 spacing. [Measured]

Iconography and motion

Icons are loaded as sets for sizes 16 to 64 in outline and filled styles. [Measured]

Themes

Light on the page measured. [Observed]

Platform: iOS

The Deutsche Bahn iOS app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for search, tickets and account in the navigator app. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A red search button. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The apps are expected to share the red, the slate and the 4px corners with the web. [Inferred]

Platform: Android

The Deutsche Bahn Android app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for search, tickets and account in the navigator app. [Inferred]

Main action

Expected on Android: Floating action button.

A red search button. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The apps are expected to share the red, the slate and the 4px corners with the web. [Inferred]

Platform: Web

The bahn.de English home page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A top bar with a language switch, skip links and a connection search at the top of the page. [Observed]

Main action

Expected on Web: Page-level button.

A red button with white bold text, 56 high with a 4px corner. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Select fields and buttons 40 high with a 1px dark edge. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values at each breakpoint. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

The main button is 56 high and secondary controls 40. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

A large icon set at sizes 16 to 64 in outline and filled styles. [Measured]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The responsive page keeps type and color and changes layout. [Measured]

Cross-platform consistency

Consistent across platforms: the red, the slate ink and the small corners. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use red only for the main action.
  • Keep titles in the black-weight face.
  • Keep corners at 4px.
  • Put white panels on the pale gray page.

Don't

  • Don't use red for decoration.
  • Don't round buttons into pills.
  • Don't use light title weights.

Known Gaps

  • The booking flow, tickets and the signed-in account were not measured.
  • The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions.
  • Icons, motion and exact breakpoints were not measured.
  • Account deletion and store policy rules were not verified.
  • The Head and Sans alternative are the same family, a judgement call because the real Head face is heavier and narrower.
  • The DB design system site was not read, so role names are not given.