Colour
A key component of our brand. We use tones taken from our identity throughout the digital experience to create a distinctive, modern experience that can flex elegantly between loud and quiet.
How we use colour at British Airways
Our primitive colour pallete is intertwined throughout our design system. It visually underpins everything. Each colour serves a purpose, ensuring consistency, adaptability and accessibility across our digital real estate. The 500 version of the palette is always the base colour.
Primary colours
Primary Blue
Blue is a staple of our brand identity. We use blue for buttons and links and theming.
Blue 700
Focus CTA background
#234776
RGB(35, 71, 118)
Blue 600
Hover
#2C5791
RGB(44, 87, 145 )
Blue 500
CTAs and brand elements
#3468AD
RGB(52, 104, 173)
Blue 400
Backgrounds
#9EB7D8
RGB(158, 183, 216)
Blue 300
Backgrounds
#BECFE5
rgba(190, 207, 229)
Blue 200
Backgrounds
#DFE7F2
RGB(223, 231, 242)
Primary Red
Red is used primarily for error states and in places where we show sales.
Red 700
CTAs, and error
#8C160A
RGB(140, 22, 10)
Red 600
CTAs, and error
#AD1C0D
RGB(173, 28, 13)
Red 500
CTAs, and error
#CE210F
RGB(206, 33, 15)
Red 400
Backgrounds
#E7948C
RGB(231, 148, 140)
Red 300
Backgrounds
#EFB8B2
RGB(239, 184, 130)
Red 200
Backgrounds
#F7DBD9
RGB(247, 219, 217)
Primary Midnight Blue
Midnight blue is used for our main text colour on white backgrounds. We also use this pallete when designing for our Club World and Club Europe products (business class).
Midnight 700
Focus
#01122C
RGB(1, 18, 44)
Midnight 600
Hover
#021737
RGB(2, 23, 55)
Midnight 500
Text colour
#021B41
RGB(2, 27, 65)
Midnight 400
Backgrounds
#8692A4
RGB(134, 146, 164)
Midnight 300
Backgrounds
#AEB6C2
RGB(174, 182, 194)
Midnight 200
Backgrounds
#D7DBE1
RGB(215, 219, 225)
Primary Green
We use our primary green palette in instances of success and completion of tasks. We also use it occassionally when designing for sustainability / Better BA pieces.
Green 700
Focus
#00573C
RGB(0, 87, 60)
Green 600
Hover
#006C4A
RGB(0, 108, 74)
Green 500
Success
#008058
RGB(0, 128, 88)
Green 400
Backgrounds
#85C2AF
RGB(133, 194, 175)
Green 300
Backgrounds
#ADD6CA
RGB(173, 214, 202)
Green 200
Backgrounds
#D6EBE4
RGB(214, 235, 228)
The British Airways Club
These colours are used when referring to the Club tiers.
The Club Blue Light
#0546CD
rgb(5, 70, 205)
The Club Blue Dark
#05336E
rgb(5, 51, 110)
The Club Bronze Light
#B84517
rgb(184, 69, 23)
The Club Bronze Dark
#87331F
rgb(135, 51, 31)
The Club Silver Light
#6F7372
rgb(111, 115, 114)
The Club Silver Dark
#5F6160
rgb(95, 97, 96)
The Club Gold Light
#987000
rgb(152, 112, 0)
The Club Gold Dark
#805E00
rgb(128, 94, 0)
The Club Gold Guest List Light
#FFFFFF
rgb(255, 255, 255)
The Club Gold Guest List Dark
#E5E5E5
rgb(229, 229, 229)
The Club Premier Light
#1A1A1A
rgb(26, 26, 26)
The Club Premier Dark
#000000
rgb(0, 0, 0)
Greys and White
Used for borders, hint text and backgrounds.
Grey 700
Focus / Text on white
#70758F
RGB(35, 68, 118)
Grey 600
Hover
#989CAE
RGB(44, 87, 145)
Grey 500
Borders and backgrounds
#B7B9C6
RGB(52, 104, 173)
Grey 400
Borders and backgrounds
#CFD0D9
RGB(158, 183, 216)
Grey 300
Borders and backgrounds
#E7E8EC
RGB(223, 231, 242)
Grey 200
Borders and backgrounds
#F9F9FA
RGB(223, 231, 242)
White
Borders
#FFFFFF
RGB(255, 255, 255)
Colour accessibility
Colours are semantically baked into our components to pass accessibility contrast ratios. It's important not to override these colours as it risks us failing accessibility. As a rough rule of thumb, we've made sure that the 700 version of every colour, always passess contrast on the 200 version of every colour.
Theming
BAgel has pre defined and accessible themes that are applied to layouts. Every eligible component will automatically adapt it's colours depending on the theme.