Trainline DESIGN.md

Overview

Visual Theme & Atmosphere

Trainline is Europe's leading independent rail and coach booking platform, and its interface reflects a practical, optimistic approach to travel — clean, confident, and task-focused. The homepage opens on a white canvas (#ffffff) with a prominent booking form using soft grey input fields (#f2f4f4) and an eye-catching teal primary CTA (#00a88f — "Find cheap tickets") that immediately signals the main action. The overall atmosphere is functional yet bright: a booking utility that doesn't feel utilitarian.

The signature Trainline mint-teal (#00a88f) is one of the UK consumer-tech world's most recognisable transport-brand colours — energetic and optimistic without the red urgency of transport alerts or the cold neutrality of enterprise SaaS. On the results and action surfaces, a deep navy-blue (#2332c4) takes over as the primary interactive color for key actions like "Change" search parameters. This two-color interactive system — teal for booking initiation, navy for action within flow — creates a clear visual hierarchy across the funnel.

Typography is anchored by TLCircular, a custom rounded geometric typeface that appears on all marketing headings and feature cards, giving promotional content a friendly, approachable character. The body and UI layer falls back to the system font stack (-apple-system, Segoe UI, Roboto), keeping the transactional interface fast-loading and native-feeling. Headings are uniformly bold (weight 700), creating strong visual anchors across all screen sizes.

Key Characteristics:

• Teal primary CTA (#00a88f) — Trainline's most distinctive brand colour, reserved for the main booking action
• Navy action color (#2332c4) for interactive elements within the search flow
• TLCircular custom geometric rounded font for all marketing and feature headings
• System font stack for all transactional / body UI — fast, native, legible
• Soft grey input fields (#f2f4f4) on the booking form — calm, non-distracting
• Conservative 4px radius across buttons and inputs — professional, not playful
• Deep ink (#192325) for primary text — almost-black with a warm dark-teal undertone
• Minimal shadow usage — flat depth with surface color differentiation

Primary tasks

• Search for a train by entering departure and arrival stations
• Compare every operator and fare to find the cheapest
• Save a third on fares by buying a Railcard
• Buy a ticket and receive an eticket to travel with
• Check whether a service disruption affects the journey

Brand Narrative

Trainline was founded in 1999 as a joint venture between Virgin and National Express, originally operating as thetrainline.com — one of the UK's first e-commerce platforms, born at the peak of the dot-com era but built around a genuinely useful problem: you shouldn't have to go to a station to book a train. The platform went independent and pivoted from rail-only to a multi-operator aggregator, eventually expanding to cover coach travel and pan-European rail.

The company's founding premise — that buying a train ticket should be as easy as buying anything online — has held consistent for over two decades. Trainline positions itself as the independent alternative to individual train company booking sites: it shows all operators and all fares in one place, so travellers can compare and find the cheapest option. The "1/3 off with Railcard" framing and the prominent "save 61%*" messaging on the homepage make savings the core brand promise, not just a feature.

In 2019 Trainline listed on the London Stock Exchange, becoming one of the UK's most prominent consumer-tech IPOs of that year. The brand refactored its visual identity around that period: TLCircular replaced older type choices, and the teal-navy dual-color system became the standardised interactive palette. The product now serves millions of journeys across the UK and continental Europe, with the Interrail/Eurail pass business and Japan Rail Pass as notable international expansions.

What Trainline refuses: the fragmented UX of individual train company booking sites. What it embraces: aggregation, transparency on prices across operators, and a booking experience that feels like a consumer app rather than a government portal.

Principles

1. Every fare, every operator. Trainline's value is comparison — the full picture in one place. UI implication: results show all operators and fare types without hiding cheaper alternatives behind additional clicks.
2. The saving is the message. Percentage savings ("save 61%") and Railcard discounts ("save 1/3") are the primary marketing hooks. UI implication: price and saving information is the most prominent data point in search results and promotional cards.
3. Booking in seconds, not minutes. The homepage booking form is a single-screen, five-field interaction. UI implication: minimal form steps; no account required to search; progressive disclosure for passenger details.
4. Calm on disruption. Rail disruptions are common; Trainline addresses them with a top-of-page warning banner in measured, calm amber — not alarming red, not hidden. UI implication: service state is always surfaced, never minimised.
5. System fonts for speed. The transactional surface uses the device's native font — TLCircular is for brand moments. UI implication: booking flow pages load and feel native; brand personality lives in marketing content, not the checkout funnel.

Personas

Personas below are fictional archetypes informed by publicly observable Trainline user segments (UK commuters, leisure travellers, European rail tourists), not individual people.

Sarah Chen, 34, London. A commuter who books weekly between Manchester and London for client work. Uses Trainline because she can see off-peak vs peak prices side by side. Has a 16-25 Railcard (now 26-30) and the Trainline app manages her etickets automatically. The "save 1/3" framing on the app homepage validates her railcard purchase every time she opens it.

Tom Williams, 28, Bristol. A leisure traveller booking weekend trips to the Lake District or Edinburgh. Doesn't care about operators — books whichever service is cheapest for his travel window. Uses the "buy in advance and save" messaging as a mental cue to book early. Finds price calendars the most useful feature.

Ingrid Andersen, 52, Copenhagen. A European tourist planning a UK rail holiday — the Cotswolds, Bath, Cornwall. Trainline was recommended as the best way to book multi-leg UK journeys. Compares Trainline with the national rail site and chooses Trainline for its simpler multi-leg booking UX. Also looked at Interrail through Trainline for a separate European trip.

Marcus Obi, 41, Birmingham. Head of travel at a mid-size consultancy, uses Trainline for Business. Values the consolidated invoicing and the ability to book for team members without needing individual accounts. The clean, functional interface reduces friction for non-frequent rail users in his team.

Colors

Primary Brand

• Trainline Teal (#00a88f): The primary brand color. Used for the main booking CTA "Find cheap tickets" — the single highest-priority action on the homepage.
• Teal Dark (#007f6c): Darker shade for hover states on the primary teal button.

Interactive / Action

• Action Blue (#2332c4): Deep navy-blue that functions as the primary interactive color on booking-flow surfaces — the "Change" search button, cookie accept CTA, key actions within results.
• Action Dark (#0035a9): Deeper navy for hover/pressed states on action buttons.

Text & Ink

• Ink (#192325): Primary heading and nav text — a very dark warm-teal near-black, warmer than pure #000000.
• Body (#3f4b4e): Secondary body copy, descriptions.
• Muted (#5b6466): Tertiary text, metadata, captions.
• On Primary (#ffffff): Text on teal or navy backgrounds.

Surface & Structure

• Canvas (#ffffff): Page background, card surfaces.
• Surface (#f2f4f4): Input field backgrounds — the main form backdrop.
• Surface Alt (#ebf2ff): Light blue tint for selected states and highlights.
• Sign-in Bg (#e7ebeb): The muted pill background for the "Sign in" nav button.
• Hairline (#d0d4d5): Borders, dividers, outlines on secondary buttons.

Semantic

• Warning Bg (#fdf7c9): Service disruption banner background.
• Warning Text (#502e00): Text on warning banners.

Typography

Font Family

• Display / Brand: TLCircular — Trainline's custom rounded geometric typeface, used for all marketing and feature headings. Falls back to system-ui.
• Body / UI: System font stack: -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif — native feel across platforms.

Hierarchy

Principles

• Custom font for brand moments, system for function: TLCircular only appears in marketing / promotional sections — the booking form and results use the system stack for speed and native legibility.
• Bold only: weight 700 for headings consistently across both typefaces. UI labels use weight 600. Body is 400. No medium (500) weight observed.
• Flat line-heights: Heading line-heights are tight (1.25–1.40); body is more generous (1.71) for legibility.

Layout

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
• Notable: Station inputs use 96px left padding to accommodate the large station-icon prefix area

Grid & Container

• Centered content max-width ~1200px
• Hero: booking form centered on a clean white background, two stacked station inputs above a single row of date/passenger pickers
• Marketing sections: 2–3 column card grids for feature promotions (Season Ticket, Railcard, Holiday Pass)
• Full-width warning banner at the top for service disruptions

Whitespace Philosophy

• Task-first: the booking form is the page — generous padding, minimal decoration
• Clean separation: sections divide by white space and subtle card boundaries, not heavy dividers
• Card rhythm: feature cards use consistent 4px radius and white background with hairline borders

Border Radius Scale

• Sharp (2px): Cookie choice button outline
• Standard (4px): All buttons, inputs, cards — the universal default
• Pill (26px): Sign-in nav button
• Full (9999px): Not observed on primary UI; reserved for potential badge/tag use

Responsive Behavior

Breakpoints

Touch Targets

• Station inputs at 56px height — comfortable for tap on mobile
• Buttons at 40–48px height — all meet touch accessibility minimums
• Nav links with 8px–16px padding — adequate spacing for thumbs

Collapsing Strategy

• Booking form: single-column stacked on mobile, 2-column date/passenger row collapses to stacked
• Feature cards: 3-column → 2-column → single column
• Navigation: horizontal nav → hamburger menu on mobile
• Hero headline: 28px maintained on mobile (already body-friendly scale)

Image Behavior

• Promotional hero images maintain aspect ratio at all breakpoints
• Feature card images use 4px radius consistently
• No heavy background imagery on the booking form surface — stays clean white

Elevation & Depth

Shadow Philosophy: Trainline uses minimal elevation. The booking form itself is essentially flat — inputs use background-color (#f2f4f4) rather than elevation to differentiate from the page. Feature cards use light shadows for gentle lift. Depth is communicated primarily through surface color (white vs grey vs tinted blue).

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.card: 0px 2px 8px rgba(0,0,0,0.08)
• shadow.elevated: 0px 4px 16px rgba(0,0,0,0.12)

Motion & Easing

Durations:

Easings:

Motion rules: Motion is minimal and functional — appropriate for a transactional booking utility used in high-stress moments (commuters running for trains). The autocomplete station dropdown uses a short ease-in fade; the booking form button uses a fast hover darkening. No decorative animation anywhere. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the search and booking flow remain fully functional.

Teal CTA hover: The "Find cheap tickets" button darkens from #00a88f to #007f6c at motion-fast — confident, quick, transactional.

Components

Buttons

Primary Booking CTA

• Background: #00a88f
• Text: #ffffff
• Radius: 4px
• Padding: 10px 12px
• Height: 48px
• Font: 16px weight 600
• Use: Main "Find cheap tickets" booking action on the homepage form

Action Blue Button

• Background: #2332c4
• Text: #ffffff
• Radius: 4px
• Padding: 8px 16px
• Height: 40px
• Font: 14px weight 400
• Use: "Change" search parameters on results; "Accept Cookies"

Secondary Outlined

• Background: #ffffff
• Text: #192325
• Border: 1px solid #d0d4d5
• Radius: 4px
• Padding: 8px 16px
• Height: 40px
• Font: 16px weight 700
• Use: Secondary CTAs — "Buy now", "Buy your Railcard", "Take a look"

Sign In Pill

• Background: #e7ebeb
• Text: #192325
• Radius: 26px
• Padding: 2px 8px 2px 16px
• Height: 40px
• Font: 16px weight 600
• Use: "Sign in" button in the top navigation

Inputs & Forms

Station Autocomplete

• Background: #f2f4f4
• Text: #000000
• Border: 2px solid transparent (no visible border at rest)
• Radius: 4px (top-only for departure, bottom-only for arrival — paired field)
• Padding: 16px 16px 16px 96px
• Height: 56px
• Font: 16px weight 400
• Use: Departure and arrival station fields with icon prefix area

Date / Passenger Selector

• Background: #f2f4f4
• Text: #000000
• Radius: 4px
• Padding: 16px
• Height: 56px–64px
• Font: 16px weight 600
• Use: Date/time and passenger-count selector buttons within the booking form

Cards & Containers

Feature Promotional Card

• Background: #ffffff
• Radius: 4px
• Use: Marketing feature cards — Season Ticket promotions, Railcard banners, journey highlights

Badges

Service Disruption Banner

• Background: #fdf7c9
• Text: #502e00
• Radius: 0px
• Padding: 16px
• Use: Full-width service alert banner at the top of the page

Navigation

Top Navigation

• Background: #ffffff
• Text: #192325
• Font: 14px weight 600
• Height: 56px (approx)
• Active: #192325 text maintained; no underline or color change observed
• Use: "Railcards", "Business", "My Bookings", "Register" links

Verified: 2026-06-22 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://www.thetrainline.com/ (homepage — booking form, nav, feature cards), https://www.thetrainline.com/book/results (search results surface) Tier 2 sources: getdesign.md/trainline — not found (404); styles.refero.design/?q=trainline — no Trainline entry found after search Conflicts unresolved: none

States

Do's and Don'ts

Do

• Use teal (#00a88f) exclusively for the primary booking CTA — it is the highest-priority action signal
• Use navy (#2332c4) for in-flow interactive actions within the search and booking journey
• Use TLCircular for all marketing and feature headings — it defines the brand personality
• Use system fonts for all transactional UI, form fields, and body text — speed and native legibility matter
• Keep border-radius at 4px for buttons and inputs — professional, not playful
• Use #f2f4f4 for input field backgrounds — the soft grey creates calm focus without distraction
• Use #192325 (deep ink) for primary text — warmer and more distinctive than pure black
• Use full-width warning banners (#fdf7c9) for service disruption — highly visible but low-alarm

Don't

• Don't use teal for secondary or tertiary actions — dilutes the single booking CTA signal
• Don't use rounded/pill borders on booking inputs or main content cards — 4px is the standard
• Don't substitute the system font for body text with TLCircular — TLCircular is for brand/marketing moments only
• Don't add decorative gradients or heavy shadows — Trainline is clean and functional
• Don't use pure black (#000000) for headings — use ink (#192325) for the brand-warm tone
• Don't use the warning yellow (#fdf7c9) outside of genuine service disruption alerts
• Don't hide the primary teal CTA in complex layouts — it should be the visual focal point

Voice & Tone

Trainline's voice is practical, encouraging, and price-conscious — the smart friend who knows how to find the best deal on rail travel. The tagline approach ("Search, Compare & Buy Cheap Train Tickets") is purely functional: Trainline names the actions and delivers. Copy is direct, benefit-led, and avoids hype. Percentage savings are stated plainly ("save 61%", "save 1/3") — let the numbers speak. Navigation labels are terse single-words ("Railcards", "Business", "Basket").

Voice samples (verbatim from live site):

• "Buy train tickets for travel in the UK and Europe" — hero H1. (verified live 2026-06-22)
• "Cheap train tickets – buy in advance and save 61%*" — section heading. (verified live 2026-06-22)
• "Other ways to save on train travel" — section heading. (verified live 2026-06-22)

Forbidden register: Travel hype ("amazing deals", "incredible savings"), urgency dark patterns ("only 2 seats left!" as a persistent scare), jargon ("yield-managed pricing"), corporate speak.

Agent Prompt Guide

Quick Color Reference

• Primary booking CTA: Trainline Teal (#00a88f)
• In-flow action buttons: Action Navy (#2332c4)
• Page background: Pure White (#ffffff)
• Form inputs: Soft Grey (#f2f4f4)
• Primary text: Deep Ink (#192325)
• Secondary text: Dark Slate (#3f4b4e)
• Muted text: Medium Slate (#5b6466)
• Borders: Light Grey (#d0d4d5)
• Sign-in pill bg: Muted Grey (#e7ebeb)
• Warning surface: Warm Yellow (#fdf7c9)

Example Component Prompts

• "Create a train booking form on white background. Two station inputs stacked: #f2f4f4 bg, 4px radius (top corners on first, bottom on second), 56px height, 16px padding with 96px left offset for icon. Date button same style. Teal CTA: #00a88f bg, white text, 4px radius, 48px height, 16px font weight 600."
• "Design a top nav: white #ffffff, 56px height. TLCircular links in #192325, 14px weight 600. Right-aligned: sign-in pill with #e7ebeb bg, #192325 text, 26px radius."
• "Build a feature marketing card: white #ffffff bg, 4px radius, light shadow. TLCircular heading 32px weight 700 #192325. Body 14px system-ui weight 400 #3f4b4e. White outlined CTA: #ffffff bg, #d0d4d5 border, 4px radius, 16px 700."
• "Create a service disruption banner: full-width, #fdf7c9 bg, #502e00 text, 14px system-ui weight 400. No radius — full bleed."

Iteration Guide

1. Teal (#00a88f) is the single booking CTA — protect it; don't use elsewhere
2. Navy (#2332c4) for all in-flow actions (search, change, confirm)
3. TLCircular for headings; system-ui for everything else
4. 4px radius everywhere (26px pill only for sign-in nav)
5. Input backgrounds are #f2f4f4 — never pure white on white canvas
6. Text color #192325 (not #000000) for all primary headings
7. White cards with #d0d4d5 border for secondary CTAs

Governance

Known Gaps

• Contrast, button-primary. Text #ffffff on #00a88f measures 3.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.