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
4radius steps
12pxspacing base
Delta, in one page
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
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 —
#0B1320keeps 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
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 Delta design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Delta Blue: #003268
- Delta "widget" red: #c8102e
- gold: #c99700
- Delta Red: #c8102e
- Delta Red Pressed: #a30d26
- Delta Blue Bright: #0f4c9a
- Canvas White: #ffffff
- Surface Gray: #f4f6f9
- Surface Pressed: #e8ecf3
- Divider: #d6dce7
Type:
- families: Brand Face, Open Sans, Numerals
- scale: 10, 12, 14, 15, 16, 18, 22, 26, 34
- weights: 400, 600, 700, 800
Shape:
- radius: 0, 6, 9, 10
Spacing: 12, 13, 14, 16
Rules:
- 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
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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#003268would 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
| Role | Light Mode | Dark Mode |
|---|---|---|
| Delta Blue | #003268 | #003268 |
| Delta Blue Bright | #0F4C9A | #0F4C9A |
| Delta Red (widget) | #C8102E | #C8102E |
| Widget Maroon (logo shadow) | #862633 | #862633 |
| SkyMiles Gold | #C99700 | #C99700 |
| Sky Light (header tint) | #E7F0FA | #1A2C44 |
Flight Status (Functional — constant across modes)
| Role | Light Mode | Dark Mode | Use |
|---|---|---|---|
| On Time | #1E8E5A | #4FD18C | "On Time", departed-on-time, arrived |
| Boarding | #0F4C9A | #6FB0EA | "Now Boarding", "Boarding Soon" |
| Delayed | #C99700 | #E0B743 | "Delayed", schedule change |
| Canceled / Error | #C8102E | #E0414E | "Canceled", IROP, error |
| Gate Changed | #D9730D | #F0954E | "Gate Changed" alert |
Semantic
- Error Red (
#C8102E/#E0414Edark): Inline error, canceled flight, failed payment. - Success Green (
#1E8E5A/#4FD18Cdark): Check-in complete, payment success. - Warning Amber (
#C99700/#E0B743dark): Delay, schedule change, expiring fare. - Selection Highlight (
#0F4C9A1F): 12% blue overlay on selected rows.
Type scaleRead the full spec
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
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Route IATA | Open Sans | 34pt | 800 | 1.05 | -0.5pt | ATL → JFK airport codes, the trip hero |
| Screen Title | Open Sans | 26pt | 800 | 1.15 | -0.3pt | "Your trip today", screen H1 |
| Section Header | Open Sans | 22pt | 700 | 1.2 | -0.2pt | "Flight status", "Trip extras" |
| Card / Pax Name | Open Sans | 18pt | 700 | 1.25 | 0pt | Passenger name (uppercase) on pass |
| Data Value (large) | Open Sans | 22pt | 800 | 1.1 | 0pt | Gate/Seat/Group cell values |
| Body | Open Sans | 16pt | 400 | 1.5 | 0pt | Paragraph, descriptions |
| Data Value (inline) | Open Sans | 15pt | 600 | 1.3 | 0pt | "Seat 14C · SKY PRIORITY" |
| Meta | Open Sans | 14pt | 400 | 1.4 | 0pt | "Est. arrival 1:02 PM EDT" |
| Eyebrow / Label | Open Sans | 12pt | 700 | 1.0 | 0.6pt | "TODAY · DL 1248" uppercase |
| Cell Label | Open Sans | 10pt | 700 | 1.0 | 0.6pt | "GATE" / "SEAT" / "GROUP" uppercase |
| 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" / "Delayed" |
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).
Components and layoutRead the full spec
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:
#C8102Eat 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:
#10243Flight /#E8ECF3dark, Open Sans 14pt weight 600 - Border: 1.5pt
#5A6A82light /#9AA6BCdark - Corner radius: 6pt; padding 12pt / 20pt
- Pressed: background
#0F4C9A14
Text Button (Flight details)
- Text:
#0F4C9Alight /#6FB0EAdark, Open Sans 14pt weight 700 - No background, no underline
- Pressed: 60% opacity
Boarding Pass (signature surface)
- Container:
#FFFFFFlight /#131C2Bdark, 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:
#25314Adivider 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 → #06203Fnavy 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/#1C2738background
Status Chips
- Rounded-999 pill, 12pt weight 700, 7pt vertical / 14pt horizontal padding
- On Time:
#1E8E5Atext on#1E8E5A1F - Now Boarding:
#0F4C9Atext on#0F4C9A24 - Delayed:
#C99700text on#C997001F - Canceled:
#C8102Etext on#C8102E1F - (Dark mode uses the lighter status variants on the same translucent fill)
Navigation
Bottom Tab Bar
- Height: 68pt + safe area
- Background:
#FFFFFF/#0B1320with 0.5pt top divider, blur saturate(180%) blur(20px) - Tabs (5): Today, Book, Trips, SkyMiles, More
- Icon size: 22pt; active color
#003268light /#5BA0E0dark (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
#003268or transparent over the trip header - Leading: back chevron (white over navy)
- Center: contextual title (e.g. "DL 1248")
- Trailing: share / refresh icon
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Pass data grid stays 3-up; timeline compresses meta to one line |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; trip header offsets content below island |
| iPhone 15/16 Pro Max | 430pt | Larger IATA codes; pass scales up, more meta visible |
| iPad (portrait) | 768pt | Two-column: trips list (left) + selected trip detail (right) |
| iPad (landscape) | 1024pt+ | Trip detail max 700pt centered; pass max 420pt |
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-delta {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #131c2b;
--heading-color: #131c2b;
--link-color: #8d6a00;
--link-hover-color: #5a4400;
--border-color: #d5d6d9;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(19,28,43,0.06);
--card-hover-shadow: 0 6px 18px rgba(19,28,43,0.12);
--header-bg: #131c2b;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #666b75;
--button-bg: #c99700;
--button-text-color: #000000;
--button-hover-bg: #967100;
--button-border: none;
--button-border-radius: 9px;
--button-secondary-bg: #f1f1f2;
--button-secondary-text-color: #131c2b;
--button-secondary-hover-bg: #e3e4e6;
--button-secondary-border: 1px solid #d5d6d9;
--prompt-bg: #f3f4f4;
--prompt-text-color: #131c2b;
--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.
- united airlines 80.7%
- grammarly 80.4%
- happn 80.2%
- deepseek 79.8%
- hevy 79.7%
Where this came from
- Source document
ios/design-md/travel/delta/DESIGN.md· 25.2 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.