# American Eagle — Design System
> American Eagle Outfitters is a leading global specialty retailer offering high-quality, on-trend clothing, accessories, and personal care products at affordable prices.
- **Canonical:** https://uiuxskills.com/library/american-eagle
- **Source:** https://www.ae.com/
- **Category:** E-commerce & Retail
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 81%
- **License:** MIT
- **Last updated:** 2026-10-09T02:23:47.929Z

---

---
version: alpha
name: American Eagle
tagline: Denim Weather & Casual Style
description: >-
  American Eagle Outfitters is a leading global specialty retailer offering high-quality, on-trend
  clothing, accessories, and personal care products at affordable prices.
tone: modern, energetic, youthful
color-scheme: light
colors:
  primary: "#182C52"
  secondary: "#385ADC"
  accent: "#E51B23"
  background: "#FFFFFF"
  surface: "#FAFAFA"
  surface-dim: "#F0F2F5"
  surface-container: "#FFFFFF"
  on-primary: "#FFFFFF"
  on-surface: "#24272A"
  outline: "#D1D5DB"
  error: "#E51B23"
  success: "#10B981"
typography:
  display-lg:
    fontFamily: HelveticaNeue-Medium
    fontSize: 48px
    fontWeight: 700
    lineHeight: "1.1"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: HelveticaNeue-Medium
    fontSize: 36px
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: HelveticaNeue-Medium
    fontSize: 30px
    fontWeight: 600
    lineHeight: "1.25"
    letterSpacing: 0em
  headline-md:
    fontFamily: HelveticaNeue-Medium
    fontSize: 24px
    fontWeight: 600
    lineHeight: "1.3"
    letterSpacing: 0em
  headline-sm:
    fontFamily: HelveticaNeue-Medium
    fontSize: 20px
    fontWeight: 600
    lineHeight: "1.35"
    letterSpacing: 0em
  body-md:
    fontFamily: Avenir Next Regular
    fontSize: 16px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  body-sm:
    fontFamily: Avenir Next Regular
    fontSize: 14px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  label-md:
    fontFamily: Avenir Next Regular
    fontSize: 12px
    fontWeight: 500
    lineHeight: "1.4"
    letterSpacing: 0.05em
  label-sm:
    fontFamily: Avenir Next Regular
    fontSize: 11px
    fontWeight: 500
    lineHeight: "1.4"
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 25px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: transparent
    textColor: "{colors.background}"
    typography: "{typography.label-md}"
    rounded: "{rounded.xl}"
    padding: 12px 24px
    borderColor: "{colors.background}"
  button-primary-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.xl}"
    padding: 12px 24px
    borderColor: "{colors.background}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 10px 20px
  card:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.md}"
  card-flat:
    backgroundColor: "{colors.surface-dim}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: 8px 16px
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: 8px 16px
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.accent}"
    typography: "{typography.body-sm}"
  link-hover:
    textColor: "{colors.secondary}"
    typography: "{typography.body-sm}"
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  tooltip:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  announcement-bar:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    padding: 8px 16px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.1)
  md: 0 4px 8px rgba(0, 0, 0, 0.2)
  lg: 0 10px 20px rgba(0, 0, 0, 0.3)
---

## Overview

American Eagle's visual identity balances a youthful, energetic, and casual aesthetic with clean, structured layout patterns. It pairs high-impact lifestyle photography with bold promotional elements to drive e-commerce engagement. The overall feel is approachable, accessible, and deeply rooted in casual comfort and seasonal trends.

## Colors

The color strategy uses a structured, high-contrast palette designed to support heavy visual merchandising and promotional callouts. A deep navy serves as the primary brand anchor, while vibrant red is deployed strategically to draw immediate attention to sales and active discounts.

