Travel / iOS / Android / Web

Trainline

Trainline separates doing from choosing: mint is the one way forward, indigo marks every choice, and plain system text keeps dense timetables readable.

Download
  • #00A88F
  • #2332C4
  • #160078
  • #001848
  • #192325
  • #F2F4F4

Color

Every color token in the file, grouped by role.

Brand

  • primary#00A88F
  • primary hover#00705F
  • primary pressed#003E34
  • on primary#FFFFFF
  • secondary#2332C4
  • secondary hover#2D00B1
  • primary dark#002620

Surfaces

  • canvas#FFFFFF

Text

  • ink#192325
  • ink subtle#3F4B4E
  • ink subdued#5B6466
  • link#004FF9

Lines

  • border#D0D4D5
  • border dull#8A9497

Status

  • negative#C70D00
  • warning wash#FDF7C9
  • warning text#502E00
  • positive wash#E1FBD7
  • info wash#EBF2FF

More

  • selection dullest#160078
  • selection wash#F3F1FD
  • backdrop dull#F2F4F4
  • backdrop duller#E7EBEB
  • search panel#001848

Typography

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

  • TLCircularTLCircular is private and not available in open fonts. Shown in Figtree, the closest open match.
  • CircularCircular is private and not available in open fonts. Shown in Figtree, the closest open match.
  • -apple-systemNot served by an open font library, so it falls back through the file's own stack.
  • display48px / 700 / 56px

    Trainline

  • headline32px / 700 / 40px

    Trainline

  • title24px / 700 / 30px

    Pack my box with five dozen liquor jugs

  • subtitle20px / 700 / 30px

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button18px / 600 / 24px

    Continue to checkout

  • label14px / 600 / 20px

    Continue to checkout

  • caption12px / 400 / 16px

    Continue to checkout

Shape

Corner radius tokens.

  • r22px
  • r44px
  • r88px
  • r1212px
  • r1616px
  • pill999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md12px
  • base16px
  • lg20px
  • xl24px

Components

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

  • button primary
    button-primary
  • button secondary
    button-secondary
  • button tertiary
    button-tertiary
  • sign in pill
    sign-in-pill
  • search field
    search-field
  • warning message
    warning-message
  • search panel
    search-panel
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 144 lines
version: alpha
name: Trainline-design-analysis
description: "A European rail and coach booking site drawn from a role-named token set: mint (#00a88f) for the main action, an indigo selection scale (#2332c4 to #160078) for choices and headlines, a midnight search panel, Circular headlines over the system text font, gray filled fields and 4 to 8px corners."
status: Draft
appVersion: "measured in a browser and read from the design tokens the live site ships, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#00a88f"
  primary-hover: "#00705f"
  primary-pressed: "#003e34"
  on-primary: "#ffffff"
  secondary: "#2332c4"
  secondary-hover: "#2d00b1"
  selection-dullest: "#160078"
  selection-wash: "#f3f1fd"
  ink: "#192325"
  ink-subtle: "#3f4b4e"
  ink-subdued: "#5b6466"
  link: "#004ff9"
  canvas: "#ffffff"
  backdrop-dull: "#f2f4f4"
  backdrop-duller: "#e7ebeb"
  border: "#d0d4d5"
  border-dull: "#8a9497"
  search-panel: "#001848"
  primary-dark: "#002620"
  negative: "#c70d00"
  warning-wash: "#fdf7c9"
  warning-text: "#502e00"
  positive-wash: "#e1fbd7"
  info-wash: "#ebf2ff"

typography:
  # Font note: "TLCircular" is a private font and is not available in open fonts. Closest open alternative: "Figtree".
  # Font note: "Circular" is a private font and is not available in open fonts. Closest open alternative: "Figtree".
  display:
    fontFamily: "TLCircular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 56px
  headline:
    fontFamily: "Circular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 40px
    letterSpacing: -0.48px
  title:
    fontFamily: "Circular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 30px
    letterSpacing: -0.36px
  subtitle:
    fontFamily: "Circular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 30px
    letterSpacing: -0.3px
  body:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 24px
  label:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
  caption:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px

