Color

Our palette is built around custom American Airlines Blue —a bright, energetic blue that serves as a strong, singular statement of our personality for brand recognition.

Usage

While we guarantee an aesthetically pleasing use of color, we place a higher value on clear communication. Our use of color should be rational and support the purpose of the content.

Since our brand lives predominantly on a white canvas, white space creates a clean, modern backdrop for our primary and secondary color palettes. Some components make use of the lighter grays to accomodate highlighted content.

Accessibility

Our color choices should be made with consideration of minimum contrast ratios that the WCAG 2.0 specifies for text and background colors according to their AA level.


Primary Colors

  • Brand Blue
     
    $brandBlue
    #0078D2
  • Dark Blue
     
    $darkBlue
    #00467F
  • Detroit Blue
     
    $detroitBlue
    #0061AB
  • Dark Red
     
    $darkRed
    #C30019
  • Green
     
    $green
    #008712
  • Orange
     
    $orange
    #D14904

Grays

  • Extreme Ultra Light Gray
     
    $extremeUltraLightGray
    #FAFBFB
  • Super Ultra Light Gray
     
    $superUltraLightGray
    #F5F7F7
  • Ultra Light Gray
     
    $ultraLightGray
    #EBEFF0
  • Halfway Light Gray
     
    $halfwayLightGray
    #E7ECEF
  • Light Gray
     
    $lightGray
    #D0DAE0
  • Gray
     
    $gray
    #9DA6AB
  • Medium Gray
     
    $mediumGray
    #627A88
  • Cadet Gray
     
    $cadetGray
    #536773
  • Dark Cadet Gray
     
    $darkCadetGray
    #465762
  • Dark Gray
     
    $darkGray
    #36495A

Secondary Colors

  • White
     
    $white
    #FFFFFF
  • Black
     
    $black
    #131313
  • Focus Color
     
    $focusColor
    #B0D1E8
  • Dark Orange
     
    $darkOrange
    #BE4204
  • Lucky Purple
     
    $luckyPurple
    #931982
  • Dark Green
     
    $darkGreen
    #007D10
  • Light Orange
     
    $lightOrange
    #FAAF00