American Airlines Design System

Overview

American Airlines' booking interface is organized around a single interactive vocabulary. Blue as affordance signal: where Delta uses deep red as a hero canvas and United layers navy gradient backgrounds, American runs a white canvas with AA Blue (#0078d2) as the exclusive signal for every interactive affordance — primary buttons, active tabs, inline links, focus rings, seat-map selection highlights, and progress indicators. The flag-brand physical mark uses all three flag colors; the booking surface consolidates to one.

The logic is information density, not brand expression. A flight-search results page on aa.com presents 40–80 individual interactive elements — filter toggles, fare-class selectors, sortable column heads, expandable flight details, seat-map grid cells. Using blue consistently as the "interactive" signal means the eye can scan the dense grid rapidly for actionable affordances. Where most airlines add per-section chromatic variety (Delta uses red headers, red buttons, and blue links simultaneously), American's single-voltage discipline converts cognitive load into triage speed.

Typography runs American Sans — a proprietary humanist sans commissioned in 2017 from Dalton Maag, narrower than Helvetica at comparable weights and designed to hold legibility in tight booking grids. The weight stack is binary: 400 for editorial, 700 for action and heading. Unlike the three-weight Qantas system or Cloudflare's 500-weight editorial display, American Sans allows no weight-500 or -600 intermediate — emphasis is either 400 (reading) or 700 (acting). Reading or acting, nothing in between.

Key Characteristics:

• AA Blue (#0078d2) as exclusive interactive vocabulary — every affordance signal on the booking surface shares this single cobalt; the system has no secondary interactive color.
• AAdvantage Red (#c00000) held to loyalty contexts — tier badges, promotional loyalty banners, and the AAdvantage program wordmark only; never as a booking-interface interactive color.
• American Sans at weight 400 / 700 only — the binary weight stack makes editorial vs. action visually unambiguous.
• Tight 4–8px radius throughout — no pill surfaces; the conservative geometry reflects the transactional character of the booking interface.
• White canvas with no hero fill — the flight search form sits on a white page without a colored background canvas; booking entry is functional, not atmospheric.
• Hairline-bordered flight-result cards at 1px {colors.hairline} — depth comes from card borders, not shadow; the system has minimal box-shadow.
• Note: aa.com returned an Akamai bot-defense page during extraction; tokens are grounded in published brand documentation and design-system references from the 2017 rebrand and subsequent updates.

Colors

Brand Interactive

• AA Blue ({colors.primary} — #0078d2): the single interactive voltage — every clickable element on the booking interface uses this medium cobalt. Appears as CTA fill, active-tab indicator, link text, focus ring, and seat-map selection highlight. The frequency across the full booking surface is very high; the marketing page shares the same token for all primary actions.
• AA Blue Hover ({colors.primary-hover} — #005ea6): a one-step darker cobalt for hover and active states on primary interactive elements. The darker variant maintains the blue vocabulary while confirming interactivity.
• AA Blue Pressed ({colors.primary-pressed} — #004c8c): the deepest blue for pressed confirmation states on CTAs and toggle-active surfaces.
• AA Blue Light ({colors.primary-light} — #cce4f7): a very light cobalt tint used for selected-row highlight fills in flight-result grids and the subtle background of active-state form fields.

Brand Accent

• AAdvantage Red ({colors.accent} — #c00000): the AAdvantage program's brand color — a flag red distinct from the cobalt interactive blue. Appears on the AAdvantage logo mark, tier badge backgrounds, and select promotional banners. Not used as an interactive affordance — no buttons or links use the red in the booking chrome.
• Accent Hover ({colors.accent-hover} — #990000): the deeper red for hover states on the small number of red-tinted surfaces.

Loyalty Tier

• Gold ({colors.gold} — #c8972e): a warm amber-gold for AAdvantage Gold status indicators, boarding pass tier badges, and the AAdvantage Gold card visual identity.
• Platinum ({colors.platinum} — #8a96a8): a cool silver-grey for the AAdvantage Platinum and Platinum Pro tier — reads as metallic without requiring a gradient.

Structural

• Ink ({colors.ink} — #2c2c2c): the dominant editorial text color — every heading, body paragraph, and nav label. A near-black with slight warmth; not pure black, allowing the blue interactive elements to hold maximum contrast.
• Ink Muted ({colors.ink-muted} — #6b6b6b): secondary text for captions, form hints, inactive tab labels, and footer metadata.
• Ink Subtle ({colors.ink-subtle} — #999999): the lightest text tier — placeholder text, disabled labels, and the very small metadata rows in flight-result cards.
• Canvas ({colors.canvas} — #ffffff): the page floor — the marketing surface, booking form, and flight-results page all sit on white.
• Surface 1 ({colors.surface-1} — #f4f4f4): the footer background, the secondary section alternating band, and the input-disabled fill.
• Hairline ({colors.hairline} — #d9d9d9): the card border tone — 1px rules on flight-result cards, form field outlines in resting state.

Semantic

• Success ({colors.success} — #217346): forest green for booking confirmation, seat-selection success, and positive status indicators.
• Error ({colors.error} — #c00000): shares the AAdvantage Red value — error states inherit the flag red, giving validation errors the same semantic weight as the brand's loyalty signal.

Typography

Font Family

The system runs American Sans across every tier — a humanist sans commissioned specifically for American Airlines in 2017. The typeface was designed with slightly narrowed letterforms compared to Helvetica, tuned for the information-dense environments of flight search results, boarding passes, and mobile booking interfaces. Fallbacks walk "Helvetica Neue", Helvetica, Arial, sans-serif.

Hierarchy

Principles

The binary weight split — 400 for reading, 700 for acting — reflects the booking interface's task orientation. A user reading departure times and comparing fares needs the text to recede; a user triggering the "Search" CTA or selecting a seat needs the affordance to assert. American Sans holds this split without a semibold intermediate: the contrast between 400 and 700 is sharp enough that scanning a dense results grid reveals the structural hierarchy at a glance.

Unlike Cloudflare's editorial magazine treatment at weight 500 or Qantas' light 300 display at large sizes, American's display tier runs weight 700 — the airline's marketing voice is declarative rather than considered. "Nonstop flights from New York" at 48px / 700 is a statement, not an invitation.

Font Substitutes

American Sans is proprietary. Source Sans Pro at weights 400/700 is the closest geometric-humanist match for the narrowed proportions. Nunito Sans at the same weights preserves the slightly rounded terminals. Both fallbacks should match the tight display tracking (-0.5px at 48px) from the extracted patterns.

Layout

Spacing System

• Base unit: 8px, with 4px as the secondary module for tight internal padding.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px · {spacing.3xl} 64px.
• Card padding: {spacing.lg} (24px) horizontal, {spacing.base} (16px) vertical on flight-result cards.
• Form field height: 44px throughout — the booking search inputs, CTA button, and dropdown selectors all share the same 44px height band for consistent visual alignment.

Grid and Container

• Max content width: ~1200px for the top-nav and footer; ~1000px for the booking search form and flight-results grid.
• Search form: a single-row horizontal layout at desktop — From / To / Dates / Passengers / Class fields in a sequential row with the cobalt Search button anchoring the right end.
• Flight results: a single-column list of flight-result cards, each showing departure/arrival time, duration, stops, airline, and fare-class price in a dense horizontal row layout.
• Marketing editorial: 3-column destination and benefit grids for the marketing site, with photography cards and text below.

Rhythm

The booking experience is density-first. Unlike the atmospheric photography-band rhythm of Qantas or the navy-canvas alternation of British Airways, American's page is organized for scan speed — search at top, filters left, results right. Whitespace is used to separate cards and sections rather than to create atmospheric breathing room.

Elevation

The system uses hairline borders as the primary depth signal, consistent with the transactional character of the interface. Flight-result cards sit on the white canvas with a 1px {colors.hairline} border. Dropdowns and modal overlays use a rgba(0,0,0,0.15) shadow at 4–8px blur — visible but minimal. The {colors.primary-light} (#cce4f7) fill on selected rows replaces shadow for in-list selection states.

Shapes

The radius scale is tight and transactional:

• {rounded.none} 0px — section bands, the top-nav bar, the horizontal search form.
• {rounded.xs} 2px — AAdvantage tier badges and the smallest status chips.
• {rounded.sm} 4px (dominant) — all form inputs, the search CTA button, dropdown menus, and flight-result cards. The dominant radius across the interface.
• {rounded.md} 8px — larger content cards, modal dialog panels, the filter sidebar container.
• {rounded.lg} 12px — the most generous surface in the system; used sparingly on featured promotional cards.
• {rounded.full} 9999px — circular avatar icons and status dot indicators only.

The absence of a pill surface is the defining shape characteristic. Where Qantas' nav links run at 800px and Cloudflare's CTAs use full-pill rounding, American's buttons and CTAs sit at a precise 4px. The tight radius communicates transaction-first rather than experience-first.

Components

button-primary — AA Blue {colors.primary} fill, white text, weight-700 label, {rounded.sm} 4px radius, 10×24px padding, 44px height. "Search," "Book now," and "Continue" are the canonical instances across the booking flow. The cobalt on white against the white canvas creates the highest-contrast affordance on any page section.

button-primary-hover — Darkens to {colors.primary-hover} (#005ea6) on hover — a visibly deeper cobalt that confirms interactivity.

button-secondary — White {colors.canvas} fill with a 1px AA Blue border and cobalt text. Used for "Learn more," "Manage booking," and secondary informational actions throughout the booking flow.

top-nav — White {colors.canvas} surface, near-black {colors.ink} text, 56px height, 1px {colors.hairline} bottom rule. The AA eagle-and-bar logo mark at left; primary navigation links (Book / AAdvantage / Travel info / About us) center; login and the cobalt "Book now" CTA right.

nav-link — Transparent background, near-black ink text at {typography.body-md} 16px / 400, 8×12px padding. Active state uses an AA Blue bottom border (not a background fill), maintaining the single-signal discipline.

hero-heading — Near-black ink text (not navy, not cobalt), {typography.display-xl} 48px / 700. The marketing hero headline — the display tier uses the darkest structural tone rather than the brand blue, keeping the blue reserved for interactive elements.

body-paragraph — Ink {colors.ink} text at {typography.body-lg}. The editorial lead paragraphs and marketing copy.

body-paragraph-muted — Ink-muted {colors.ink-muted} text at {typography.body-md}. Secondary and caption copy throughout.

card — White canvas fill, 1px {colors.hairline} border, {rounded.md} 8px radius, 16px padding. The standard content card — used for destination features and benefit cards on the marketing page.

card-flight-result — White canvas fill, 1px {colors.hairline} border, {rounded.sm} 4px radius, 16×24px padding. The dense flight-result card showing departure/arrival, duration, stops, and per-class pricing. The tighter 4px radius reflects the transaction-level precision required.

text-input — White canvas fill, 1px {colors.hairline} border, {rounded.sm} 4px radius, 10×16px padding, 44px height. All booking search fields share this component.

text-input-focused — Same as text-input but border upgrades to 2px {colors.primary} AA Blue. The blue focus ring is consistent with the interactive-signal discipline — focus uses the same color as selection and action.

search-tab — Transparent background, ink-muted text at {typography.body-md}, no border, 12×16px padding, 44px height. The "Round trip," "One way," "Multi-city" inactive tab labels.

search-tab-active — Transparent background, AA Blue text at {typography.button-md} 16px / 700, 2px AA Blue bottom border, 12×16px padding, 44px height. The active tab uses blue text and a blue underline rather than a blue fill — consistent with the "blue indicates interactive" principle without filling the tab surface.

aadvantage-badge — AAdvantage Red {colors.accent} fill, white text at {typography.label-md} 14px / 700, 2px {rounded.xs} radius, 2×8px padding. The AAdvantage program tier badge — the only red fill element in the booking chrome.

footer — Light grey {colors.surface-1} fill, muted {colors.ink-muted} text at {typography.body-sm}, 48×24px padding. The footer uses a grey tint rather than a dark canvas — American's footer is informational rather than brand-completing.

Do's and Don'ts

Do keep AA Blue as the exclusive interactive-affordance signal. The system's information-density advantage depends on every clickable element sharing the same cobalt. Adding a second interactive color (red links for loyalty, green for confirmation actions) would require users to learn two scanning heuristics instead of one.

Do run display headings at weight 700. Unlike Qantas' weight-300 light display or Cloudflare's weight-500 editorial, American's marketing voice is declarative — the 48px / 700 display heading reads as authoritative statement, which fits a flag carrier with the world's largest fleet.

Do use {colors.primary-light} (#cce4f7) for selected-row fills in flight-result grids rather than the full cobalt blue. The light tint marks the selected state without making the row appear to be a button; the primary blue would create false affordance in a list context.

Do maintain the 44px input field height across all booking form elements. The consistent height creates a single-register horizontal search form that aligns buttons and inputs without the visual fragmentation that occurs when form elements vary by ±4px.

Don't use AAdvantage Red (#c00000) as an interactive element color — no buttons, no links, no focus rings should use the red. The flag-red is a loyalty-program signal; using it on interactive elements collapses the semantic distinction between "this is the loyalty program" and "this is interactive."

Don't introduce a pill or large-radius surface. The 4px radius on CTAs and inputs is the defining shape signal of the booking interface. Rounding primary buttons to 50px or beyond shifts the register from "I am booking a flight" to "I am using a consumer lifestyle app" — the tonal mismatch would undercut the AA Blue's authority as an action color.

Don't add a background hero fill behind the booking search form. AA's marketing and booking entry point sits on a white canvas; a colored hero background (cobalt fill, dark grey, photographic) would add atmospheric complexity to a form that benefits from maximum focus. United's dark hero and Delta's red hero both add 300–400ms of visual processing overhead relative to American's white-canvas entry point.

Don't use {colors.ink} (#2c2c2c) for decorative purposes — it is a text-only token. For dark background surfaces, use a dedicated surface token. The charcoal ink at #2c2c2c creates extreme contrast against white at body sizes; applying it as a section-band fill produces the same high-contrast darkness as the brand mark without the structural token clarity.

Known Gaps

• Extraction limitation: aa.com returned an Akamai bot-defense page (Access Denied) during capture. No CSS variables or computed styles were extracted from the live site. All tokens are grounded in the published 2017 AA rebrand documentation and publicly available design-system references; they are well-documented but not live-page verified.
• Seat-map component: the interactive seat-selection map is one of the most complex components in the booking system — cells use AA Blue selected states, grey unavailable fills, and yellow/gold first-class seat accents — not represented in this spec.
• Mobile app: the aa.com mobile site and the American Airlines iOS/Android app carry a slightly different component set (bottom-nav tab bar, full-screen modal overlays, swipe gestures) not represented here.
• Club Admirals lounge branding: the Admirals Club lounge system uses a distinct visual identity (darker navy, aspirational photography) separate from the booking chrome.
• AAdvantage full tier system: Executive Platinum (#8b1a1a deep red) and Concierge Key (an unpublished top tier) have distinct visual treatments in the loyalty program not captured here.
• Motion: the booking flow uses progress-stepper animations, seat-map load transitions, and price-update spinners; easing and duration values are not expressed in the static token spec.