rounded:
  r2: 2px
  r4: 4px
  r8: 8px
  r12: 12px
  r16: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 20px
  xl: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.r4}"
    height: 52px
    padding: 14px 20px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.r4}"
  button-tertiary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.r4}"
    height: 36px
    padding: 8px 16px
  sign-in-pill:
    backgroundColor: "{colors.backdrop-duller}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    height: 40px
    padding: 2px 8px 2px 16px
  search-field:
    backgroundColor: "{colors.backdrop-dull}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.r4}"
    height: 56px
    padding: 16px
  warning-message:
    backgroundColor: "{colors.warning-wash}"
    textColor: "{colors.warning-text}"
    typography: "{typography.label}"
    rounded: "{rounded.r8}"
    padding: 16px
  search-panel:
    backgroundColor: "{colors.search-panel}"
    textColor: "{colors.on-primary}"
    typography: "{typography.title}"
    rounded: "{rounded.r8}"
    padding: 24px

Overview

Trainline sells train and coach tickets across the United Kingdom and Europe. Its site is drawn from a token set that ships with the live pages, named by role: actions, selection, text, backdrops, messages and fields. Mint marks the main action, an indigo scale marks choices, and headlines are set in Circular over the device's own system font for text. [Measured]

What defines the look:

  1. Mint action, indigo choice. #00a88f is the primary action (hover #00705f, pressed #003e34). #2332c4 is the secondary action and the selected state, deepening to #160078 for the home headline. [Measured]
  2. System text, Circular headlines. Body text, labels and fields use the system font stack. Headlines use Circular (and a Trainline cut, TLCircular) at 700 with slight negative tracking. [Measured]
  3. Gray filled fields. Search fields are #f2f4f4 blocks 56 high with a 4px corner and no visible border at rest. [Measured]
  4. Midnight search panel. On route pages the search form sits on #001848. [Measured]
  5. Tinted messages. Messages pair a pale backdrop with a left edge and a dark text tone: warning #fdf7c9 with #502e00, info #ebf2ff, positive #e1fbd7. [Measured]

Source for this file: the home page with its search form, the London to Manchester route page and a not-found page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass, plus the role-named tokens the live site declares on its root element. Trainline's design system documentation is not public. Results, seat choice and checkout were not measured. No app captures were used. See Known Gaps.

Core

Colors

RoleValueToken name in the shipped set
Primary action#00a88f, hover #00705f, pressed #003e34action primary, button primary background [Measured]
Secondary action and selection#2332c4, hover #2d00b1, pressed #160078action secondary, selected background dull [Measured]
Selection washes#f3f1fd, #ece8fc, #d5cef7selection brightest, brighter, bright [Measured]
Text#192325, #3f4b4e, #5b6466text base, subtle, subdued [Measured]
Link#004ff9, hover #001848, visited #2d00b1link base, hover, visited [Measured]
Backdrops#ffffff, #f2f4f4, #e7ebebbackdrop base, dull, duller [Measured]
Borders#d0d4d5, #8a9497 for fieldsborder base, text field border [Measured]
Search panel#001848search form background [Measured]
Dark brand band#002620backdrop primary dullest [Measured]
Negative#c70d00, wash #ffeff0negative dull, message negative [Measured]
Warning#ffc508, wash #fdf7c9, text #502e00warning mid, brightest, dullest [Measured]
Positive#11ac23, wash #e1fbd7, text #0c732bpositive mid, brightest, text positive [Measured]
Focus ring#2332c4 at 48 percentfocus ring [Measured]

Overlays are the text color at 24, 48 and 80 percent, and tooltips and snackbars are #192325. [Measured]

Typography

RoleDesktopMobileFace and weight
Home headline48 on 5624 on 28TLCircular 700, #160078 [Measured]
Route headline48 on 54, -0.72px24 on 32Circular 700 [Measured]
Section headline32 on 40, -0.48px24 on 30Circular 700 [Measured]
Title24 on 30 to 38, -0.36px24 on 30Circular 700 [Measured]
Subtitle20 on 30, -0.3px18 on 26Circular 700 [Measured]
Body16 on 2415 to 16system font 400 [Measured]
Label and button14 on 20samesystem font 600 [Measured]
Caption12 on 16samesystem font 400 [Measured]

