What is British Airways' primary brand color?

British Airways' primary brand voltage is Midnight Blue (#011e41) — a deep, fully-saturated navy that appears as the top-nav background, the hero canvas on most marketing sections, and the fill of every primary CTA button. Unlike most airlines that hold their blue in reserve for accents while building on white, BA uses the navy as the dominant architectural tone. Speedbird Red (#eb2226) is the secondary brand mark — visible in the wordmark's chevron underline and the Speedbird tail logo — but is used so sparingly in digital surfaces that it appears primarily on sale-price callouts and error states.

What typeface does British Airways use?

British Airways' marketing and booking surface runs MyliusModern — a proprietary rounded grotesk developed exclusively for BA. It appears at weight 400 across every display and heading tier, and at weight 300 for body paragraphs and captions. There is no bold (700+) weight used in the marketing chrome — the 42px display h1 sits at weight 400, and emphasis is achieved through size and color contrast rather than weight. The declared fallback stack walks Helvetica, Arial, and sans-serif. Inter or DM Sans at weights 300–400 are the closest open-source substitutes; the proportions are similar and the rounded counter shapes transfer reasonably at the 18–24px body range.

How does British Airways represent cabin classes in its design system?

British Airways uses the Midnight Blue (#011e41) as the structural tone for all cabin-class indicators in the booking flow — Economy, Premium Economy, Club World (Business), and First are distinguished by typographic label and position within a horizontally-segmented selector component rather than by distinct fill colors. The gold accent (#b8985a) surfaces only in Executive Club loyalty tier indicators (Gold card, Gold Guest List) and in the Avios points currency displays, not in cabin-class product differentiation. The system avoids per-cabin color coding in the booking chrome, keeping the navy as the single structural signal throughout.

What corner-radius values does British Airways use?

British Airways runs a tight, conservative radius scale. The dominant values are 4px (inputs, dropdowns, small surface chips) and 8px (larger content cards, dialog panels). The booking search form tiles use 4px radius; destination cards and feature panels use 8px. There is no 12px or 16px middle tier — the system skips from 8px directly to fully circular for avatar badges (50% radius) and select loyalty-tier chips which use a pill treatment at ~100px radius. The overall character is close-cropped and transactional; the geometry matches BA's broader design posture of confidence through restraint rather than approachability through soft rounding.

How does British Airways use the gold accent in its Executive Club system?

The gold accent (#b8985a) surfaces exclusively in Executive Club loyalty contexts — the Gold membership card indicator, the Gold Guest List tier badge, and Avios points currency labels. It does not appear in the primary booking chrome or marketing sections. The gold is a warm, slightly muted amber-gold rather than a bright yellow-gold, reading as aspirational without competing with the Speedbird Red or the Midnight Blue. The Executive Club silver tier uses a mid-grey (#8a8a8a) rather than a cool metallic; the platinum tier uses a cooler silver-grey. The loyalty palette is kept fully separate from the booking and marketing chrome.

British Airways Design System

British Airways' marketing and booking design system as a DESIGN.md file.

About British Airways DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source britishairways.com

Travel & Hospitality

British Airways' digital surface is built on a single high-contrast axis: Midnight Blue against white, with almost nothing in between. The top-nav is an unbroken dark navy bar. The hero sections run the same navy as a full-bleed canvas. The primary booking CTA carries the same navy fill. Speedbird Red (#eb2226) is held so tightly in reserve that the system functions as a monochrome duotone until a sale badge or an error state appears. Where most flag carriers (Lufthansa, Air France, Singapore Airlines) use their brand color as a secondary accent against a white page, British Airways makes the navy the page — it is the header, the hero, the button, the cabin-class chip, and the progress bar. The single chromatic act of restraint that defines the system is how rarely the red appears despite being half of the brand logo.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 16 color tokens organized into a deep navy brand tier, a single Speedbird Red accent, structural whites and warm greys, semantic status tones, and the gold loyalty accent that surfaces in the Executive Club tier. Twelve typography tokens run MyliusModern — BA's proprietary rounded grotesk — from 42px display at weight 400 down to 12px captions, with Helvetica and Arial as declared fallbacks. Six radius tokens cluster tightly at 4–8px; the only exceptions are fully circular avatar badges and select pill-shaped loyalty chips. Fourteen component definitions cover the dark primary button, the booking search form, hairline-bordered destination cards, the cabin-class tier selector, and the frequent-flyer tier badge.

Feed this file to Claude or Cursor and it reproduces British Airways' specific moves: dark navy as surface architecture rather than CTA accent, MyliusModern-equivalent typography at restrained weights, tight 4–8px radius language, and the Speedbird Red appearing only at semantic moments — never decoratively. The most distinctive borrowable move is the "navy as canvas" pattern — treating the primary brand color as a structural surface rather than a highlight. This only works when the brand color is dark enough to carry text; the midnight blue at full saturation passes WCAG AA against white at 56px with comfortable margin.

What makes it distinct

Midnight Blue as structural chrome#011e41 carries the top-nav, hero bands, primary CTAs, and cabin-class indicators; the brand color is architecture, not accent
MyliusModern at weight 400BA's proprietary rounded grotesk runs every display tier with no bold moment above 700; the headline sits at 42px / 400
Speedbird Red held in reserve#eb2226 appears only on sale-price callouts, badge indicators, and error states; 97% of the system is navy and white
Tight 4–8px radius scalecards, inputs, and dropdowns all use 4px or 8px; no pill or large-radius surface exists in the marketing chrome
Warm-grey secondary canvas#f5f5f5 separates section bands without introducing a chromatic note, keeping the navy / white contrast uncontested

Live at britishairways.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

britishairways.com

Explore British Airways

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

British Airways design system FAQ

Common questions about British Airways's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

British Airways — official site

British Airways' public marketing and booking site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.