Travel / iOS / Android / Web

FlixBus

FlixBus runs on lime and dark gray: a lime header, lime buttons with dark text, plain Roboto and 6px corners on every control.

Download
  • #97D700
  • #353535
  • #E5F9C0
  • #0047DE
  • #F7F7F7
  • #FFFFFF

Color

Every color token in the file, grouped by role.

Brand

  • primary#97D700
  • on primary#353535

Surfaces

  • canvas#FFFFFF

Text

  • ink#353535
  • ink soft#444444
  • ink muted#646464
  • link#0047DE
  • on dark#FFFFFF

Lines

  • border#C8C8C8
  • border strong#848484

More

  • lime wash#E5F9C0
  • page#F7F7F7
  • search band#E0EDFC
  • gray fill#E1E1E1
  • dark#353535

Typography

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

  • RobotoOpen font, shown as published.
  • display38px / 700 / 44px

    FlixBus

  • headline34px / 700 / 40.8px

    FlixBus

  • stat32px / 700 / 48px

    FlixBus

  • title20.8px / 700 / 27.2px

    Pack my box with five dozen liquor jugs

  • section16px / 700 / 24px

    The quick brown fox jumps over the lazy dog

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button16px / 500 / 24px

    Continue to checkout

  • small12px / 400 / 18px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • sm5px
  • md6px
  • lg8px
  • xl18px
  • pill999px

Spacing

The spacing scale, drawn to size.

  • xs5px
  • sm8px
  • md12px
  • base16px
  • lg24px

Components

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

  • button primary
    button-primary
  • button primary large
    button-primary-large
  • search field
    search-field
  • nav item
    nav-item
  • icon frame
    icon-frame
  • tab chip
    tab-chip
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 124 lines
version: alpha
name: FlixBus-design-analysis
description: "An intercity bus booking site in Flix lime green (#97d700) with dark gray text even on the green, Roboto throughout at 400 to 700, a lime header, white 6px search fields in one bar, a cool blue-tinted search band and link blue (#0047de)."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#97d700"
  on-primary: "#353535"
  lime-wash: "#e5f9c0"
  ink: "#353535"
  ink-soft: "#444444"
  ink-muted: "#646464"
  link: "#0047de"
  canvas: "#ffffff"
  page: "#f7f7f7"
  search-band: "#e0edfc"
  gray-fill: "#e1e1e1"
  border: "#c8c8c8"
  border-strong: "#848484"
  dark: "#353535"
  on-dark: "#ffffff"

typography:
  display:
    fontFamily: "Roboto, Arial, sans-serif"
    fontSize: 38px
    fontWeight: 700
    lineHeight: 44px
  headline:
    fontFamily: "Roboto, Arial, sans-serif"
    fontSize: 34px
    fontWeight: 700
    lineHeight: 40.8px
  stat:
    fontFamily: "Roboto, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 48px
  title:
    fontFamily: "Roboto, Arial, sans-serif"
    fontSize: 20.8px
    fontWeight: 700
    lineHeight: 27.2px
  section:
    fontFamily: "Roboto, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
  body:
    fontFamily: "Roboto, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "Roboto, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
  small:
    fontFamily: "Roboto, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px

rounded:
  sm: 5px
  md: 6px
  lg: 8px
  xl: 18px
  pill: 999px

spacing:
  xs: 5px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    height: 36px
    padding: 5px 12px
  button-primary-large:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    height: 48px
    padding: 8px 12px
  search-field:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    height: 36px
    padding: 5px 12px
  nav-item:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    height: 36px
    padding: 6px 12px
  icon-frame:
    backgroundColor: "{colors.lime-wash}"
    textColor: "{colors.ink}"
    typography: "{typography.small}"
    rounded: "{rounded.md}"
    height: 42px
  tab-chip:
    backgroundColor: "{colors.lime-wash}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    height: 36px
    padding: 6px 12px

Overview

FlixBus sells intercity bus and train tickets across Europe, the Americas and beyond. Its site is drawn in Flix lime green and dark gray: a lime header, lime buttons with dark gray text, Roboto for everything and 6px corners almost everywhere. Search sits in one white bar on a cool blue-tinted band. [Observed]

What defines the look:

  1. Lime green with dark text. #97d700 fills the header, the Search button and Explore the map, always with #353535 text, never white. [Measured]
  2. Dark gray, not black. #353535 is the text color everywhere, with #444444 and #646464 for secondary text. [Measured]
  3. Roboto only. Roboto at 400, 500 and 700, with bold 16px section headings rather than large ones. [Measured]
  4. 6px everywhere. Buttons, fields, nav items and icon frames use 6px corners. [Measured]
  5. Lime wash accents. Icon frames and the selected tab use a pale lime #e5f9c0. [Measured]

