BAgel

British Airways: global experience language

BAgel is our single, flexible design system for all of our digital experiences. It helps us create consistency across every touchpoint - whether that's for the web, phone apps, or even the roof of T5

An input and button in the bottom of a card Our colour palette and examples of customer information in cards
An example of a card with an image and description of our club suite Example messages in success, error and info variants

Icons

Multi brand and multi theme functionality.

Built from the ground up, we’re made to scale.

Learn more about AirFrame for Web

Your gateway to the Caribbean

Flights to the Caribbean

Gate change for your flight today

Your flight to New York will now depart from Gate 1A

Multi brand and multi theme functionality.

Built from the ground up, we’re made to scale.

Learn more about AirFrame for Web

Your gateway to the Caribbean

Flights to the Caribbean

Gate change for your flight today

Your flight to New York will now depart from Gate 1A

Themes

Mylius Modern - Our identity in your language

An animation displaying the phrase 'A British Original' translated into various languages. The animation alternates between different characters representing each language in which 'A British Original' is shown.

Getting started

Get access and become familiar with BAgel to start building.

Designing

Get going with BAgel and learn our design guidelines and get access to Figma and tools.

Developing

Setup your environment, get access to components and learn about accessibility and implementation.

Our guiding principles

Our design principles are easy to remember and actionable pieces of advice. These should be used to guide your direction through the creative process.

Inclusion is paramount

Start by designing an inclusive and accessible experience and let the final form shape around it.

Minimalism but never at the expense of experience

A clean and minimal user interface is a pillar of our visual language. Minimalism, however, should never be at the cost of the user's experience. Form always comes after function.

Evolution not revolution

Constant iteration on BAgel ensures we stay current with trends, and standards. However, excessive or isolated changes can harm continuity, accessibility, and performance. Changes must be scalable and beneficial to the entire system

GitHub Storybook Figma library Version 3 release guide Release history BAgel helper QA process