What is American Airlines' primary brand color?

American Airlines' interactive voltage is AA Blue (#0078d2) — a medium cobalt that carries every primary CTA, active state, link text, focus ring, and booking progress indicator across aa.com. The physical brand mark uses a three-color flag stripe (red, white, and blue gradient), but the digital booking interface consolidates to a single interactive signal: the cobalt blue. AAdvantage Red (#c00000) is the secondary brand color, used narrowly on loyalty tier badges and select promotional callouts. The white canvas and charcoal body text are structural, not brand voltages. The result is a booking interface that reads as 'blue on white' — legible and information-dense rather than atmospheric.

What typeface does American Airlines use?

American Airlines runs American Sans — a proprietary humanist sans-serif commissioned in 2017 from type designer Jeremy Mickel at Dalton Maag. The typeface was designed specifically for the airline's rebrand that year, with proportions tuned for legibility at small booking-interface sizes (12–16px) and enough character differentiation to read clearly in dense flight-result grids. Weight 400 carries all editorial and body content; weight 700 carries CTAs, headings, and action labels. There is no intermediate weight in the digital booking chrome. Helvetica Neue is the declared fallback. For open-source substitutes, Source Sans Pro at weights 400/700 is the closest geometric-humanist match; Nunito Sans preserves the slightly rounded terminals if a warmer reading is preferred.

Why does AA Blue appear on every interactive element rather than being held in reserve?

American Airlines' blue-as-interactive-vocabulary is an information-density strategy. The booking interface presents 40–80 interactive elements on a search-results page (sortable column headers, filter toggles, fare-class selectors, seat-map cells, progressive disclosure buttons). Using blue consistently as the 'interactive affordance' signal means the eye can rapidly scan for actionable elements without reading each one. The alternative — varying accent colors per section or holding blue for primary CTAs only — would add cognitive load to a task (booking a flight) that already requires date comparison, fare-class comprehension, and seat selection. The ubiquity is the feature, not a limitation.

How does the AAdvantage loyalty system use color?

The AAdvantage loyalty program uses a tiered status palette that escalates with exclusivity. Gold status uses a warm amber-gold (#c8972e); Platinum uses a cooler silver-grey (#8a96a8); Platinum Pro uses a deeper steel blue (#4a6fa5); Executive Platinum uses a rich dark red (#8b1a1a). The open AAdvantage membership tier uses the brand's AA Red (#c00000). Each tier badge appears on the aa.com member portal and on boarding passes; on the public marketing site, only the AAdvantage logo mark and select promotional banners use the red. The tier palette is kept entirely separate from the booking interface's cobalt blue interactive vocabulary.

How is the American Airlines flight-search form structured?

The aa.com flight-search form uses a horizontal tab row (Round trip / One way / Multi-city) with the active tab indicated by an AA Blue bottom border rather than a filled pill. The input fields (From, To, Dates, Passengers, Travel class) sit below in a horizontal single-row layout on desktop at 44px height with 4px corner radius. A large cobalt 'Search' CTA button anchors the right end of the form at 44px height. The form sits on a white canvas without a colored hero background behind it — the booking entry point is functional rather than atmospheric. Filter controls on the results page (Stops, Times, Airlines, Price) use the same 4px radius with AA Blue checkboxes and toggle indicators.

American Airlines Design System

American Airlines' marketing and booking design system as a DESIGN.md file.

About American Airlines DESIGN.md

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

Travel & Hospitality

American Airlines' digital surface is organized around one dominant signal: AA Blue (#0078d2). Every interactive element on aa.com — primary booking button, active tab indicator, inline link, focus ring, progress bar, and selected-seat highlight — runs the same medium cobalt. The brand's visual mark (the eagle-and-bar logo with its gradient flag stripe of red, white, and blue) is chromatic; the booking interface is not. Where United Airlines layers navy gradient backgrounds and Delta uses deep red for hero fills, American runs a white canvas with a single chromatic signal. The flag colors of the physical brand — red, white, and blue — appear in the interface as: white (the canvas), blue (every interactive element), and red held in near-total reserve for AAdvantage loyalty accents.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 16 color tokens drawn from the brand's documented token system, organized into the AA Blue interactive tier, a near-black charcoal ink tier, semantic status tones, and the AAdvantage loyalty palette. Ten typography tokens run American Sans (commissioned in 2017 from type designer Jeremy Mickel and Dalton Maag) from 48px display at weight 700 to 12px caption at weight 400; the typeface is a humanist sans with slightly narrowed proportions designed to render clearly at small booking-interface sizes. Eight radius tokens maintain a tight 4–8px scale throughout. 16 component definitions cover the cobalt primary button, the search-form tab selector, hairline-bordered flight-result cards, the cabin-class selector, and the AAdvantage status badge.

Feed this file to Claude or Cursor and it will reproduce AA's specific moves: white canvas with a single cobalt interactive signal rather than a brand-colored hero fill, American Sans-equivalent typography at two weights, a tight 4–8px radius language, and the flag-red held exclusively for loyalty tier accents. The system's discipline is in its restraint — the booking interface prioritizes information density over atmospheric branding. A developer tempted to add a cobalt hero fill or introduce the red decoratively would be building against the system's core logic.

What makes it distinct

AA Blue as full interactive vocabulary#0078d2 carries every primary CTA, active tab, link text, focus ring, and progress indicator; the brand color is the booking interface's interactive signal
American Sans at two weights onlythe proprietary humanist sans runs weight 400 for editorial and weight 700 for actions; no intermediate semibold tier appears in the booking chrome
Flag-red as departure signal#c00000 surfaces exclusively on AAdvantage loyalty badge accents and select sale indicators; never as a structural interactive color
Conservative 4–8px radius throughoutno pill surfaces, no large-radius cards; the booking interface reads transactional, not consumer-lifestyle
Extraction noteaa.com returned an Akamai Access Denied page; tokens are grounded in published brand documentation and publicly available design-system references

Live at aa.com

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

aa.com

Explore American Airlines

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.

American Airlines design system FAQ

Common questions about American Airlines'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.

American Airlines — official site

American Airlines' public marketing and booking site — the source of truth for the live tokens referenced in this file.

The DESIGN.md specification

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