---
version: alpha
name: "American Airlines"
website: "https://www.aa.com"
description: >-
  The world's largest airline by fleet size runs a marketing and booking surface anchored on a medium cobalt blue (#0078d2) that carries every primary CTA, active state, link, and interactive accent — while a near-black charcoal (#2c2c2c) handles all editorial body text and headings against a pure white canvas. Typography runs American Sans (a proprietary humanist sans commissioned by AA in 2017) at weight 400 for body and 700 for CTAs and headings, with the display tier sitting at 40–48px and standard booking inputs at a 44px height; corner-radius language is conservative at 4–8px throughout with no pill surfaces, reflecting the transactional character of a multi-leg booking interface over a consumer lifestyle aesthetic.

seo:
  title: "American Airlines Design System for React — AA Blue, American Sans, 16 components"
  metaDescription: "American Airlines' marketing and booking design system as a DESIGN.md file. AA Blue #0078d2 brand voltage, American Sans proprietary typeface, 16 color tokens, 16 components. For React, Next.js, and AI tools."
  highlights:
    - "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 only — the 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 throughout — no pill surfaces, no large-radius cards; the booking interface reads transactional, not consumer-lifestyle"
    - "Extraction note — aa.com returned an Akamai Access Denied page; tokens are grounded in published brand documentation and publicly available design-system references"
  tags:
    - "Travel & Hospitality"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.

  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.aa.com"
      title: "American Airlines — official site"
      description: "American Airlines' public marketing and booking site — the source of truth for the live tokens referenced in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is American Airlines' primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typeface does American Airlines use?"
      answer: "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."
    - id: "blue-ubiquity"
      title: "Why does AA Blue appear on every interactive element rather than being held in reserve?"
      answer: "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."
    - id: "aadvantage-palette"
      title: "How does the AAdvantage loyalty system use color?"
      answer: "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."
    - id: "booking-form-design"
      title: "How is the American Airlines flight-search form structured?"
      answer: "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."

mockups:
  - "marketing-hero"
  - "checkout-flow"

colors:
  primary: "#0078d2"
  primary-hover: "#005ea6"
  primary-pressed: "#004c8c"
  primary-light: "#cce4f7"
  accent: "#c00000"
  accent-hover: "#990000"
  gold: "#c8972e"
  platinum: "#8a96a8"
  ink: "#2c2c2c"
  ink-muted: "#6b6b6b"
  ink-subtle: "#999999"
  canvas: "#ffffff"
  surface-1: "#f4f4f4"
  hairline: "#d9d9d9"
  success: "#217346"
  error: "#c00000"

typography:
  display-xl:
    fontFamily: "\"American Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 56px
    letterSpacing: "-0.5px"
  display-lg:
    fontFamily: "\"American Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 48px
    letterSpacing: "-0.4px"
  heading-md:
    fontFamily: "\"American Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 32px
    letterSpacing: 0
  heading-sm:
    fontFamily: "\"American Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 26px
    letterSpacing: 0
  body-lg:
    fontFamily: "\"American Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0
  body-md:
    fontFamily: "\"American Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-sm:
    fontFamily: "\"American Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  label-md:
    fontFamily: "\"American Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: 0
  caption:
    fontFamily: "\"American Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0
  button-md:
    fontFamily: "\"American Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "2px"
  sm: "4px"
  md: "8px"
  lg: "12px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "10px 24px"
    height: "44px"
    border: "0"
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "10px 24px"
    height: "44px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "10px 24px"
    height: "44px"
    borderColor: "{colors.primary}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "0px 24px"
    height: "56px"
    borderColor: "{colors.hairline}"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "8px 12px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "16px"
    borderColor: "{colors.hairline}"
  card-flight-result:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "16px 24px"
    borderColor: "{colors.hairline}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "10px 16px"
    height: "44px"
    borderColor: "{colors.hairline}"
  text-input-focused:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "10px 16px"
    height: "44px"
    borderColor: "{colors.primary}"
  search-tab:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "12px 16px"
    height: "44px"
  search-tab-active:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "12px 16px"
    height: "44px"
    borderColor: "{colors.primary}"
  aadvantage-badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-md}"
    rounded: "{rounded.xs}"
    padding: "2px 8px"
  footer:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    padding: "48px 24px"
---

## 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

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 48px | 700 | 56px | Marketing hero headlines |
| `{typography.display-lg}` | 40px | 700 | 48px | Section display headings |
| `{typography.heading-md}` | 24px | 700 | 32px | Card section titles, h2 |
| `{typography.heading-sm}` | 18px | 700 | 26px | h3, feature sub-heads |
| `{typography.body-lg}` | 18px | 400 | 28px | Lead editorial paragraphs |
| `{typography.body-md}` | 16px | 400 | 24px | Default running text, form body |
| `{typography.body-sm}` | 14px | 400 | 20px | Captions, flight-result metadata |
| `{typography.label-md}` | 14px | 700 | 20px | Form labels, status chip text |
| `{typography.caption}` | 12px | 400 | 16px | Fine print, booking footnotes |
| `{typography.button-md}` | 16px | 700 | 24px | CTA button labels |

### 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.