Deutsche Bahn DESIGN.md

Design System Inspiration of Deutsche Bahn

Overview

Visual Theme & Atmosphere

bahn.de is Deutsche Bahn's travel site — the journey planner, tickets and offers, and trip management for Germany's national railway. Its imprint names DB Fernverkehr AG in Frankfurt as the operator, within the DB group. Deutsche Bahn publishes its design system openly: the DB UX Design System, "a Design System designed to align teams and streamline product delivery", with its tokens and web components developed in public on GitHub.

The site is functional and trustworthy: white ground, dark slate text #282d37, pale grey fields #f0f3f5, and the DB red #ec0016 reserved for the one action that matters — Search. Type is Deutsche Bahn's own DB Screen Sans with DB Screen Head for headings.

What makes it worth reading:

• An open system. The design system has a public site and a public monorepo (db-ux-design-system/core-web), so the tokens behind bahn.de are inspectable.
• Adaptive roles with states. Variable names like --db-adaptive-bg-basic-level-1-hovered, --db-adaptive-on-bg-basic-emphasis-90-pressed and --db-adaptive-bg-vibrant-default spell out a role, an emphasis and a state.
• One focus colour everywhere. Every measured control draws a 2px #257fa8 outline on focus.

Primary tasks

• Plan a journey: from, to, date, travellers; search.
• Buy tickets and offers; manage trips.

Brand Narrative

Deutsche Bahn's site does one job first — get you a train — and its design says so: a slate-and- white page, grey fields, and a single red button. Behind it sits a design system the railway builds in the open, with state-aware adaptive tokens and a focus colour applied everywhere.

Principles

• One red. The primary action and nothing else.
• Open by default. The system and its tokens are public.
• Visible focus. The same outline on every control.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

bahn.de's root holds only 20 custom properties (container and screen sizes, icon fonts); its stylesheets declare about 1,000 --db-* variables that resolve inside component scopes. The colours below are read from the rendered elements.

• Primary (#ec0016) — the DB red on the search button (nine red backgrounds on the page).
• Primary hover (#c50014).
• Foreground (#282d37) — text and links; 17 of 17 <p> elements.
• Ink strong (#16181b) — the ghost button's label.
• Field (#f0f3f5) — input fills and grey panels.
• Border (#d7dce1) — the fields' bottom rule.
• Focus (#257fa8) — the 2px focus outline.
• Accent (#d96000) — an orange badge.
• Canvas (#ffffff).

Typography

Font family

DB Screen Sans (400, 700) — DBScreenSans, "Helvetica Neue", arial, sans-serif on body — and DB Screen Head (900) on headings, both loaded (document.fonts). Icons come from two icon fonts, db-default and db-filled.

Scale

The search button is 16px/700.

Layout

• Container tokens run from --db-container-3xs 14rem to --db-container-3xl 48rem; screens from --db-screen-xs 20em to --db-screen-xl 120em.
• The journey planner leads the page.

Responsive Behavior

Screen tokens define breakpoints (20em–120em); only desktop was measured.

Elevation & Depth

Flat: no shadows on the measured controls; overlays use rgba(0,0,0,0.7).

Motion & Easing

Not measured.

---

Tier 1 sources: https://www.bahn.de/ (live homepage — root and stylesheet custom properties read; DB Screen Sans and Head loaded; four components measured at rest, hover, pressed and focus, captured 2026-09-26); https://design-system.deutschebahn.com/ (DB UX Design System — nonsense path returns a GitHub Pages 404, read 2026-09-26); https://github.com/db-ux-design-system/core-web (DB UX Design System monorepo — design tokens and components for web UIs, read 2026-09-26); https://www.bahn.de/impressum (Impressum — DB Fernverkehr AG, Frankfurt, read 2026-09-26)

Components

Measured on the home page, focus read under a real Tab key, and a hover counted only when :hover matched; background-image, text-decoration and pseudo-elements were compared too.

• Search — Suchen: #ec0016, white 16px/700, radius 4px, 56px, 16px 32px. Hover and press #c50014. Focus: outline: 2px solid #257fa8.
• Header link — Tickets & Angebote: #282d37, 40px. Hover and press draw an ::after bar in #282d37 under the label; the link's own values stay the same. Focus: the 2px outline.
• Ghost button — Jetzt bestellen: transparent, #16181b, 4px. Hover washes it with rgba(90,94,104,0.24), press with rgba(90,94,104,0.32).
• Station fields — #f0f3f5 with a #d7dce1 bottom rule, 56px. Hover changes nothing; focus draws the outline.

Radius

4px on buttons; 12px on the class toggles.

States

Hover: search to #c50014, the header link gains an underline bar, the ghost button a 24% wash, the fields no change. Press: #c50014, the bar, a 32% wash. Focus: a 2px #257fa8 outline on all four.

Do's and Don'ts

Do

• Keep DB red #ec0016 for the primary action; darken to #c50014.
• Use slate #282d37 for text and grey #f0f3f5 for fields.
• Give every control the 2px #257fa8 focus outline.

Don't

• Don't spread the red across secondary controls.
• Don't use pure black for text; the ink is #282d37.
• Don't add shadows to controls.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#ec0016 DB red · #c50014 red hover · #282d37 ink · #f0f3f5 field · #d7dce1 rule · #257fa8 focus · #ffffff white

Example Component Prompts

• "A 56px search button, #ec0016, white 16px/700 DB Screen Sans, 4px radius; hover #c50014; focus a 2px #257fa8 outline."
• "A header link in #282d37 that shows an underline bar on hover."

Governance

Known Gaps

• Contrast, link-nav. Text #282d37 on #00000000 measures 1.52:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-ghost. Text #16181b on #00000000 measures 1.18:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.