*   Primary (`{colors.primary}`, #182C52): Deep navy used for primary brand elements, headers, and dominant text.
*   Secondary (`{colors.secondary}`, #385ADC): Active blue used for interactive tooltips, highlights, and secondary accents.
*   Accent (`{colors.accent}`, #E51B23): Vibrant red used for sales, promotional callouts, and active links.
*   Background (`{colors.background}`, #FFFFFF): Clean white background for maximum readability and contrast.
*   Surface (`{colors.surface}`, #FAFAFA): Off-white surface color used for secondary buttons and subtle containers.
*   Surface Dim (inferred) (`{colors.surface-dim}`, #F0F2F5): Slightly darker grey surface for structural contrast.
*   Surface Container (inferred) (`{colors.surface-container}`, #FFFFFF): Standard container background for cards and content blocks.
*   On Primary (`{colors.on-primary}`, #FFFFFF): White text for high contrast on primary navy and accent red backgrounds.
*   On Surface (`{colors.on-surface}`, #24272A): Dark charcoal text used for body copy and primary interface labels.
*   Outline (inferred) (`{colors.outline}`, #D1D5DB): Light grey border color for dividers and input fields.
*   Error (`{colors.error}`, #E51B23): Red used for error states and critical alerts, matching the brand accent.
*   Success (inferred) (`{colors.success}`, #10B981): Green used for successful actions and positive confirmations.

## Typography

The typography system pairs the bold, structured sans-serif HelveticaNeue-Medium for editorial and promotional headlines with the clean, highly readable Avenir Next Regular for UI elements and body copy. This combination ensures high-impact marketing messages alongside an effortless shopping experience.

*   Display Large (`{typography.display-lg}`): Large bold display type used for major seasonal campaign headlines.
*   Display Medium (inferred) (`{typography.display-md}`): Medium display type for secondary promotional banners.
*   Headline Large (inferred) (`{typography.headline-lg}`): Large headline for section titles and category headers.
*   Headline Medium (inferred) (`{typography.headline-md}`): Medium headline for content cards and featured blocks.
*   Headline Small (inferred) (`{typography.headline-sm}`): Small headline for minor promotional callouts.
*   Body Medium (`{typography.body-md}`): Standard body copy for product descriptions and general text.
*   Body Small (`{typography.body-sm}`): Small body copy for secondary details and legal disclaimers.
*   Label Medium (`{typography.label-md}`): Medium label for navigation items and button text.
*   Label Small (`{typography.label-sm}`): Small label for utility links and announcement bar text.

## Layout

*   **Grid & Spacing**: The layout utilizes a flexible grid system optimized for high-density visual merchandising, utilizing spacing tokens from `{spacing.xs}` up to `{spacing.2xl}`. Spacing is generous around hero elements but tightens in product grids to maximize screen real estate.
*   **Section Order**: Pages follow a structured top-to-bottom flow: `announcement-bar` → `nav` → `hero` → `promo-banner` → `category-grid` → `footer`.
*   **Hero Pattern**: The hero composition features a full-bleed lifestyle image background with centered bold typography, discount callouts, and dual gender-specific outline CTA buttons.
*   **Responsive Behavior**: Transitions smoothly from a multi-column desktop view to a mobile-first layout with a collapsible navigation drawer, horizontal scrolling category bubbles, and stacked promotional banners.

## Elevation & Depth

Depth is primarily flat, relying on high-contrast color blocks and image overlays to establish hierarchy. Subtle shadows are reserved for interactive elements to maintain a clean digital storefront.

*   `elevation.sm`: Used for subtle card lift and interactive elements.
*   `elevation.md`: Reserved for interactive tooltips, dropdown menus, and elevated card states.
*   `elevation.lg`: Applied to modal overlays, drawers, and high-impact floating UI components.

## Shapes

The brand employs a deliberate mix of sharp and highly rounded shapes to balance casual friendliness with clean structure. Primary call-to-action buttons and search inputs feature fully rounded pill shapes via `{rounded.xl}` and `{rounded.full}` to invite interaction and feel approachable.

In contrast, content cards, promotional banners, and secondary containers use softer, subtle corners defined by `{rounded.md}` and `{rounded.sm}`. This maintains a clean digital storefront without feeling overly rigid.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`

### Primary Button
The primary button is a fully rounded pill shape using `{rounded.xl}` with a transparent background, white text `{colors.background}`, and a white border. On hover, it transitions to a filled white background with `{colors.primary}` text. Use this component exclusively for high-priority hero actions and primary seasonal campaign CTAs.

### Secondary Button
The secondary button features a subtle background of `{colors.surface}` with `{colors.on-surface}` text and a softer `{rounded.md}` corner radius. It is designed for secondary interactive paths, such as filtering, sorting, or alternative navigation options.

### Card
The standard card component uses `{colors.surface-container}` as its background, framed by a `{colors.outline}` border and rounded with `{rounded.md}`. Use this to group product details, category links, or editorial content in grid layouts.

### Elevated Card
The elevated card uses `{colors.surface-container}` and `{rounded.md}` without a border, relying on `{elevation.sm}` or `{elevation.md}` to float above the background. Use this for interactive or featured content blocks that require extra visual prominence.

### Flat Card
The flat card utilizes `{colors.surface-dim}` as a solid background with `{rounded.md}` corners and no border. Use this for low-priority content containers or background blocks in high-density grids.

### Input Field
The input field is a fully rounded pill shape using `{rounded.full}` with a `{colors.background}` fill and `{colors.outline}` border. On focus, the border transitions to `{colors.primary}`. Use this for search bars, email sign-up forms, and other user input areas.

### Link
The standard link uses `{colors.accent}` text with `{typography.body-sm}` to draw attention to inline promotions and details. On hover, it transitions to `{colors.secondary}`. Use this for inline text links, promotional details, and utility navigation.

### Badge
The standard badge is a small, compact label using `{colors.accent}` background, `{colors.on-primary}` text, and `{rounded.sm}`. Use this to highlight active promotions, discounts, or new arrivals.

### Error Badge
The error badge uses `{colors.error}` background with `{colors.on-primary}` text and `{rounded.sm}`. Use this to display critical alerts, out-of-stock messages, or validation errors.

### Success Badge
The success badge uses `{colors.success}` background with `{colors.on-primary}` text and `{rounded.sm}`. Use this to display positive confirmations, completed actions, or in-stock notifications.

### Divider
The divider is a thin, subtle line with a height of 1px and a background of `{colors.outline}`. Use this to separate content sections, footer links, or product details.

### Tooltip
The tooltip is an informative overlay featuring a `{colors.secondary}` background, `{colors.on-primary}` text, and `{rounded.md}` corners. Use this to display helper text, size guides, or additional product information on hover.

### Announcement Bar
The announcement bar is a full-width banner at the top of the page using `{colors.primary}` background and `{colors.on-primary}` text. Use this to broadcast site-wide promotions, shipping offers, or critical customer updates.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary text and brand-level navigation elements. | Never use `{colors.primary}` for active promotional highlights or discounts. |
| Apply `{colors.accent}` to highlight active promotions, discounts, and critical links. | Never use `{colors.accent}` for standard body text or non-promotional elements. |
| Ensure all primary hero CTAs utilize `{rounded.xl}` pill shapes for high visual prominence. | Avoid applying sharp corners or `{rounded.sm}` to primary buttons. |
| Use `{typography.display-lg}` exclusively for major seasonal campaign headlines. | Do not use `{typography.display-lg}` for standard product descriptions or body copy. |
| Apply `{colors.surface}` as a background for secondary interactive elements like `{components.button-secondary}`. | Do not use `{colors.surface}` for primary brand actions or main call-to-action buttons. |
| Use `{rounded.full}` for input fields to invite search and email sign-up interactions. | Do not use `{rounded.full}` for standard content cards or promotional banners. |
| Apply `{colors.outline}` for dividers and input field borders to maintain subtle structural separation. | Do not use `{colors.primary}` for standard borders as it creates excessive visual noise. |
| Use `{typography.body-sm}` and `{colors.accent}` for inline links to ensure they stand out from body copy. | Do not overlay `{typography.body-md}` directly on complex photographic backgrounds without a high-contrast backing. |

## Content Style

*   **CTA Style**: Call-to-action buttons are action-oriented, clear, and gender-segmented. They frequently utilize dual paths such as "Shop Women" and "Shop Men" or direct actions like "Shop Now" in sentence case to streamline the user journey.
*   **Heading Tone**: Headlines are casual, seasonal, and highly promotional. They focus on weather, comfort, and immediate value propositions (e.g., "DENIM WEATHER", "30-50% Off") to capture attention quickly.
*   **Copy Density**: The copy density is exceptionally light. The interface relies heavily on large lifestyle imagery, bold headlines, and minimal supporting text to drive immediate action and prevent cognitive overload.

## Imagery & Icons

The visual brand relies heavily on photographic treatment, featuring high-contrast, warm-toned lifestyle photography of young adults in casual, outdoor, or candid settings. There is a strong focus on denim textures and seasonal apparel. Icons are kept minimal, utilizing clean, thin line drawings that do not compete with the photography or bold typography.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for American Eagle, a modern, energetic, and youthful casual retail brand. Match its bold-yet-minimal aesthetic with clean structure and high visual impact. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.lg}` — never hardcode hex values, font sizes, or pixel lengths.
2. Use only the components listed under `components:` — `button-primary`, `card`, `badge`, etc. Do not invent variants such as "button-outline" or "card-hero" that the spec does not define.
3. Follow the Shapes notes exactly: primary CTAs and search inputs use `{rounded.xl}` or `{rounded.full}`; cards and banners use `{rounded.md}`. Never apply sharp corners to a primary button.
4. Consult the Do's and Don'ts table before rendering any color or typography decision. If a user request conflicts with the table, surface the conflict explicitly before proceeding.
5. Apply the Layout notes when arranging grids: generous spacing around hero elements (`{spacing.2xl}`), tighter gaps in product grids (`{spacing.sm}` or `{spacing.md}`), and mobile-first stacking below 768px.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Include hover, focus, and disabled states for any interactive component the spec defines (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{rounded.xl}` to all primary CTAs; `{rounded.md}` to cards and banners.
- Use `{colors.accent}` exclusively for promotional callouts, sale prices, and error states — never body text.
- Render major campaign headlines in `{typography.display-lg}` only when a full hero or seasonal banner treatment is present.
- Use `{typography.label-md}` in `{rounded.full}` Avenir Next Regular for navigation and button labels.

**Must NOT:**
- Invent colors, radii, or font families outside the spec.
- Use generic system defaults when a brand token exists.
- Apply `{colors.secondary}` to primary brand actions; reserve it for tooltips and hover highlights.
- Overlay `{typography.body-md}` directly on complex photography without a high-contrast backing.
- Place more than two primary CTAs in a single hero area.
- Rewrite, replace, or reorder page copy, navigation labels, or content hierarchy.

## When in doubt
- If the spec does not define a value, ask the product team before inventing one.
- Compose solutions from existing tokens and components rather than introducing new ones.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for text on those surfaces, use `{colors.on-surface}`.
- Tokens marked "(inferred)" are visual approximations; defer to any authoritative source file if available.
- For unspecified breakpoints, default to mobile-first with a single breakpoint at 768px.