--- 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 | Role | Value | Where | |------|-------|-------| | Flix lime | `#97d700` with `#353535` text | Header, Search, Explore the map, Get the App [Measured] | | Lime wash | `#e5f9c0` | Icon frames, the selected Cities tab [Measured] | | Text | `#353535`, `#444444` | All text [Measured] | | Muted text | `#646464` | Helper text [Measured] | | Link | `#0047de` | Inline links, the app download prompt [Measured] | | Canvas | `#ffffff` | Search fields, cards [Measured] | | Page | `#f7f7f7` | Sections [Measured] | | Search band | blue `#016ae7` at 12 percent (about `#e0edfc` on white) | Behind the search bar [Measured] | | Gray fill | `#e1e1e1` | Panels [Measured] | | Borders | `#c8c8c8`, `#848484` | Fields and dividers [Measured] | ### Typography Roboto at 400, 500 and 700. [Measured] | Role | Desktop | Mobile | Weight | |------|---------|--------|--------| | Error title | 38 on 44 | 27.2 on 32 | 700 [Measured] | | Hero | 34 on 40.8 | 22 on 26.4 | 700 [Measured] | | Stat line | 32 on 48 | not measured | 700 [Measured] | | City hero | 28 on 32 | not measured | 700 [Measured] | | Title | 20.8 on 27.2 | not measured | 700 [Measured] | | Section heading | 16 on 24 | same | 700 [Measured] | | Body | 16 on 24 | 12 on 18 for feature notes | 400 [Measured] | | Button and nav | 16 on 24 | same | 500 [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.