American Color Palette & Design System
An in-depth exploration of the Aa color system. See how this carefully calibrated Grey palette drives brand recognition across general applications.
American Primary
American Accent
1. The Visual Identity of American
Color System Overview
American utilizes a high-contrast palette to distinguish itself in the travel sector. The core of this system is the primary color: #0078D2, often referred to as "American Blue". This shade was specifically chosen to maximize visibility on digital screens (sRGB gamut) while retaining vibrancy in print (CMYK).
Industry Psychology: Why American Picked Blue
The Blue spectrum is the color of trust, security, and logic. For American, this signals reliability and professionalism.
2. Brand Usage & Strategy
The American color palette is designed for high-contrast visibility across digital and physical mediums. Whether viewed on a high-brightness smartphone in California or a printed billboard in London, the primary color acts as a unified identifier.
3. UI Design & Application Guide
Thinking of using the American color palette in your next project? Here is a professional guide on how to apply these colors effectively for web and mobile interfaces.
Typography Recommendations
When using #0078D2 as a background, strict accessibility standards (WCAG) recommend using White (#FFFFFF) for your typeface to ensure maximum readability.
Adobe & Figma Workflow
Professional designers working in Figma or Adobe Creative Cloud can instantly apply this palette.
Instead of manually picking colors, we recommend creating a "Shared Style" in your design system library named American Primary.
This ensures consistency across all your travel related mockups and avoids the risk of accidental hex value drift.
4. Technical Color Data Table
For developers and designers, accuracy is non-negotiable. Below are the precise conversions.
| Color Name | HEX Code | RGB Values | CSS Variable |
|---|---|---|---|
| American Primary | #0078D2 | rgb(0, 120, 210) | var(--american-primary) |
| American Code 2 | #C90016 | rgb(201, 0, 22) | var(--american-color-2) |
5. CSS Implementation
Copy this CSS snippet to your :root to instantly implement the American brand styles.
:root {
--aa-primary: #0078D2;
--aa-color-2: #C90016;
}
Explore Related Brand Palettes
Compare American with other top brands in our database.