A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
9type steps
2radius steps
12pxspacing base
United Airlines, in one page
The United iOS app is a deep-navy, business-class-feeling travel tool that organizes itself around the *journey detail* — not just "where am I going" but the full anatomy of the flight: aircraft type, duration, terminals, gates, your Economy Plus seat, your MileagePlus Premier status, and the boarding pass that ties it together. Where some airline apps lead with a single status word, United leads with a richly detailed flight-detail screen: origin and destination airport codes large, city names underneath, an aircraft glyph and flight duration in the middle, and scheduled times with gates and terminals along the bottom. The app feels like the digital equivalent of a premium boarding lounge — informative, navy, and confident.
The signature flow is flight detail → boarding pass. The boarding pass is a tall card with a solid United Blue (#002244) header carrying the United globe mark and a gold "PREMIER · GROUP 1" band, a clean Gate / Seat / Boards data grid, a perforated dashed divider with circular notch cut-outs (the "tear here" affordance that makes it feel like a physical pass), and a scannable barcode block. Paired with the boarding pass is the interactive seat map — a cabin grid where Economy Plus rows are tinted translucent blue, taken seats are recessed dark, and the selected seat glows in electric Rhapsody Blue. This *flight detail + boarding pass + seat map* triad is the heart of the product.
The color system is a confident two-blue brand. United Blue (#002244) is the deep, trustworthy brand navy — headers, gradients, the boarding-pass banner. Rhapsody Blue (#1414FF) is the electric, almost-violet primary-action accent — it's the "Check In" button, the selected seat, the active tab. The two blues are deliberately different jobs: navy is *brand and surface*, Rhapsody is *action*. Premier gold (#C2A14D) is the MileagePlus elite-status accent — a Premier 1K / Gold / Silver badge, a "Group 1" priority band — and is never used as a general accent. Functional flight-status colors (on-time green, delayed amber, canceled red) are kept separate from the brand blues so status reads instantly.
Typography is United's clean humanist sans lineage (Open Sans is the closest free analog) — generous weight contrast (800 for airport codes and titles, 400 for body, 700 for eyebrows). Airport IATA codes, gate, seat, and times are rendered large and bold because they're scanned under travel pressure. The type system favors structured legibility — it should read like a refined airline information display.
Key Characteristics:
- Deep-navy, detail-rich travel tool — the flight-detail screen is the hero, not a single status word
- Signature flow: flight detail → boarding pass, with an interactive seat map
- Boarding pass with solid United Blue header + globe mark, gold Premier/Group band, perforated dashed divider with notch cut-outs, scannable barcode
- Interactive seat map — Economy Plus tinted, taken recessed, selected glowing Rhapsody Blue
- Two-blue brand: United Blue (
#002244) for brand/surface, Rhapsody Blue (#1414FF) for action - Premier gold (
#C2A14D) for MileagePlus elite status only - Functional status palette (green / amber / red) kept distinct from brand blues
- Home / Book / Flights / Trips / MileagePlus bottom tab structure
- Big bold IATA codes, gate, seat, times — sized for at-a-glance scanning
- Apple Wallet integration — boarding pass is a first-class live Wallet pass
- Refined, navy, business-class-feeling — informative without anxiety
Do's and don'ts
Do
- Use the two-blue brand correctly: United Blue (
#002244) for brand/surface, Rhapsody Blue (#1414FF) for action - Lead with the detail-rich flight-detail screen (left/center/right zones), then the boarding pass
- Put the United globe mark + gold Premier/Group band on the boarding-pass header
- Render the perforated dashed divider with circular notch cut-outs — it makes the pass feel physical
- Build an interactive seat map: Economy Plus tinted, taken recessed, selected glowing Rhapsody Blue
- Size airport codes, gate, seat, and times large and bold (800) — scanned under stress
- Use Premier gold (
#C2A14D) only for MileagePlus elite status / priority bands - Keep functional status colors (green/amber/red) distinct from the brand blues
- Use a deep navy (
#0A1424) for dark canvas — never neutral black - Invert the barcode to a light pattern in dark mode so gate scanners read a dimmed screen
Don't
- Don't use Rhapsody Blue for brand surfaces or headers — it's the action accent, navy is the brand
- Don't use Premier gold as a general accent — it's elite-status / priority only
- Don't render gate/seat/IATA in small or light type — these are the highest-priority glyphs
- Don't confuse the "Boarding" status blue with Rhapsody action blue semantically
- Don't use a pure-black dark canvas —
#0A1424keeps the brand navy reading - Don't add a Material tint pill to the tab bar — active is icon fill + color only
- Don't drop the perforation divider — it's a recognizable part of the pass identity
- Don't over-animate — motion is refined (aircraft glide, seat spring), never decorative bounce
- Don't bury the boarding pass on travel day — it's one tap from Home/Flights
- Don't let the barcode go low-contrast in dark mode — it must remain machine-scannable
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the United Airlines design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- United Blue: #002244
- Rhapsody Blue: #1414ff
- Premier gold: #c2a14d
- Rhapsody Blue Pressed: #0e0ec8
- Rhapsody Bright: #4a4aff
- United Blue Mid: #1b3d6e
- Canvas White: #ffffff
- Surface Gray: #f3f5fa
- Surface Pressed: #e5eaf3
- Divider: #d4dce9
Type:
- families: Brand Face, Open Sans, Numerals
- scale: 10, 12, 14, 15, 16, 18, 22, 26, 32
- weights: 400, 600, 700, 800
Shape:
- radius: 4, 9
Spacing: 12, 13, 14, 16
Rules:
- Use the two-blue brand correctly: United Blue (`#002244`) for brand/surface, Rhapsody Blue (`#1414FF`) for action
- Lead with the detail-rich flight-detail screen (left/center/right zones), then the boarding pass
- Put the United globe mark + gold Premier/Group band on the boarding-pass header
- Render the perforated dashed divider with circular notch cut-outs — it makes the pass feel physical
- Build an interactive seat map: Economy Plus tinted, taken recessed, selected glowing Rhapsody Blue
- Size airport codes, gate, seat, and times large and bold (800) — scanned under stress
Avoid:
- Don't use Rhapsody Blue for brand surfaces or headers — it's the action accent, navy is the brand
- Don't use Premier gold as a general accent — it's elite-status / priority only
- Don't render gate/seat/IATA in small or light type — these are the highest-priority glyphs
- Don't confuse the "Boarding" status blue with Rhapsody action blue semantically
- Don't use a pure-black dark canvas — `#0A1424` keeps the brand navy reading
- Don't add a Material tint pill to the tab bar — active is icon fill + color only
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Rhapsody Blue (
#1414FF): Primary interactive color — "Check In", "Continue", selected seat, active tab. United's electric action accent. - Rhapsody Blue Pressed (
#0E0EC8): Pressed state. - Rhapsody Bright (
#4A4AFF): Active-state tint on dark surfaces (tab/icon) where#1414FFis too dark to read. - United Blue (
#002244): Brand anchor — flight-detail gradient, boarding-pass header, trust surfaces. - United Blue Mid (
#1B3D6E): Secondary CTA / interactive navy on dark surfaces.
Canvas & Surfaces (Light Mode)
- Canvas White (
#FFFFFF): Primary light canvas. - Surface Gray (
#F3F5FA): Grouped list background, subtle cards. - Surface Pressed (
#E5EAF3): Pressed/selected rows. - Divider (
#D4DCE9): Hairline dividers.
Canvas & Surfaces (Dark Mode)
- Dark Canvas (
#0A1424): Primary dark canvas — a deep navy, NOT neutral black, so the brand navy reads. - Dark Surface 1 (
#111E33): Cards, boarding-pass body, grouped sections. - Dark Surface 2 (
#1A2A45): Nested chips, seat cells, pressed rows. - Dark Divider (
#243652): Hairline dividers, perforation line.
Text
- Text Primary Light (
#0C1F38): Primary text — a navy-tinted near-black. - Text Secondary Light (
#566884): Metadata, labels. - Text Tertiary Light (
#8493AC): Disabled, low-emphasis. - Text Primary Dark (
#E9EEF6): Primary text on dark. - Text Secondary Dark (
#97A6BE): Metadata on dark. - Text Tertiary Dark (
#5E7090): Disabled on dark.
Brand & Loyalty
| Role | Light Mode | Dark Mode |
|---|---|---|
| United Blue | #002244 | #002244 |
| United Blue Mid | #1B3D6E | #1B3D6E |
| Rhapsody Blue | #1414FF | #1414FF |
| Rhapsody Bright | #4A4AFF | #4A4AFF |
| Premier Gold | #C2A14D | #C2A14D |
| Premier Gold Bright | #D8B863 | #D8B863 |
| Sky Tint (header) | #E6EDF7 | #16243C |
Flight Status (Functional — constant across modes)
| Role | Light Mode | Dark Mode | Use |
|---|---|---|---|
| On Time | #1E8E5A | #4FD18C | "On Time", departed-on-time, arrived |
| Boarding | #1414FF | #7A7AFF | "Boarding", "Boarding Soon" |
| Delayed | #C98A1E | #E0A943 | "Delayed", schedule change |
| Canceled / Error | #D8434F | #F0808A | "Canceled", IROP, error |
| Gate Changed | #D9730D | #F0954E | "Gate Changed" alert |
Semantic
- Error Red (
#D8434F/#F0808Adark): Inline error, canceled flight. - Success Green (
#1E8E5A/#4FD18Cdark): Check-in / payment success. - Warning Amber (
#C98A1E/#E0A943dark): Delay, schedule change. - Selection Highlight (
#1414FF1F): 12% Rhapsody overlay on selected rows.
Type scaleRead the full spec
Font Family
- Brand Face: United uses a clean humanist corporate sans. For non-licensed reproduction, Open Sans (by Steve Matteson, Apache 2.0) is the closest free analog — humanist proportions, strong legibility at small sizes and on departure-board-style data.
- iOS Fallback:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Mono (record locators, e-tickets):
'SF Mono', Menlo, monospace - Numerals: tabular figures for gate/seat/times/miles so columns align.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Route IATA | Open Sans | 32pt | 800 | 1.05 | -0.5pt | SFO → EWR airport codes |
| Screen Title | Open Sans | 26pt | 800 | 1.15 | -0.3pt | "Your upcoming flight" |
| Section Header | Open Sans | 22pt | 700 | 1.2 | -0.2pt | "Choose your seat" |
| Card / Pax Name | Open Sans | 18pt | 700 | 1.25 | 0pt | Passenger name (uppercase) |
| Data Value (large) | Open Sans | 22pt | 800 | 1.1 | 0pt | Gate/Seat/Boards cell values |
| Body | Open Sans | 16pt | 400 | 1.5 | 0pt | Paragraph, descriptions |
| Data Value (inline) | Open Sans | 15pt | 600 | 1.3 | 0pt | "Seat 7A · Economy Plus" |
| Meta | Open Sans | 14pt | 400 | 1.4 | 0pt | "5h 32m · Boeing 777-300ER" |
| Eyebrow / Label | Open Sans | 12pt | 700 | 1.0 | 0.6pt | "UA 482 · BOEING 777" uppercase |
| Cell Label | Open Sans | 10pt | 700 | 1.0 | 0.6pt | "GATE" / "SEAT" / "BOARDS" |
| Button | Open Sans | 16pt | 700 | 1.0 | 0.2pt | Primary/secondary buttons |
| Tab Label | Open Sans | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Status Pill | Open Sans | 12pt | 700 | 1.0 | 0.2pt | "On Time" / "Boarding" |
Principles
- Data is bold and big: airport codes, gate, seat, boards-time are the highest-priority glyphs at weight 800 — scanned under stress.
- Uppercase for labels, not content: eyebrows and cell labels uppercase with positive tracking; passenger content stays cased.
- Weight ladder 400 / 600 / 700 / 800: body 400, inline data 600, headers/eyebrows 700, hero numerals/titles 800. No thin, no black.
- Tabular numerals everywhere structured: times, gate, seat, mileage balances use tabular figures so stacked rows align.
- Dynamic Type first-class: titles, body, meta scale; the barcode, seat-map glyphs, tab labels, and pill text stay fixed (layout/scan-sensitive).
Components and layoutRead the full spec
Buttons
Primary Button (Check In / Continue)
- Shape: Rounded rectangle, 4pt corner radius (United's buttons are crisp, low-radius)
- Background:
#1414FF(Rhapsody Blue) — the electric action accent, one primary CTA per screen - Text:
#FFFFFF, Open Sans 16pt weight 700 - Padding: 14pt vertical, 28pt horizontal; full-width on action screens
- Pressed: background
#0E0EC8+ scale 0.98 - Disabled:
#1414FFat 38% opacity
Secondary Button (Boarding Pass)
- Background:
#1B3D6E(United Blue Mid) light & dark - Text:
#FFFFFF, Open Sans 15pt weight 700 - Corner radius: 4pt; padding 13pt / 24pt
- Pressed:
#002244+ scale 0.98
Outline Button (Change Seat)
- Background: transparent
- Text:
#0C1F38light /#E9EEF6dark, Open Sans 14pt weight 600 - Border: 1.5pt
#566884light /#97A6BEdark - Corner radius: 4pt; padding 12pt / 20pt
- Pressed:
#1414FF14
Text Button (Flight details)
- Text:
#1414FFlight /#4A4AFFdark, Open Sans 14pt weight 700 - No background, no underline; pressed: 60% opacity
Boarding Pass (signature surface)
- Container:
#FFFFFFlight /#111E33dark, 16pt corner radius, 1pt divider border - Header band: solid
#002244United Blue, 12pt/18pt padding — United globe mark + "UNITED" wordmark (800, white) on the left; gold "PREMIER · GROUP 1" (11pt 700,#D8B863) on the right - Passenger row: "PASSENGER" label (10pt 700 caps secondary) + name 18pt 700 uppercase primary
- Data grid: three equal cells
Gate / Seat / Boards— each a 10pt uppercase label + 22pt weight-800 value; the Boards value renders in Premier gold#D8B863 - Perforated divider: a dashed 1pt line with two circular notch cut-outs at the edges (background-color circles) — the "tear here" affordance that makes it feel like a physical stub
- Barcode block: 54pt tall, high-contrast bar pattern; inverts to a *light* bar pattern in dark mode so a gate scanner reads a dimmed screen
- Tap → full-screen pass with brightness auto-boost + Wallet "Add" affordance
Seat Map (signature surface)
- Container: card, 16pt corner radius, 18pt padding
- Title 13pt 700 + sub "Economy Plus · Row 7–9 · 7A selected" 12pt secondary
- Cabin grid: a
repeat(7, 1fr)grid (3 seats · aisle · 3 seats), 6pt gap - Standard seat:
#1A2A45cell, 6pt top / 3pt bottom radius (seat-shaped), 1pt divider border - Economy Plus seat: translucent
#1414FF@ 18% fill,#4A4AFF@ 40% border - Taken seat: recessed
#0A1424fill, dim border - Selected seat: solid
#1414FFwith a#4A4AFFglow ring - Aisle: transparent gap cell
- Legend: Econ+ / Selected / Taken swatches, 11pt secondary
Flight Detail Header (hero)
- Full-bleed
#002244 → #04152Cnavy gradient, 8pt top / 18pt bottom padding - Eyebrow "UA 482 · BOEING 777" 11pt 700 caps, light-blue
#7FA0CE - Status pill top-right (rounded-999, status-tinted)
- Route row: left city (IATA 32pt 800 white + city name 12pt
#9FBADC), center aircraft glyph + duration, right city (right-aligned) - Times row: "8:05 AM · Gate F12" left, "4:37 PM · Term C" right, 13pt weight 600
#CFE0F2
Status Chips
- Rounded-999 pill, 12pt weight 700, 7pt/14pt padding
- On Time:
#4FD18Conrgba(30,142,90,0.18) - Boarding:
#7A7AFFonrgba(20,20,255,0.22) - Delayed:
#E0A943onrgba(201,138,30,0.18) - Canceled:
#F0808Aonrgba(216,67,79,0.18)
MileagePlus Premier Badge
- Rounded-8pt chip with a subtle gold gradient
rgba(194,161,77,0.18) → rgba(194,161,77,0.06), 1pt gold border - Leading 22pt circular ring (2pt
#C2A14Dborder) with the tier code ("1K", "PG", "PS") in 10pt weight 800 gold - Label: tier name 13pt weight 700 in
#D8B863 - Tiers: Premier Silver / Gold / Platinum / 1K / Global Services
Cards & Lists
Trip Card (Trips tab)
#FFFFFF/#111E33, 16pt radius, 1pt divider- Route summary (IATA → IATA 16pt 800) + status pill + chevron, 16pt padding, 12pt gap
Grouped List Row (MileagePlus / settings)
- 52pt tall, leading SF Symbol 22pt, title 16pt 400, trailing chevron
#8493AC - Divider inset 56pt; pressed
#E5EAF3/#1A2A45
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Seat map stays 7-col; flight-detail meta wraps to one line |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; flight-detail header offsets below island |
| iPhone 15/16 Pro Max | 430pt | Larger IATA codes; seat cells scale up |
| iPad (portrait) | 768pt | Two-column: trips list (left) + selected flight detail (right) |
| iPad (landscape) | 1024pt+ | Flight detail max 720pt centered; seat map enlarges; pass max 420pt |
Dynamic Type
- Route IATA, screen title, section, body, meta: full scale
- Boarding-pass barcode, seat-map cells, cell labels (10pt), tab labels (10pt), status-pill text: FIXED (scan/layout-sensitive)
- Data values scale one step then clamp to preserve the grid
Orientation
- iPhone: portrait-locked on the boarding pass; other screens rotate
- iPad: full rotation; seat map can present in a larger landscape modal
Touch Targets
- Tab bar icons: 22pt glyph, 44pt+ hit area
- Seat cell: minimum 32pt hit, expanded for small cabins
- Primary button: 48pt+ tall
- List rows: 52pt tall; "Add to Wallet" pill 44pt tall
Safe Area Handling
- Top: flight-detail header and nav respect safe area + Dynamic Island
- Bottom: tab bar + home indicator respected
- Boarding pass: never clipped by the home indicator; barcode kept above safe-area inset
- Sides: 16pt content inset
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-united-airlines {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #243652;
--heading-color: #243652;
--link-color: #1414ff;
--link-hover-color: #0000e0;
--border-color: #d8dbe0;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(36,54,82,0.06);
--card-hover-shadow: 0 6px 18px rgba(36,54,82,0.12);
--header-bg: #243652;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #687284;
--button-bg: #1414ff;
--button-text-color: #ffffff;
--button-hover-bg: #0000e0;
--button-border: none;
--button-border-radius: 9px;
--button-secondary-bg: #f2f3f5;
--button-secondary-text-color: #243652;
--button-secondary-hover-bg: #e5e7ea;
--button-secondary-border: 1px solid #d8dbe0;
--prompt-bg: #f4f5f6;
--prompt-text-color: #243652;
--base-font: var(--font-open-sans);
--heading-font: var(--font-open-sans);
--card-border-radius: 9px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/travel/united-airlines/DESIGN.md· 24.8 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.