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
21tokens
14type steps
1radius steps
18pxspacing base
Southwest, in one page
Southwest's iOS app is built around a single product truth that no other airline shares: there are no assigned seats. You don't pick 14C. You get a *boarding position* — a letter group (A, B, or C) and a number (1–60) — and you board in that order. So the entire app is engineered around two moments that don't exist anywhere else in air travel: the 24-hour check-in countdown (you must check in exactly 24 hours before departure to earn the lowest possible boarding number) and the boarding-position reveal (a giant A23 readout that tells you exactly where you stand in line). Every other screen — booking, trips, Rapid Rewards — is in service of getting you to a good boarding position and a friendly, low-stress trip.
The brand is anchored by the Heart, Southwest's tri-color logo: a heart split into Southwest Blue (#304CB2), Bold Red (#E51D23), and Warm Yellow (#F9B612). These three colors are not decorative — they are a strict role system. Blue is structure (canvas, headers, primary chrome, the brand frame). Yellow is action (the primary CTA, the boarding-position number, the "do this now" signal — it is Southwest's "Spotify Green"). Red is alerts only (cancellations, irregular operations, destructive confirms) — it is never used for decoration, never for a happy CTA. This discipline is the signature of the system: a Southwest screen is mostly navy and white with one loud yellow element, and red appears only when something is wrong.
The app's personality is warm, plainspoken, and a little playful — "Bags fly free", "Wanna Get Away", "Transfarency", "LUV" (the NYSE ticker and the spirit). Copy is friendly and direct; the UI never tries to be clever or minimal for its own sake. Cards are generously rounded (16–20pt), the boarding position is enormous and unmissable, and the check-in countdown is treated like a launch clock. The light theme is white surfaces on a soft cool-gray wash with Southwest Blue chrome; the dark theme (documented here as the primary catalog rendering) drops to a deep navy #0E1726 (a darkened Southwest Blue, never neutral black) with the exact same Yellow and Red so the brand reads identically in any light.
Typography is Southwest Sans (the airline's proprietary humanist sans, by Monotype) with Inter as the open-source fallback for implementation. Hierarchy is loud and confident: the boarding group can reach 88pt weight 900, screen titles are 32pt weight 900, and even body copy leans heavier (400–500) than a typical iOS app, matching the friendly, high-contrast tone. Numbers — boarding positions, fares, points balances, countdown clocks — are always the heaviest, largest things on their screen.
Key Characteristics:
- No seat map anywhere — the product is a boarding position (group A/B/C + number 1–60), not a seat
- 24-hour check-in countdown — a launch-clock ring; check in exactly at T-24h for the best position
- Giant boarding-position readout (
A23) — Warm Yellow group letter, white position number, the loudest element on screen - Heart tri-color role system — Blue = structure, Yellow = action, Red = alerts only (never decoration)
- Wanna Get Away fare ladder — Wanna Get Away / WGA Plus / Anytime / Business Select, dollars + Rapid Rewards points
- Rapid Rewards points-forward loyalty — balance pill, A-List / A-List Preferred tiers, Companion Pass
- "Bags fly free", "Transfarency", "no change fees" — friendly, plainspoken value props surfaced as cards
- Deep navy canvas (
#0E1726) dark / soft cool-gray + white light — never neutral black, always brand-tinted - Generously rounded cards (16–20pt), heavy numeric type (up to 900 weight), confident high-contrast hierarchy
- Bottom tab bar: Home / Book / Trips / Rapid Rewards / Account — Yellow active tint, no pill
Do's and don'ts
Do
- Use Warm Yellow (
#F9B612) as the single primary CTA and the boarding-position group letter - Make the boarding position (
A23) the largest, heaviest, highest-contrast element on its screen - Treat the 24-hour check-in as a launch-clock countdown — a ring that empties toward T-0
- Use Southwest Blue (
#304CB2) for structure, chrome, secondary actions, and points - Reserve Bold Red (
#E51D23) strictly for cancellations, irregular ops, and destructive confirms - Use a deep navy canvas (
#0E1726) for dark mode — a darkened Southwest Blue, never neutral black - Use heavy numeric type (up to 900) with tabular figures for positions, fares, points, clocks
- Keep the voice warm and plainspoken — "Bags fly free", "Wanna Get Away", "no change fees"
- Present fares bottom-up: Wanna Get Away cheapest and leftmost
- Show Rapid Rewards as a points-forward pill with tier badges (A-List)
- Round content cards generously (16pt) and the boarding card most of all (20pt)
Don't
- Don't show a seat map or seat selection — Southwest has no assigned seats; the product is a position
- Don't use Yellow for more than one thing per screen — if two yellows compete, the layout is wrong
- Don't use Red for CTAs, sales badges, or decoration — red means something is wrong
- Don't use neutral black (
#000000) for the dark canvas or body text — use navy#0E1726/ ink#1A2233 - Don't bury the boarding position in a list row — it owns its screen
- Don't use thin/light font weights — the brand is friendly and confident, weights run heavy
- Don't make the check-in moment quiet — it is the highest-stakes interaction in the app
- Don't add a tab-bar pill/indicator — active state is a Warm Yellow tint only
- Don't let numbers jitter — always tabular lining figures on anything that updates
- Don't make it feel like a power-user tool — comfortable density, generous whitespace, warm copy
- Don't desaturate the Heart colors in dark mode — Yellow and Red stay identical across themes
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 Southwest design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Warm Yellow: #f9b612
- Warm Yellow Pressed: #e0a300
- Southwest Blue: #304cb2
- Bright Blue: #2567e8
- Canvas: #ffffff
- Surface Wash: #f2f5fb
- Surface Card: #ffffff
- Surface Pressed: #e7ecf6
- Divider: #dce2ee
- Navy Canvas: #0e1726
Type:
- families: Southwest Sans, Brand Font, Inter, Implementation Fallback
- scale: 10, 11, 12, 13, 15, 16, 18, 19, 22
- weights: 400, 500, 600, 700, 800, 900
Shape:
- radius: 10
Spacing: 18
Rules:
- Use Warm Yellow (`#F9B612`) as the single primary CTA and the boarding-position group letter
- Make the boarding position (`A23`) the largest, heaviest, highest-contrast element on its screen
- Treat the 24-hour check-in as a launch-clock countdown — a ring that empties toward T-0
- Use Southwest Blue (`#304CB2`) for structure, chrome, secondary actions, and points
- Reserve Bold Red (`#E51D23`) strictly for cancellations, irregular ops, and destructive confirms
- Use a deep navy canvas (`#0E1726`) for dark mode — a darkened Southwest Blue, never neutral black
Avoid:
- Don't show a seat map or seat selection — Southwest has no assigned seats; the product is a position
- Don't use Yellow for more than one thing per screen — if two yellows compete, the layout is wrong
- Don't use Red for CTAs, sales badges, or decoration — red means something is wrong
- Don't use neutral black (`#000000`) for the dark canvas or body text — use navy `#0E1726` / ink `#1A2233`
- Don't bury the boarding position in a list row — it owns its screen
- Don't use thin/light font weights — the brand is friendly and confident, weights run heavy
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Warm Yellow (
#F9B612): THE primary action color — primary CTA fill ("Check in", "Continue"), the boarding-position group letter, "do this now" signals. Southwest's brand-defining accent. - Warm Yellow Pressed (
#E0A300): Pressed/active state of the primary CTA. - Southwest Blue (
#304CB2): Structural brand color — secondary CTA fill, headers, the Heart frame, selected chips, brand surfaces. - Bright Blue (
#2567E8): Link / interactive text color — used for inline links and ghost-button borders; on dark it brightens for WCAG AA on the navy canvas.
Canvas & Surfaces (Light Mode)
- Canvas (
#FFFFFF): Primary light canvas — clean white. - Surface Wash (
#F2F5FB): App background behind cards, grouped-table backdrop — a soft cool gray-blue, never neutral. - Surface Card (
#FFFFFF): Card and sheet fills, elevated above the wash with a soft shadow. - Surface Pressed (
#E7ECF6): Pressed list rows. - Divider (
#DCE2EE): Hairline dividers between rows and sections.
Canvas & Surfaces (Dark Mode)
- Navy Canvas (
#0E1726): Primary dark canvas — a darkened Southwest Blue, NOT neutral black. - Dark Surface 1 (
#16223A): Card and sheet fills. - Dark Surface 2 (
#1F2E4A): Raised tiles, segmented controls, secondary fills. - Dark Divider (
#2A3A57): Hairline dividers on dark.
Text
- Text Primary Light (
#1A2233): Primary text on light — a deep navy-ink, NOT pure black. - Text Secondary Light (
#5A6783): Metadata, captions, secondary labels. - Text Tertiary Light (
#8C99B3): Disabled, very low-emphasis, placeholder. - Text Primary Dark (
#EAF0FA): Primary text on the navy canvas. - Text Secondary Dark (
#9DAAC4): Metadata on dark. - Text Tertiary Dark (
#67748F): Disabled / inactive on dark. - Text On Yellow (
#1A1A1A): Text/icon color on the Warm Yellow CTA — near-black for AA contrast. - Text On Blue (
#FFFFFF): Text on Southwest Blue fills.
Heart Tri-Color (Brand)
The three Heart colors are a strict role system — not a palette to mix freely.
| Heart Color | Hex | Role |
|---|---|---|
| Southwest Blue | #304CB2 | Structure — chrome, headers, secondary CTA, brand frame |
| Bold Red | #E51D23 | Alerts only — cancellations, irregular ops, destructive confirm |
| Warm Yellow | #F9B612 | Action — primary CTA, boarding position, "do this now" |
Semantic
| Role | Light | Dark |
|---|---|---|
| Success / On Time | #1E8E4E | #1FAE5E |
| Warning / Delay | #F9B612 | #F9B612 |
| Error / Cancelled | #E51D23 | #E51D23 |
| Info | #304CB2 | #2567E8 |
| Boarding Position (group) | #F9B612 | #F9B612 |
| Boarding Position (number) | #1A2233 on yellow card / #FFFFFF on blue card | #FFFFFF |
| Points / Rapid Rewards | #304CB2 | #2567E8 |
Semantic Notes
- Red is sacred:
#E51D23appears ONLY for flight cancellations, irregular operations, schedule changes, and destructive confirmations ("Cancel reservation"). Never a CTA, never decoration, never a "sale" badge. - Yellow is the one CTA: there is exactly one Warm Yellow element per screen in most cases — the primary action. If two yellows compete, the layout is wrong.
- Blue carries everything else: navigation, structure, secondary actions, the brand frame, points. It is the workhorse.
- The boarding position owns its screen: the
A23readout is always the largest, heaviest, highest-contrast element wherever it appears.
Type scaleRead the full spec
Font Family
- Brand Font:
Southwest Sans(proprietary humanist sans by Monotype for Southwest Airlines) — friendly, rounded terminals, excellent at large display sizes for fares and boarding positions. - Implementation Fallback:
Inter(by Rasmus Andersson, SIL OFL) — closest free humanist sans with a full 100–900 weight range and superb numerals; use for clones. - System Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numerals: tabular, lining figures everywhere numbers update (countdown clock, fares, points balance) so digits don't jitter.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Boarding Group | Southwest Sans | 88pt | 900 | 0.9 | -2pt | The A letter — Warm Yellow, the loudest glyph in the app |
| Boarding Number | Southwest Sans | 52pt | 800 | 1.0 | -1pt | The 23 — white, paired with the group letter |
| Screen Title | Southwest Sans | 32pt | 900 | 1.1 | -0.4pt | "Your trip", "Book a flight" |
| Airport Code | Southwest Sans | 26pt | 800 | 1.05 | -0.4pt | DAL, MDW — 3-letter codes on the flight strip |
| Section Header | Southwest Sans | 22pt | 800 | 1.2 | -0.2pt | "Wanna Get Away", "Choose your flight" |
| Subsection | Southwest Sans | 18pt | 700 | 1.3 | -0.1pt | "Rapid Rewards", "Trip details" |
| Body | Southwest Sans | 16pt | 400 | 1.5 | 0pt | Paragraph copy, value props |
| Body Emphasis | Southwest Sans | 16pt | 600 | 1.5 | 0pt | Inline emphasis, bolded value words |
| Card Title | Southwest Sans | 15pt | 600 | 1.35 | 0pt | "Board in group A, position 23" |
| Fare Price | Southwest Sans | 19pt | 800 | 1.1 | 0pt | "$98" on a fare card |
| Eyebrow / Label | Southwest Sans | 13pt | 700 | 1.2 | 0.6pt | "BOARDING POSITION" — uppercase, tracked |
| Meta | Southwest Sans | 12pt | 500 | 1.3 | 0pt | "WN 2418 · Mon, Jun 9" |
| Button | Southwest Sans | 16pt | 800 | 1.0 | 0.1pt | Primary/secondary button labels |
| Tab Label | Southwest Sans | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Countdown Clock | Southwest Sans | 11pt (ring) / 34pt (full) | 800 | 1.0 | 0pt | Tabular figures, monospace-stable |
Principles
- Numbers are the heroes: boarding positions, fares, points, and countdown clocks are always the heaviest and largest elements on their screen — heavier than any heading near them.
- Friendly, not minimal: body and label weights run heavier (400/500/600) than a typical iOS app to match the warm, confident brand voice. Avoid thin/light weights entirely.
- Tabular figures always: any number that can change (clock, balance, fare) uses tabular lining numerals so layout never shifts.
- Uppercase tracked eyebrows: small labels above big numbers ("BOARDING POSITION", "CONFIRMATION") are 13pt 700 uppercase with +0.6pt tracking.
- Dynamic Type: titles, body, card titles, fare prices scale; boarding group/number, tab labels, eyebrow labels, and the countdown clock stay fixed (layout-critical).
Components and layoutRead the full spec
Buttons
Primary Button (Check in / Continue / Select flight)
- Shape: rounded rectangle, 8pt corner radius, full-width on forms
- Background:
#F9B612(Warm Yellow) — the one CTA color - Text:
#1A1A1ASouthwest Sans 16pt weight 800 - Height: 52pt
- Pressed: background
#E0A300+ scale 0.98 - Disabled:
#F9B612at 38% opacity, text at 50%
Secondary Button (structural action)
- Background:
#304CB2(Southwest Blue) - Text:
#FFFFFFSouthwest Sans 16pt weight 800 - Height: 52pt, 8pt corner radius
- Pressed: background darken 8% + scale 0.98
Ghost / Outline Button
- Background: transparent
- Border: 1.5pt
#2567E8(Bright Blue) - Text:
#2567E8light / brighten on dark, Southwest Sans 14pt weight 700 - Height: 44pt, 8pt corner radius
- Pressed: background
#2567E8at 8% opacity
Destructive Button (Cancel reservation)
- Background: transparent, text
#E51D23Southwest Sans 16pt weight 700 - OR filled
#E51D23/#FFFFFFfor the final destructive confirm only - This is the ONLY place red appears as an action
Text Button (link)
- Southwest Sans 14pt weight 700, color
#2567E8 - No underline; pressed: 60% opacity
Boarding Position Card (the signature atom)
- Container: 20pt corner radius, gradient
#304CB2 → #243C8E(Southwest Blue), soft blue glow shadow - Eyebrow: "BOARDING POSITION" — 13pt 700 uppercase,
rgba(255,255,255,0.78), +1.2pt tracking - Group letter: 88pt weight 900,
#F9B612(Warm Yellow), the dominant element - Position number: 52pt weight 800,
#FFFFFF, baseline-aligned with the group letter - Caption: "Board in group A, position 23" — 13pt 500,
rgba(255,255,255,0.85) - Footer (after a 1pt 18%-white divider): two columns — "BOARDING STARTS / 4:25 PM" and "CONFIRMATION / K9F2Q2", labels 11pt 600 uppercase, values 16pt 700 white
- Optional yellow radial accent bleed in the top-right corner
Check-In Countdown (the second signature atom)
- Container: card, 16pt corner radius,
Surface 1, 1pt divider border - Ring: 54pt circular progress, track
Divider, progress#F9B612(Warm Yellow), 5pt stroke, rounded cap, rotates -90° start - Center clock: tabular
HH:MM11pt 800 in#F9B612 - Texts: title "Check-in opens soon" 15pt 700; subtitle "Opens 24 hrs before departure to lock your spot" 12pt secondary
- Trailing action: small Warm Yellow pill "Notify" → becomes "Check in now" (full yellow CTA) when the ring completes
- When live: the ring fills, the clock turns into a live countdown, and the primary CTA becomes the loud full-width "Check in" button
Flight Strip
- Container: card, 16pt corner radius,
Surface 1 - Route row: origin code (26pt 800) — center mini-route (a 60×14 arrow line in Warm Yellow + "Nonstop · 2h 35m" 10pt uppercase) — destination code (26pt 800)
- Meta row: "WN 2418 · Mon, Jun 9" left, "Gate B14 · 4:55 PM" right, 12pt 500 secondary
- Status chip (optional): "On Time" success / "Delayed" yellow / "Cancelled" red
#E51D23
Wanna Get Away Fare Ladder
- Horizontal row of fare cards (Wanna Get Away / WGA Plus / Anytime / Business Select)
- Each card: 12pt corner radius,
Surface 2fill, 1pt divider border - Selected card: 2pt
#F9B612border + Yellow-at-10% tint fill - Fare name: 11pt 700 uppercase tracked, secondary
- Price: dollars 19pt 800 primary; "5,940 pts" 11pt 600 secondary on the line below
- Bottom-up presentation: cheapest (Wanna Get Away) leftmost
Rapid Rewards Points Pill
- Pill, 500pt radius,
#304CB2(Blue) fill, white text, leading 14pt star glyph filled#F9B612 - Tier variant:
#F9B612fill,#1A1A1Atext, blue star — used for "A-List" / "A-List Preferred" badges - Balance format: "54,820 pts" Southwest Sans 14pt 800 tabular
Navigation
Bottom Tab Bar
- Height: 68pt total (50pt + safe area)
- Background:
#FFFFFFlight /#0E1726dark, 0.5pt top divider, blur on scroll - Tabs (5): Home, Book, Trips, Rapid Rewards, Account
- Icon: 22pt; active fill, inactive stroke
- Active color:
#F9B612(Warm Yellow) — NO pill/indicator; just icon+label tint change - Inactive:
#8C99B3light /#67748Fdark - Labels: Southwest Sans 10pt 600, always shown
Top App Bar
- Height: 44pt + safe area, transparent over canvas
- Title: 22–32pt 800/900 (large title on Home/Trips, compact on detail)
- Leading: back chevron (detail) or none
- Trailing: clock/help icon in a 34pt circular
Surface 2button
Segmented Control (One-way / Round trip)
- Track:
Surface 2, 10pt radius, 4pt inset - Selected segment:
#FFFFFFlight /#304CB2dark thumb, label 14pt 700 - Unselected label: secondary 14pt 500
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Boarding group drops to 72pt; single-column; CTA full-width pinned |
| iPhone 13/14/15 | 390pt | Standard layout; boarding group 88pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; boarding card clears the island |
| iPhone 15/16 Pro Max | 430pt | Boarding group up to 96pt; more vertical breathing room |
| iPad (portrait) | 768pt | Content max 640pt centered; boarding card + flight strip stacked |
| iPad (landscape) | 1024pt+ | 2-up: boarding card beside flight strip; fare ladder in a 4-wide row |
Dynamic Type
- Scales: screen titles, section headers, body, card titles, fare prices, value-prop copy
- Fixed (layout-critical): boarding group/number, countdown clock, tab labels, eyebrow labels, airport codes
- Code/barcode strip never scales
Orientation
- iPhone: portrait-primary; boarding pass supports landscape (barcode rotates for scanners)
- iPad: full rotation; split layouts reflow boarding card / flight strip side-by-side
Touch Targets
- Primary CTA: 52pt tall
- Tab icons: 22pt glyph, 48pt+ hit area
- Fare card: full card tappable, ≥ 64pt tall
- Icon buttons: 34pt visible, 44pt hit
- Date cells: 40pt circular hit
Safe Area Handling
- Top: app bar and boarding card respect the Dynamic Island/notch
- Bottom: tab bar + home indicator respected; pinned CTA sits above the home indicator
- Boarding pass: full-bleed, barcode kept clear of safe-area insets for scannability
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-southwest {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #1a1a1a;
--heading-color: #1a1a1a;
--link-color: #906700;
--link-hover-color: #5d4300;
--border-color: #d6d6d6;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(26,26,26,0.06);
--card-hover-shadow: 0 6px 18px rgba(26,26,26,0.12);
--header-bg: #1a1a1a;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #6a6a6a;
--button-bg: #e0a300;
--button-text-color: #000000;
--button-hover-bg: #ad7e00;
--button-border: none;
--button-border-radius: 10px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #1a1a1a;
--button-secondary-hover-bg: #e4e4e4;
--button-secondary-border: 1px solid #d6d6d6;
--prompt-bg: #f4f4f4;
--prompt-text-color: #1a1a1a;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--card-border-radius: 10px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- tamanohikari 77.3%
- hevy 76.5%
- ana 76.1%
- narita airport 75.6%
- vrbo 73.1%
Where this came from
- Source document
ios/design-md/travel/southwest/DESIGN.md· 27.6 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.