--- 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 | Role | Value | Where | |------|-------|-------| | Signal red | `#ec0016` | Primary buttons | | Text | `#282d37`, `#3c414b`, `#646973` | Titles, body, meta | | Black | `#16181b` | Outline button text and edge | | Page | `#f0f3f5` | Main surface | | Panel | `#ffffff` | Cards and forms | | Divider | `#d7dce1` | Rules | | Link blue | `#0c3992` | Links | | Warning orange | `#d96000` | Notices | | Scrim | `#000000` at 70 percent | Overlays | ### 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.