Design System Inspiration of FlixBus

Overview

Visual Theme & Atmosphere

FlixBus is the long-distance bus network of Flix SE, a Munich travel-tech company. In its own words, Flix was “launched in 2013 in Munich” and has since carried more than 500 million travellers across more than 40 countries on five continents, through its brands FlixBus, FlixTrain, Greyhound and Kâmil Koç. Daniel Krauss, André Schwämmlein and Jochen Engert founded the company in 2011, anticipating the loosening of Germany’s passenger transport law; the first FlixBuses ran in February 2013. In January 2022 the parent company, Flixmobility, re-formed as a European company (SE).

The site is bright and practical: white ground, dark-grey #353535 text, and the lime #97d700 that marks everything Flix — header, primary button and icons. Type is Roboto, buttons are 6px rounded and 36px tall, and the search form is the first thing on the page.

What makes it worth reading:

• A public, versioned system. Honeycomb documents its tokens and components openly, and the live site matches: seven documented --flix-* colours are identical on flixbus.de. Controls carry the Honeycomb React version in their class names (hcr-btn-16-7-0).
• States as layers. Hover and press don’t change the colour. They lay a translucent black gradient over it — --flix-hover-layer-color at 6%, --flix-pressed-layer-color at 12% — so one rule works on any fill.
• One focus recipe. A white 4px halo inside a blue 2px outline (#016ae7), on buttons and navigation alike.

Primary tasks

• Search a trip: from, to, date, passengers.
• Find help, deals and bookings.

Brand Narrative

Flix grew from a Munich startup that bet on deregulated long-distance buses in 2013 into a travel group spanning buses and trains on five continents. It runs the brands on one system: Honeycomb ships themes for Flix and Kâmil Koç from the same tokens, and flixbus.de uses the documented values exactly. The interface is plain and quick — lime for the brand, grey for text, and states that darken rather than recolour.

Principles

• Lime means Flix. One brand colour, used on the things that matter.
• States are layers. One translucent rule for every fill.
• Documented equals shipped. The live tokens match the public styleguide.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle on flixbus.de: 96 root custom properties, 95 --flix-*. The remaining one is a component-internal spinner variable.

Brand and ink

• Brand (#97d700) — --flix-brand-primary-color, --flix-header-bg-color, --flix-button-primary-color.
• Foreground (#353535) — --flix-content-primary-color; body text (961 text elements), headings and button labels.
• Content secondary (#646464) — --flix-content-secondary-color.
• Canvas (#ffffff) · Background secondary (#f7f7f7).

Greens

UI primary #31a100 · light #5cc500 (the tablet navigation background) · dark #187d00 · Highlight #e5f9c0 (a pale lime tint).

Links and neutral

Link #0047de · Neutral #016ae7 (also the focus outline).

Greys

#444444 (grayscale 90) · #848484 (icons, input borders) · #c8c8c8 (lines) · #e1e1e1 (grayscale 30).

Status

Success #228f00 · Warning #ff5704 · Danger #dd2828 · AI #e100e1, a magenta named --flix-ai-color.

Typography

Font family

Roboto — --flix-font-family-primary: Roboto, Arial, sans-serif, self-hosted as woff2 in latin and cyrillic subsets. document.fonts loaded 400, 500 and 700.

Scale

--flix-font-size-h1 1.7rem · h2 1.3rem · h3 1.1rem · h4 1rem · primary 1rem (line 1.5rem) · small 0.875rem · fineprint 0.75rem. Weights: normal 400, semibold 500 (buttons and navigation), bold 700.

Layout

• --flix-page-max-width 1200px, --flix-page-min-width 320px; gutters 12px and 24px.
• Spacing runs in 6px steps: --flix-spacing-half 3px, -1 6px, -2 12px, -4 24px, -8 48px, -16 96px.
• Inputs are 36px on desktop and 44px on mobile (--flix-input-height-*).

Responsive Behavior

Only desktop was measured. Tokens declare mobile input height (44px) and a tablet navigation colour (#5cc500).

Elevation & Depth

--flix-primary-box-shadow: 0 6px 12px rgba(0,0,0,.06), 0 3px 18px rgba(0,0,0,.06), 0 3px 6px rgba(0,0,0,.18). Overlays use rgba(0,0,0,0.5).

Motion & Easing

The search button transitions background over 0.25s.

Components

Measured on the home page, focus read under a real Tab key, and a hover counted only when :hover matched. The consent banner (Usercentrics) was declined first.

• Search button — Suchen: #97d700, label #353535, radius 6px, 36px, 5px 12px, 16px/500. Hover adds a 6% black layer, press a 12% one; the lime value itself never changes. Focus: 0 0 0 4px #ffffff plus outline: 2px solid #016ae7.
• Navigation link — Plane Deine Reise, Hilfe: transparent, #353535, 6px, 36px, 16px/500. Same hover and press layers, same focus ring.
• Destination field — transparent, #353535, 16px/400. Focus changes nothing on the input itself.

Radius

--flix-border-radius-half 3px · -1 6px (buttons, --flix-primary-border-radius) · -2 12px.

States

Hover: a 6% black layer on the search button and navigation links. Press: 12%. Focus: white halo and blue outline; the destination field shows no change. Disabled elements use --flix-disabled-element-opacity 0.5 (not observed).

Do’s and Don’ts

Do

• Use lime #97d700 for the header and the main action, with #353535 labels on it.
• Draw hover and press as 6% and 12% black layers, not new colours.
• Use the white-halo, blue-outline focus ring everywhere.

Don’t

• Don’t change the label colour on lime; the live button keeps #353535.
• Don’t use the magenta --flix-ai-color #e100e1 as a general accent; its name ties it to AI.
• Don’t invent state colours per component — the layer does it.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#97d700 brand lime · #353535 ink · #646464 secondary · #f7f7f7 surface · #0047de link · #016ae7 focus · #31a100 UI green · #dd2828 danger · #ff5704 warning

Example Component Prompts

• “A 36px lime #97d700 button with a #353535 16px/500 Roboto label, 6px radius; hover adds a 6% black layer, press 12%; focus a white 4px halo inside a 2px #016ae7 outline.”
• “A white header link, #353535 16px/500, with the same hover layer.”

Governance

Known Gaps

• Contrast, nav-link. Text #353535 on #00000000 measures 1.71:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, input-destination. Text #353535 on #00000000 measures 1.71:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.