Travel / iOS / Android / Web

Amtrak

Amtrak keeps the page in deep navy and white, marks every choice in a bright blue, and saves a single green for the button that finds your train.

Download
  • #002436
  • #167FA6
  • #548300
  • #00537E
  • #E3E8EA
  • #FFFFFF

Color

Every color token in the file, grouped by role.

Brand

  • primary#167FA6
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • on search#FFFFFF
  • heading#00537E
  • sky text#5BCBF7
  • ink#002436
  • ink muted#737575
  • disabled#737575
  • on navy#FFFFFF

Lines

  • border#D4D8D9

More

  • search#548300
  • navy#002436
  • navy mid#003A60
  • gray band#F1F1F1
  • callout#E3E8EA

Typography

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

  • Open SansOpen font, shown as published.
  • hero44px / 400 / 48.4px

    Amtrak

  • headline28px / 400 / 36px

    Pack my box with five dozen liquor jugs

  • title20px / 600 / 28px

    Pack my box with five dozen liquor jugs

  • lead22px / 400 / 30.8px

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • light18px / 300 / 24px

    The quick brown fox jumps over the lazy dog

  • button14px / 600 / 20.4px

    Continue to checkout

Shape

Corner radius tokens.

  • xs2px
  • sm3px
  • md5px
  • lg10px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • xs5px
  • sm9px
  • md12px
  • base16px
  • lg20px
  • xl40px

Components

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

  • button search
    button-search
  • button primary
    button-primary
  • trip tab selected
    trip-tab-selected
  • trip tab
    trip-tab
  • traveler select
    traveler-select
  • rewards callout
    rewards-callout
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 118 lines
version: alpha
name: Amtrak-design-analysis
description: "A national rail booking site in deep navy (#002436) and a bright action blue (#167fa6), with a green Find Trains button (#548300), Open Sans at light to semibold weights, small 3px corners, uppercase button labels and tabbed booking forms."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#167fa6"
  on-primary: "#ffffff"
  search: "#548300"
  on-search: "#ffffff"
  navy: "#002436"
  navy-mid: "#003a60"
  heading: "#00537e"
  sky-text: "#5bcbf7"
  ink: "#002436"
  ink-muted: "#737575"
  canvas: "#ffffff"
  gray-band: "#f1f1f1"
  callout: "#e3e8ea"
  border: "#d4d8d9"
  disabled: "#737575"
  on-navy: "#ffffff"

typography:
  hero:
    fontFamily: "'Open Sans', Helvetica, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 400
    lineHeight: 48.4px
    letterSpacing: -0.44px
  headline:
    fontFamily: "'Open Sans', Helvetica, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 36px
  title:
    fontFamily: "'Open Sans', Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 28px
  lead:
    fontFamily: "'Open Sans', Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 30.8px
  body:
    fontFamily: "'Open Sans', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  light:
    fontFamily: "'Open Sans', Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 24px
  button:
    fontFamily: "'Open Sans', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20.4px

rounded:
  xs: 2px
  sm: 3px
  md: 5px
  lg: 10px
  pill: 9999px

spacing:
  xs: 5px
  sm: 9px
  md: 12px
  base: 16px
  lg: 20px
  xl: 40px

components:
  button-search:
    backgroundColor: "{colors.search}"
    textColor: "{colors.on-search}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 54px
    padding: 0 40px
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 40px
    padding: 9px 40px
  trip-tab-selected:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    height: 46px
    padding: 2px 20px
  trip-tab:
    backgroundColor: "{colors.navy}"
    textColor: "{colors.on-navy}"
    typography: "{typography.button}"
    height: 46px
    padding: 2px 20px
  traveler-select:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 42px
  rewards-callout:
    backgroundColor: "{colors.callout}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 16px

Overview

Amtrak is the national passenger railroad of the United States, and its site and apps sell tickets, show schedules and track trains. The look is deep navy and white with a bright blue for interface actions, a green for the one search button, Open Sans at light to semibold weights, and small 3px corners. [Observed]

What defines the look:

  1. Deep navy. #002436 is both the text color and the color of the booking panel and dark bands, with #003a60 and #00537e as lighter navies for sections and headings. [Measured]
  2. Action blue. #167fa6 marks the selected trip type, Learn More buttons, carousel arrows and the Sign In and Join links. [Measured]
  3. A green search button. "Find Trains" is the only green, #548300, 54 high with a 3px corner. [Measured]
  4. Open Sans, light to semibold. Headlines are regular 400 at 28 to 44, intros light 300, and buttons semibold uppercase with 1.35px tracking. [Measured]
  5. Small corners. Buttons and selects use 3px, cards 10, and the booking tabs are square. [Measured]

