---
version: alpha
name: "United Airlines"
description: "United.com is a transaction-first airline interface: a deep navy navigation shell, a bright blue account and submit color, white flight-search surfaces, compact trip tabs, and dense but predictable controls for booking, check-in, status, and trip management."
colors:
  bg: "#ffffff"
  bg-navy: "#002244"
  surface: "#ffffff"
  surface-soft: "#f4f6f8"
  text: "#1b1b1b"
  text-muted: "#666666"
  brand: "#002244"
  accent: "#1414d2"
  accent-hover: "#0d0da8"
  border: "#d6d6d6"
  success: "#247a4d"
  danger: "#c63030"
  on-brand: "#ffffff"
typography:
  display:
    fontFamily: "NeuePlakforUnited-Rg"
    fontSize: "72px"
    lineHeight: 1.5
    letterSpacing: "-0.025em"
  body:
    fontFamily: "NeuePlakforUnited-Rg"
    fontSize: "16px"
    lineHeight: 1.5
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "8px"
  card: "16px"
  pill: "30px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

United is a practical travel utility wrapped in navy. The header and task tabs feel operational; the white booking panel provides a clean workspace over destination imagery or a dark backdrop.

## Colors

Use navy `#002244` for global navigation and task tabs. Bright blue `#1414d2` drives sign-in and flight-search actions, while white carries forms and dense travel information.

## Typography

NeuePlak for United is broad and highly legible. Use bold 48px type for welcome or campaign headlines, then compact 16px labels for form-heavy booking controls.

## Layout

Place booking before promotional content. Keep task tabs visible and organize fields in the same order travelers think: route, dates, party, cabin, then search.

On mobile, stack fields and keep task tabs horizontally scrollable only when each tab remains readable. Make `Find flights` full width and keep advanced search secondary.

## Elevation & Depth

Use one shallow shadow beneath the booking panel. Within the form, borders and grouping should carry hierarchy instead of nested card elevation.

## Shapes

Use 4px for form surfaces, 8px for supporting modules, and 30px for account or submit actions. Preserve square joins between adjacent booking tabs.

## Components

The booking panel contains tabs, trip-type selection, route fields, dates, travelers, cabin, and one dominant `Find flights` action. Keep inputs rectangular and actions rounded without turning the entire form into pills.

Tab changes and field expansion should complete quickly and preserve data. Motion belongs in destination media, not in core booking controls.

Retain skip-to-book navigation, visible focus rings, complete field labels, and error summaries. Dates and traveler counts must be operable without a pointer.

Use concise service verbs: Book, Check in, View status, Manage trip, Find flights. Operational notices should state what changed and what action is needed.

Navy is a shell rather than a complete dark theme. Booking and account forms remain light for clarity, with dark surfaces limited to navigation and selected task states.

United inherits the familiar grammar of global airline sites but gives it a clear blue hierarchy. The design succeeds when repeated travelers can act immediately without learning a new interface.

## Do's and Don'ts

Do keep booking first, labels explicit, and status tools visible. Do not bury flight search beneath campaigns, animate form layout, or use destination photography behind input text.

Create a United-style airline homepage with a deep navy navigation shell, white booking panel, Book/Flight status/Check-in/My trips tabs, compact route and date fields, bright-blue rounded actions, and visible accessibility shortcuts.