Source for this file: the home page with its search bar, the London city page and a not-found page (the help address no longer exists), measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. The site redirected to its United States edition for the region we browse from. FlixBus's component library shows in the page markup, but its documentation is not public. Results and checkout were not measured. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Flix lime#97d700 with #353535 textHeader, Search, Explore the map, Get the App [Measured]
Lime wash#e5f9c0Icon frames, the selected Cities tab [Measured]
Text#353535, #444444All text [Measured]
Muted text#646464Helper text [Measured]
Link#0047deInline links, the app download prompt [Measured]
Canvas#ffffffSearch fields, cards [Measured]
Page#f7f7f7Sections [Measured]
Search bandblue #016ae7 at 12 percent (about #e0edfc on white)Behind the search bar [Measured]
Gray fill#e1e1e1Panels [Measured]
Borders#c8c8c8, #848484Fields and dividers [Measured]

Typography

Roboto at 400, 500 and 700. [Measured]

RoleDesktopMobileWeight
Error title38 on 4427.2 on 32700 [Measured]
Hero34 on 40.822 on 26.4700 [Measured]
Stat line32 on 48not measured700 [Measured]
City hero28 on 32not measured700 [Measured]
Title20.8 on 27.2not measured700 [Measured]
Section heading16 on 24same700 [Measured]
Body16 on 2412 on 18 for feature notes400 [Measured]
Button and nav16 on 24same500 [Measured]

Shape and spacing

6px is the house corner for buttons, fields, nav items and tiles, with 5 and 8 in a few places, 18 on one card and full pills for a few chips. [Measured] Buttons carry 5 to 8 by 12 padding, nav items 6 by 12 (18 by 12 in the 60 high header). [Measured]

Iconography and motion

Icons sit in 42px lime wash frames with a 6px corner. [Measured] Motion was not measured. [Inferred]

Themes

Light only. The dark color scheme pass changed nothing. [Measured]

Platform: iOS

How the FlixBus iOS app looks and behaves was not captured. FlixBus's component library is not documented in public, 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 search, trips and the account is expected. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A lime Search or Book button with dark text. [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 lime, the dark gray text and the 6px corners with the web. [Inferred]

Platform: Android

How the FlixBus Android app looks and behaves was not captured. FlixBus's component library is not documented in public, 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 search, trips and the account is expected. [Inferred]

Main action

Expected on Android: Floating action button.

A lime Search or Book button with dark text. [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 lime, the dark gray text and the 6px corners with the web. [Inferred]

Platform: Web

The home page with its search bar, a city 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 60 high lime header with Plan Your Journey, Service, Manage My Booking and Trip Tracker as 36 high items with a 6px corner, and a language menu. On mobile the items collapse and a small lime "Get the App" button sits in an app banner. [Measured]

Main action

Expected on Web: Page-level button.

A lime #97d700 Search button with dark gray 16px medium text and a 6px corner, 36 high on desktop and 44 on mobile, at the end of the search bar. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

The search bar holds From and To fields, a Departure date button and a Passengers and Bikes button, each white with a 6px corner, 36 high on desktop and 42 to 44 on mobile. The bar itself is a white 84 high panel with a soft shadow. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that step down at the mobile width. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Search fields and the button are 42 to 44 high on mobile and 36 on desktop. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Icons sit in lime wash frames. [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.

A conventional booking site where the search bar stacks into full-width rows on mobile and grows to touch size. [Measured]

Cross-platform consistency

Consistent across platforms: the lime with dark text, Roboto and 6px corners. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Put dark gray #353535 text on lime, never white.
  • Use 6px corners for every control.
  • Keep section headings small and bold (16 at 700).
  • Use the pale lime wash for icon frames and selected tabs.

Don't

  • Don't use black text. Use #353535.
  • Don't round buttons into pills.
  • Don't use lime for body links. Links are blue #0047de.

Known Gaps

  • Search results, seat choice, checkout and the account were not measured, and the help address returned a not-found page.
  • The site redirected to its United States edition for the region we browse from, so other editions may differ.
  • The iOS and Android apps were not captured, and FlixBus's component library is not documented in public, so every mobile topic is inferred.
  • Motion and modals were not measured.
  • The search band is a translucent blue. The hex here is that tint flattened on white.
  • Account deletion and store policy rules were not verified.