Source for this file: the home page with its booking form, the deals page and the Guest Rewards sign-in page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. Amtrak does not publish a design system. Search results and checkout were not measured. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Action blue#167fa6Selected trip tab, Learn More, carousel arrows, Sign In and Join links [Measured]
Search green#548300Find Trains button [Measured]
Navy#002436Text, booking panel, unselected tabs, dark bands [Measured]
Mid navy#003a60Section bands [Measured]
Heading blue#00537eSection headings [Measured]
Sky text#5bcbf7Links on dark teasers [Measured]
Gray text and disabled#737575Field labels, the inactive Sign In button [Measured]
Canvas#ffffffPage [Measured]
Bands#f1f1f1, callout #e3e8eaGray sections, the Guest Rewards callout [Measured]
Border#d4d8d9Field and card edges [Measured]

Typography

Open Sans from 300 to 800, mostly 300, 400 and 600. [Measured]

RoleDesktopMobileWeight
Hero44 on 48.4, -0.44px28 on 30.8400 [Measured]
Section heading28 on 36not measured400 [Measured]
Card title20 on 28not measured600 [Measured]
Lead22 on 30.818 on 25.2400 [Measured]
Light intro18 on 2414 on 19300 [Measured]
Body16 on 21 to 2414400 [Measured]
Button and tab14 on 20.4, uppercase 1.35px on Sign Insame600 [Measured]

Shape and spacing

Buttons and selects use 3px corners, cards and teasers 10, with 2, 4 and 5 on small parts. Trip type tabs are square on desktop and take 12px on mobile. [Measured] Buttons carry 40px side padding, tabs 20. [Measured]

Iconography and motion

Two icon fonts are loaded: one for interface glyphs and one for social brand marks. [Measured] Motion was not measured. [Inferred]

Themes

Light only. The dark color scheme pass changed only one small glyph. [Measured]

Platform: iOS

How the Amtrak iOS app looks and behaves was not captured. Amtrak does not publish a design system, so every item below is inferred from the web design and platform conventions. 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 booking, trips, train status and the account is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A prominent Find Trains action on the booking screen. [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 navy, the action blue and the small corners with the web. [Inferred]

Platform: Android

How the Amtrak Android app looks and behaves was not captured. Amtrak does not publish a design system, so every item below is inferred from the web design and platform conventions. 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 booking, trips, train status and the account is expected. [Inferred]

Main action

Expected on Android: Floating action button.

A prominent Find Trains action on the booking screen. [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 navy, the action blue and the small corners with the web. [Inferred]

Platform: Web

The home page booking form, the deals page and the sign-in 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 menus and blue Sign In and Join links. Below it, a navy booking panel with trip type tabs (One-Way, Round-Trip, Multi-City, Rail Passes, Auto Train) 46 high. [Measured]

Main action

Expected on Web: Page-level button.

A green #548300 "Find Trains" button with white uppercase semibold text, 54 high with a 3px corner. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Trip type tabs are filled blocks: the selected one action blue, the rest navy. The traveler picker is a white 42 high select with a 3px corner. Date fields are 50 high on desktop and 56 on mobile, with gray #737575 labels. Mobile deal filters are 49 high text tabs. The sign-in button stays gray #737575 until the form is filled. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that step down at the mobile width (44 to 28 for the hero). [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Tabs are 46 high, the search button 54, date fields 50 to 56, and the sign-in button 40. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Interface glyphs come from an icon font. [Measured]

Account and sign-in rules

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

The Guest Rewards sign-in page uses email and password only, with a Join Today link. [Observed]

Platform conformance

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

A conventional responsive booking site: the tabbed form stacks on mobile, tabs gain 12px corners, and type steps down. [Measured]

Cross-platform consistency

Consistent across platforms: the navy, the action blue, the green search action and Open Sans. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use navy for both text and the booking panel.
  • Keep action blue for selection and secondary actions, and green only for the search button.
  • Set buttons in semibold uppercase with wide tracking.
  • Keep corners small: 3px on controls, 10 on cards.

Don't

  • Don't use green for anything but Find Trains.
  • Don't round buttons into pills.
  • Don't set headlines in bold. They are regular 400.

Known Gaps

  • Search results, seat selection, checkout and the signed-in account were not measured.
  • The iOS and Android apps were not captured, and Amtrak publishes no design system, so every mobile topic is inferred.
  • Motion and modals were not measured.
  • A cookie banner uses a navy close to the heading blue. It belongs to a consent vendor and was left out.
  • Account deletion and store policy rules were not verified.