Headline tracking is -1.5 percent of the size. The token set names weights 400, 500, 600 and 700. [Measured]

Shape and spacing

The shipped radius scale is 2, 4, 8, 12 and 16. Buttons and fields use 4, cards and message panels 8, and chips 999. The sign-in button is a 40 high pill. [Measured] Buttons carry 8 by 16 (header) or 14 by 20 (main) padding, and list rows 12 by 16. [Measured]

Iconography and motion

Icons fill with the text tones (#192325, #3f4b4e, #5b6466) per the token set. [Measured] Motion was not measured. [Inferred]

Themes

Light only on the web. The dark color scheme pass changed nothing, though the token set carries inverted text and focus values for dark panels. [Measured]

Platform: iOS

How the Trainline iOS app looks and behaves was not captured. The token set ships on the web, but its documentation is not public, so it cannot be shown that the apps use the same set. Every item below is inferred. No device capture was done.

Back and up navigation

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

Not measured. [Inferred]

Primary navigation

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

A bottom tab bar for search, tickets, live times and the account is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A mint search or buy 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-15 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 app is expected to share the mint action, the indigo selection and the gray fields with the web. [Inferred]

Platform: Android

How the Trainline Android app looks and behaves was not captured. The token set ships on the web, but its documentation is not public, so it cannot be shown that the apps use the same set. Every item below is inferred. No device capture was done.

Back and up navigation

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

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for search, tickets, live times and the account is expected. [Inferred]

Main action

Expected on Android: Floating action button.

A mint search or buy 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-15 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 app is expected to share the mint action, the indigo selection and the gray fields with the web. [Inferred]

Platform: Web

The home page with its search form, a route page and a not-found 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 white header with Railcards and other links as 36 high text buttons, Cart and Register, and a gray #e7ebeb Sign in pill. On mobile, a product switcher lists Tickets, Stays and Attractions as 64 high rows. [Measured]

Main action

Expected on Web: Page-level button.

A mint #00a88f button with white 18px semibold text, 52 high with a 4px corner ("Get times in app" on mobile). [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

The mobile menu opens over the text color at 24 percent. Promotion banners use the warning wash with dark brown text. [Measured]

Controls

Expected on Web: Native or custom.

Origin, destination and date fields are 56 high gray blocks with a 4px corner and a 2px border that only shows on focus; on mobile they are 56 to 64 high. "Via / Avoid" and "Add a voucher code" are indigo inline text buttons, 32 high. [Measured] Field borders turn #4c4fdf on hover and #2332c4 on focus, per the tokens. [Measured]

Text sizing

Expected on Web: Browser zoom.

Radius and space tokens are in rem, so they follow the browser root size. Type sizes step down at the mobile width. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Fields are 56 to 64 high, main buttons 52, header buttons 36 to 40 and inline text buttons 32. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Icon fills follow the text tones. [Measured]

Account and sign-in rules

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

Not checked on the 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.

Body text uses the visitor's system font, so the site reads like the device it is on, while headlines carry the brand face. [Measured]

Cross-platform consistency

Consistent across platforms: the mint action, the indigo selection, gray filled fields and Circular headlines. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use mint for the one main action and indigo for every selected or secondary state.
  • Set headlines in Circular 700 and everything else in the system font.
  • Use gray filled fields without a resting border.
  • Pair every message tint with its darker text tone and a left edge.

Don't

  • Don't use mint for selection, or indigo for the main action.
  • Don't add borders to fields at rest.
  • Don't set long text in Circular.

Known Gaps

  • Results, seat choice, checkout and the signed-in account were not measured, and the railcards address returned a not-found page.
  • The iOS and Android apps were not captured. The token set ships on the web, but its documentation is not public, so every mobile topic is inferred.
  • Motion was not measured. The secondary indigo button's size was not seen on the pages measured, only its token colors.
  • White text on mint #00a88f measures 3.0 to 1, below the 4.5 to 1 minimum. That is the shipped pairing and was kept.
  • Circular and TLCircular are private. Figtree was chosen by comparing the same 48px headline side by side: its round geometric shapes match and it runs about 1 percent narrower. Albert Sans matched width more exactly but its letters are less round.
  • Account deletion and store policy rules were not verified.