Delta DESIGN.md

1. Visual Theme & Atmosphere

Fly Delta's iOS app is a calm, navy-grounded travel concierge that organizes itself entirely around one question: where is my trip right now? The moment you open it, the Today tab puts your most imminent flight front and center — a full-bleed navy header showing your origin and destination airport codes in big bold type, a small plane gliding along a connecting line, and a status pill ("On Time", "Delayed", "Now Boarding") that is the single most important word on the screen. Everything else (rebooking, bag tracker, SkyMiles, amenities) is one tap away but visually subordinate. The app's job is to remove travel anxiety, and the design does that by being uncluttered, status-first, and predictable.

The signature surface is the digital boarding pass. It is a tall card with a navy→red gradient strip across the top, the passenger name in uppercase, a clean three-cell Gate / Seat / Group data grid, a "SKY PRIORITY" or zone band, and a scannable barcode block at the bottom. This pass is the emotional and functional center of the product — it is what you hold up at the gate, it lives in Apple Wallet, and the in-app version stacks a live flight-status timeline above it (Departed → In Air → Arrive, each step a dot on a vertical rail with a time and gate). The combination of boarding pass + flight status timeline is the screen people open the app to see.

The color system is disciplined and corporate-confident. Delta Blue (#003268) is the brand anchor — it's the navigation accent, the gradient base, and the trust color. The Delta "widget" red (#C8102E), drawn from the triangular logomark, is the single high-energy accent and is reserved almost exclusively for the primary call-to-action ("Check In", "Continue"). There is no rainbow; Delta deliberately limits chroma so that functional status colors — on-time green, delayed amber, canceled red — read instantly and are never confused with brand decoration. SkyMiles gold (#C99700) is the loyalty/Medallion accent and appears as a Medallion tier badge or a "SkyMiles" emphasis.

Typography is a clean humanist sans in the Whitney/Open-Sans family — highly legible at a glance, generous in weight contrast (800 for airport codes and screen titles, 400 for body, 700 for eyebrows and uppercase labels). Airport IATA codes and gate/seat numbers are rendered large and bold because they are the data travelers scan under pressure. The type system favors scannability over personality: it should read like a confident airline counter display, not a lifestyle brand.

Key Characteristics:

• Navy-grounded, status-first travel concierge — the imminent flight is always the hero
• Digital boarding pass as the signature surface — navy→red strip, name, Gate/Seat/Group grid, barcode
• Flight-status timeline — vertical dot rail (Departed → In Air → Arrive) with times and gates
• Delta Blue (#003268) as the brand/navigation anchor; widget red (#C8102E) as the single CTA accent
• SkyMiles gold (#C99700) for Medallion / loyalty emphasis
• Functional status palette (green / amber / red) kept distinct from brand color
• Today / Book / Trips / SkyMiles / More bottom tab structure
• Big bold IATA codes and gate/seat numbers — data sized for at-a-glance scanning
• Apple Wallet integration — the boarding pass is a first-class Wallet pass
• Calm, uncluttered, predictable — designed to reduce travel anxiety

2. Color Palette & Roles

Primary (Interactive)

• Delta Red (#C8102E): Primary interactive color — "Check In", "Continue", primary CTA background. The single high-energy accent, used sparingly.
• Delta Red Pressed (#A30D26): Pressed state for the primary CTA.
• Delta Blue (#003268): Brand anchor — navigation accent, boarding-pass gradient base, link/selected color, trust surfaces.
• Delta Blue Bright (#0F4C9A): Secondary CTA / interactive blue on dark surfaces where #003268 would be too low-contrast.

Canvas & Surfaces (Light Mode)

• Canvas White (#FFFFFF): Primary light canvas.
• Surface Gray (#F4F6F9): Grouped list background, subtle elevated cards.
• Surface Pressed (#E8ECF3): Pressed/selected rows.
• Divider (#D6DCE7): Hairline dividers between rows and cards.

Canvas & Surfaces (Dark Mode)

• Dark Canvas (#0B1320): Primary dark canvas — a deep navy-charcoal, NOT neutral black, so the brand navy still reads.
• Dark Surface 1 (#131C2B): Cards, boarding pass body, grouped sections.
• Dark Surface 2 (#1C2738): Nested chips, zone bands, pressed rows.
• Dark Divider (#25314A): Hairline dividers.

Text

• Text Primary Light (#10243F): Primary text — a navy-tinted near-black.
• Text Secondary Light (#5A6A82): Metadata, labels, captions.
• Text Tertiary Light (#8A98AE): Disabled, low-emphasis.
• Text Primary Dark (#E8ECF3): Primary text on dark.
• Text Secondary Dark (#9AA6BC): Metadata on dark.
• Text Tertiary Dark (#5F6E88): Disabled on dark.

Brand & Loyalty

Flight Status (Functional — constant across modes)

Semantic

• Error Red (#C8102E / #E0414E dark): Inline error, canceled flight, failed payment.
• Success Green (#1E8E5A / #4FD18C dark): Check-in complete, payment success.
• Warning Amber (#C99700 / #E0B743 dark): Delay, schedule change, expiring fare.
• Selection Highlight (#0F4C9A1F): 12% blue overlay on selected rows.

3. Typography Rules

Font Family

• Brand Face: Delta uses a Whitney-class humanist sans (the airline's corporate typeface lineage). For non-licensed reproduction, Open Sans (by Steve Matteson, Apache 2.0) is the closest free analog — same humanist proportions, excellent legibility at small sizes and on signage.
• iOS Fallback: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
• Mono (data, confirmation codes): 'SF Mono', Menlo, monospace — record locators, e-ticket numbers.
• Numerals: tabular figures for gate/seat/times so columns align in the boarding pass and timeline.

Hierarchy

Principles

• Data is bold and big: Airport codes, gate, seat, group, and times are the highest-priority glyphs — sized large with weight 800 because travelers scan them under stress.
• Uppercase for labels, not content: Eyebrows and cell labels ("GATE", "TODAY · DL 1248") are 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 they align in stacked rows.
• Dynamic Type first-class: Titles, body, meta scale; the boarding-pass barcode, tab labels, and pill text stay fixed (layout/scan-sensitive).

4. Component Stylings

Buttons

Primary Button (Check In / Continue)

• Shape: Rounded rectangle, 6pt corner radius
• Background: #C8102E (Delta Red) — the single high-energy 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 #A30D26 + scale 0.98
• Disabled: #C8102E at 38% opacity, text at 60%

Secondary Button (View Boarding Pass)

• Background: #0F4C9A (Delta Blue Bright) light & dark
• Text: #FFFFFF, Open Sans 15pt weight 700
• Corner radius: 6pt; padding 13pt / 24pt
• Pressed: background #003268 + scale 0.98

Outline Button (Change Seat / Modify)

• Background: transparent
• Text: #10243F light / #E8ECF3 dark, Open Sans 14pt weight 600
• Border: 1.5pt #5A6A82 light / #9AA6BC dark
• Corner radius: 6pt; padding 12pt / 20pt
• Pressed: background #0F4C9A14

Text Button (Flight details)

• Text: #0F4C9A light / #6FB0EA dark, Open Sans 14pt weight 700
• No background, no underline
• Pressed: 60% opacity

Boarding Pass (signature surface)

• Container: #FFFFFF light / #131C2B dark, 18pt corner radius, 1pt divider border, subtle shadow
• Top strip: 6pt tall, linear-gradient #003268 → #C8102E (Delta Blue to widget red) — the brand signature on the pass
• Passenger row: "PASSENGER" label (10pt 700 caps secondary) + name in 18pt 700 uppercase primary
• Data grid: three equal cells Gate / Seat / Group — each with a 10pt uppercase label and a 22pt weight-800 value; the Group/Medallion value can render in SkyMiles gold #C99700
• Zone band: full-width #1C2738 (dark) / #E8ECF3 (light) rounded 10pt strip — "Boards 10:12 AM · SKY PRIORITY" with the zone in 14pt weight-800
• Barcode block: 56pt tall, a high-contrast bar pattern (Aztec/PDF417 in production). On dark mode it inverts to a light bar pattern so a gate scanner still reads a dimmed screen
• Tap → full-screen pass with brightness auto-boost and Wallet "Add" affordance

Flight Status Timeline (signature surface)

• Container: card, 16pt corner radius, 18pt padding
• Title: "Flight Status" 13pt weight 700
• Vertical rail: a column of 12pt dots connected by 2pt bars
  • Completed/active step dot: filled status color (on-time green #1E8E5A) with a 2pt ring
  • Upcoming step dot: #5F6E88 (tertiary) with matching ring
  • Connector bar: #25314A divider color
• Step: bold label (13pt 700, e.g. "Departed ATL — On Time") + meta line (12pt secondary, "Gate B16 · 10:42 AM EDT")
• Steps: typically Departed → In Air / Cruising → Arrive (Terminal + Baggage Carousel)
• Live updates animate the active dot pulsing softly; a status change re-colors the affected step

Trip Header (Today hero)

• Full-bleed gradient #003268 → #06203F navy block, 8pt top / 16pt bottom padding
• Eyebrow: "TODAY · DL 1248" 11pt weight 700 caps, light-blue #8FB4DD
• Status pill (top-right): rounded-999 chip, status-tinted (on-time = green-on-translucent)
• Route line: large IATA code (34pt 800 white) — animated plane glyph between two thin connecting lines — second IATA code
• Sub-row: "Gate B16 · 10:42 AM" left, "Seat 14C · 1:02 PM" right, 12pt light-blue

Cards & Lists

Trip Card (Trips tab)

• #FFFFFF / #131C2B, 16pt radius, 1pt divider
• Leading: small route summary (IATA → IATA, 16pt 800)
• Trailing: status pill + chevron
• 16pt padding, 12pt vertical gap between cards

Grouped List Row (More / settings)

• 52pt tall, leading SF Symbol 22pt, title 16pt 400, trailing chevron #8A98AE
• Divider inset 56pt from leading
• Pressed: #E8ECF3 / #1C2738 background

Status Chips

• Rounded-999 pill, 12pt weight 700, 7pt vertical / 14pt horizontal padding
• On Time: #1E8E5A text on #1E8E5A1F
• Now Boarding: #0F4C9A text on #0F4C9A24
• Delayed: #C99700 text on #C997001F
• Canceled: #C8102E text on #C8102E1F
• (Dark mode uses the lighter status variants on the same translucent fill)

Navigation

Bottom Tab Bar

• Height: 68pt + safe area
• Background: #FFFFFF / #0B1320 with 0.5pt top divider, blur saturate(180%) blur(20px)
• Tabs (5): Today, Book, Trips, SkyMiles, More
• Icon size: 22pt; active color #003268 light / #5BA0E0 dark (filled glyph), inactive #8A98AE / #5F6E88
• Labels: Open Sans 10pt weight 600, always shown
• No tint pill — active is icon fill + label color change

Top Nav (detail screens)

• Height: 44pt + safe area, navy #003268 or transparent over the trip header
• Leading: back chevron (white over navy)
• Center: contextual title (e.g. "DL 1248")
• Trailing: share / refresh icon

Input Fields

Search / Field

• Height: 48pt, #F4F6F9 / #1C2738, 8pt radius, no border
• Leading icon 18pt secondary; placeholder 15pt secondary
• Focus: 1.5pt #0F4C9A border

Segmented Control (One-way / Round-trip / Multi-city)

• Track #E8ECF3 / #1C2738, 8pt radius
• Selected segment: white #FFFFFF / #0F4C9A knob, label 14pt weight 700
• Unselected label: 14pt weight 600 secondary

Distinctive Components

Apple Wallet Pass

• The boarding pass is exported as a .pkpass: navy strip, airline logo, IATA codes, barcode
• In-app "Add to Apple Wallet" black pill button below the pass
• Wallet pass updates live (gate change pushes a lock-screen notification)

Bag Tracker

• A horizontal step strip: Checked → Loaded → In Transit → Arrived → Carousel
• Each step a dot; current step gets the on-time green fill; carousel number shown large

SkyMiles Balance Card

• Navy gradient card, "SkyMiles" wordmark, large mileage balance (tabular 800), Medallion tier badge in gold #C99700
• MQM/MQD progress bars toward next Medallion tier

Flight Status Search Result

• Card with route, flight number, status pill, on-time-bar (a small horizontal scheduled-vs-actual bar), gate, terminal

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
• Card internal padding: 16–18pt
• Vertical gap between cards: 12–16pt
• Screen horizontal inset: 16pt

Grid & Container

• iPhone: content at 16pt horizontal insets; trip header full-bleed
• iPad: content max-width 700pt centered, 24pt insets; two-column trips list on landscape
• Boarding pass: full-width minus 16pt insets on phone; max 420pt centered on larger screens

Whitespace Philosophy

• Status first, chrome minimal: the most imminent flight gets the most pixels; secondary actions are compact rows
• Pass breathes: the boarding pass has generous 18pt internal padding so gate/seat values never crowd
• Calm density: lists are 52pt rows with clear dividers — readable at a glance in a busy terminal
• Gradient as anchor: navy header gradients ground each major screen so the brand is always present

Border Radius Scale

• Square (0pt): full-bleed headers, barcode block edges, gradient strip
• Subtle (4pt): inline tags, progress bars
• Standard (6pt): buttons, fields, segmented control
• Comfortable (10pt): zone bands, inner chips
• Card (16pt): list cards, timeline card
• Pass (18pt): the boarding pass container
• Pill (500pt): status chips, "Add to Wallet"
• Circle (50%): timeline dots, avatars, Medallion badge

6. Depth & Elevation

Delta is mostly flat with purposeful elevation on the boarding pass and floating actions.

Shadow Philosophy: Elevation signals "this is the thing you act on". The boarding pass sits highest because it's the object you hold up at the gate. On dark mode shadows are deeper and a 1pt #25314A border doubles as the elevation cue since shadows nearly vanish on #0B1320.

Motion

• Plane glide (trip header): the plane glyph eases along the connecting line over ~1200ms ease-in-out on screen appear, then settles
• Status change: when a flight status updates, the pill cross-fades color over 250ms and a soft haptic fires; the affected timeline step re-colors with a 300ms ease
• Active timeline dot: a slow 1.6s pulse (scale 1 → 1.15 → 1) on the in-progress step
• Boarding pass open: tap → spring scale-up + screen-brightness auto-boost; dismiss → 250ms ease-down
• Bag tracker advance: the active step dot fills with a 300ms ease and a light haptic when a scan event arrives
• Tab switch: instant content swap, 150ms cross-fade
• Pull-to-refresh (status): navy spinner; on success, a soft success haptic and the status pill animates
• Page navigation: iOS native push, 300ms horizontal slide
• Haptics: soft impact on status change, gate change (notification haptic), check-in success (success haptic), pass added to Wallet

7. Do's and Don'ts

Do

• Anchor the brand with Delta Blue (#003268) and reserve widget red (#C8102E) for the single primary CTA
• Make the boarding pass the highest-elevation, most-detailed surface — navy→red strip, name, Gate/Seat/Group, barcode
• Put a flight-status timeline above the pass (Departed → In Air → Arrive) with times and gates
• Size airport codes, gate, seat, and times large and bold (800) — they're scanned under stress
• Keep functional status colors (green/amber/red) distinct from brand color
• Invert the barcode to a light pattern in dark mode so gate scanners still read a dimmed screen
• Use SkyMiles gold (#C99700) only for Medallion / loyalty emphasis
• Use a deep navy-charcoal (#0B1320) for dark canvas — never neutral black, the navy must stay alive
• Surface the imminent flight first on the Today tab; everything else is subordinate
• Offer "Add to Apple Wallet" prominently and keep the Wallet pass live (gate-change push)

Don't

• Don't use red as a general accent — it's the CTA and the canceled/error color only
• Don't render gate/seat/IATA in small or light type — these are the highest-priority glyphs
• Don't confuse brand navy with the "Boarding" status blue — keep status semantics separate
• Don't use a pure-black dark canvas — #0B1320 keeps the brand navy reading
• Don't add a Material tint pill to the tab bar — active is icon fill + color only
• Don't over-animate — motion is calm and functional (status changes, plane glide), never decorative bounce
• Don't bury the boarding pass behind taps on travel day — it should be one tap from Today
• Don't use multiple competing CTAs on one screen — one red primary action
• Don't let the barcode go low-contrast in dark mode — it must remain machine-scannable
• Don't decorate the trip header with imagery that fights the status pill — the status word is king

8. Responsive Behavior

Device Sizes

Dynamic Type

• Route IATA, screen title, section header, body, meta: full scale
• Boarding-pass barcode, 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 (it's a hold-up surface); other screens rotate
• iPad: full rotation; split trips/detail layout in landscape

Touch Targets

• Tab bar icons: 22pt glyph, 44pt+ hit area
• Primary button: 48pt+ tall
• List rows: 52pt tall, full-row tap
• Timeline step: full-row tap reveals segment detail
• "Add to Wallet" pill: 44pt tall

Safe Area Handling

• Top: trip header and nav respect safe area and 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

9. Agent Prompt Guide

Quick Color Reference

• Canvas (light): #FFFFFF
• Canvas (dark): #0B1320
• Surface 1 (dark): #131C2B
• Divider (dark): #25314A
• Text primary: #10243F light / #E8ECF3 dark
• Text secondary: #5A6A82 light / #9AA6BC dark
• Delta Blue (brand/nav): #003268
• Delta Blue Bright (secondary CTA): #0F4C9A
• Delta Red (primary CTA / canceled): #C8102E
• Delta Red pressed: #A30D26
• SkyMiles gold: #C99700
• Status on-time: #1E8E5A (#4FD18C dark)
• Status delayed: #C99700 (#E0B743 dark)
• Status boarding: #0F4C9A (#6FB0EA dark)

Example Component Prompts

• "Build the Delta digital boarding pass in SwiftUI: a card with 18pt corner radius, #131C2B background (dark), a 6pt top strip with a #003268 → #C8102E linear gradient. Below: 'PASSENGER' label in Open Sans 10pt weight 700 uppercase #9AA6BC, then the passenger name in 18pt weight 700 uppercase #E8ECF3. Then a 3-cell HStack Gate / Seat / Group, each cell a 10pt uppercase label #5F6E88 over a 22pt weight-800 value #E8ECF3 (Group value in SkyMiles gold #C99700). A #1C2738 rounded-10pt zone band 'Boards 10:12 AM · SKY PRIORITY' with the zone in 14pt weight 800. Foot: a 56pt high-contrast barcode block that inverts to light bars on dark mode."

• "Create the Delta flight-status timeline: a 16pt-radius card, title 'Flight Status' 13pt weight 700. A vertical rail of 12pt dots connected by 2pt #25314A bars. Completed steps get a #1E8E5A filled dot with a 2pt ring; upcoming steps get a #5F6E88 dot. Each step: bold label 13pt 700 (e.g. 'Departed ATL — On Time') + meta 12pt #9AA6BC ('Gate B16 · 10:42 AM EDT'). Steps: Departed → In Air → Arrive (Terminal + Carousel). Pulse the active dot scale 1→1.15→1 over 1.6s."

• "Build the Delta Today trip header: a full-bleed #003268 → #06203F navy gradient block. Eyebrow 'TODAY · DL 1248' 11pt weight 700 uppercase #8FB4DD. Top-right status pill (rounded-999, on-time = green text on translucent green). Route row: IATA code 34pt weight 800 white, an animated plane glyph between two thin white connecting lines, second IATA code. Sub-row: 'Gate B16 · 10:42 AM' left, 'Seat 14C · 1:02 PM' right, 12pt #9FC0E2."

• "Render the Delta primary button: full-width, #C8102E background, 6pt corner radius, white Open Sans 16pt weight 700, 14pt vertical padding. Pressed: #A30D26 + scale 0.98. Only one per screen ('Check In')."

• "Create the Delta status chip set: rounded-999 pills, 12pt weight 700, 7pt/14pt padding. On Time = #1E8E5A on #1E8E5A1F; Now Boarding = #0F4C9A on #0F4C9A24; Delayed = #C99700 on #C997001F; Canceled = #C8102E on #C8102E1F. Dark mode swaps to the lighter status variant on the same translucent fill."

• "Build the Delta bottom tab bar: 5 tabs (Today, Book, Trips, SkyMiles, More), 22pt icons, active #003268 light / #5BA0E0 dark with filled glyph + 10pt weight-600 label, inactive #8A98AE. No tint pill. 0.5pt top divider, blur background."

Iteration Guide

1. Delta Blue #003268 is the brand/navigation anchor; widget red #C8102E is the single primary-CTA accent (and the canceled/error color) — never a decorative accent
2. The boarding pass is the signature surface and the highest-elevation content: navy→red strip, uppercase name, Gate/Seat/Group grid, scannable barcode
3. A flight-status timeline sits above the pass — vertical dot rail, Departed → In Air → Arrive, times and gates
4. Airport IATA codes, gate, seat, and times are the biggest, boldest glyphs (weight 800) — sized for at-a-glance scanning under stress
5. Functional status colors (green/amber/red) are kept distinct from brand color and are constant across light/dark
6. Dark canvas is a deep navy-charcoal #0B1320 — never neutral black — so the brand navy stays alive
7. The barcode inverts to a light pattern on dark mode so gate scanners still read a dimmed screen
8. SkyMiles gold #C99700 is reserved for Medallion / loyalty emphasis only
9. Motion is calm and functional — plane glide, status cross-fade, active-dot pulse — never decorative bounce
10. Today shows the imminent flight first; everything else is visually subordinate; "Add to Apple Wallet" is prominent and the Wallet pass stays live