designmd-forge 1.2.0

package/dist/data/designs/ios-southwest.md

@@ -0,0 +1,405 @@
+# Design System Inspiration of Southwest (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+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
+
+## 2. Color Palette & Roles
+
+### 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**: `#E51D23` appears 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 `A23` readout is always the largest, heaviest, highest-contrast element wherever it appears.
+
+## 3. Typography Rules
+
+### 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).
+
+## 4. Component Stylings
+
+### 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: `#1A1A1A` Southwest Sans 16pt weight 800
+- Height: 52pt
+- Pressed: background `#E0A300` + scale 0.98
+- Disabled: `#F9B612` at 38% opacity, text at 50%
+
+**Secondary Button (structural action)**
+- Background: `#304CB2` (Southwest Blue)
+- Text: `#FFFFFF` Southwest 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: `#2567E8` light / brighten on dark, Southwest Sans 14pt weight 700
+- Height: 44pt, 8pt corner radius
+- Pressed: background `#2567E8` at 8% opacity
+
+**Destructive Button (Cancel reservation)**
+- Background: transparent, text `#E51D23` Southwest Sans 16pt weight 700
+- OR filled `#E51D23` / `#FFFFFF` for 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:MM` 11pt 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 2` fill, 1pt divider border
+- Selected card: 2pt `#F9B612` border + 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: `#F9B612` fill, `#1A1A1A` text, 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: `#FFFFFF` light / `#0E1726` dark, 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: `#8C99B3` light / `#67748F` dark
+- 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 2` button
+
+**Segmented Control (One-way / Round trip)**
+- Track: `Surface 2`, 10pt radius, 4pt inset
+- Selected segment: `#FFFFFF` light / `#304CB2` dark thumb, label 14pt 700
+- Unselected label: secondary 14pt 500
+
+### Input Fields
+
+**Search / Field**
+- Height: 52pt
+- Background: `#FFFFFF` light (1pt `#DCE2EE` border) / `#1F2E4A` dark
+- Corner radius: 10pt
+- Leading 18pt icon `#5A6783`
+- Label floats above on focus; focus border 2pt `#304CB2`
+- Placeholder: 16pt 400 tertiary
+
+**Airport Picker Row**
+- 56pt tall, leading 3-letter code in a tinted square, city name 16pt 600 + "DAL · Dallas Love Field" 12pt secondary
+- Selected: `#304CB2` at 8% tint + leading checkmark
+
+**Date / Calendar**
+- Month grid; selected date `#304CB2` filled circle, white text
+- Range: endpoints filled blue, in-between days `#304CB2` at 12% tint
+- Today: 1.5pt `#F9B612` ring
+
+### Distinctive Components
+
+**Boarding Position Reveal**
+- After check-in completes, the position animates in: the card scales 0.96 → 1.0, the group letter counts up A→ (or just pops), and a soft success haptic fires. This is the app's payoff moment.
+
+**24-Hour Check-In Clock**
+- The launch-clock metaphor: a ring that empties toward T-0, a tabular HH:MM:SS when within the final hour, and a state flip to the full Warm Yellow "Check in" CTA exactly at T-24h.
+
+**Bags Fly Free / Transfarency Cards**
+- Friendly value-prop cards: a leading illustrative icon, a bold one-line claim ("Bags fly free"), and a plain-language sub. Blue or neutral surface, never red. These reinforce the warm brand voice.
+
+**Digital Boarding Pass**
+- Full-screen pass: large `A23` position, QR/barcode, flight strip, "Confirmation K9F2Q2", brand Heart watermark. The position number remains the visual hero even here.
+
+**Rapid Rewards Hub**
+- Big tabular points balance (32pt 900), tier badge pill (A-List), Companion Pass progress bar, "Points + cash" toggle on fares.
+
+**Flight Status Timeline**
+- Vertical timeline: Scheduled → Boarding → Departed → Arrived; current node Warm Yellow filled, completed nodes Blue, future nodes divider-gray; a red node + banner only on cancellation/irregular ops.
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
+- Screen horizontal inset: 20pt
+- Card internal padding: 18–22pt
+- Gap between stacked cards: 18pt
+- Boarding card is visually dominant — it gets the most vertical real estate above the fold
+
+### Grid & Container
+- iPhone: single column, 20pt insets, full-width cards and CTAs
+- iPad: content max-width 640pt centered; the boarding card may sit beside the flight strip in a 2-up on wide layouts
+- The primary CTA is always full-width and pinned (or bottom of scroll) on action screens
+
+### Whitespace Philosophy
+- **The position breathes**: the boarding card is surrounded by generous space so the `A23` reads instantly — never crowded by chrome
+- **One loud thing per screen**: lots of calm navy/white, one Warm Yellow focal point; red only on exceptions
+- **Cards over lists**: information is grouped into rounded cards with clear internal hierarchy, not dense table rows
+- **Friendly density**: comfortable, not compact — Southwest is not a power-user tool
+
+### Border Radius Scale
+- Square (0pt): full-bleed dividers, the barcode strip
+- Subtle (4pt): tiny chips, accent ticks
+- Standard (8pt): buttons, fields-adjacent elements
+- Field (10pt): inputs, segmented controls
+- Card (12pt): fare cards, list cards
+- Comfortable (16pt): primary content cards, sheets
+- Hero (20pt): the boarding-position card
+- Pill (500pt): points pills, status chips, filter chips
+- Circle (50%): avatars, the countdown ring, icon buttons
+
+## 6. Depth & Elevation
+
+Southwest uses soft, brand-tinted elevation — never harsh neutral shadows.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Canvas, inline text, dividers |
+| Card (Level 1) | `rgba(20,30,55,0.08) 0 2px 10px` light / 1pt `#2A3A57` border on dark | Standard cards, fare cards |
+| Hero (Level 2) | `rgba(48,76,178,0.30) 0 14px 30px -16px` (blue-tinted glow) | Boarding-position card |
+| Sheet (Level 3) | `rgba(14,23,38,0.18) 0 -6px 24px` | Bottom sheets (fare details, seat-free explainer) |
+| Modal Overlay | `rgba(14,23,38,0.55)` scrim | Behind modals and sheets |
+
+**Shadow Philosophy**: elevation is used to lift the boarding card above everything else — its shadow is a *blue glow*, not gray, reinforcing the Heart. Standard cards get a faint cool shadow on light and a 1pt divider border on dark (shadows read poorly on the navy canvas). Nothing else floats.
+
+### Motion
+- **Boarding-position reveal**: card scales `0.96 → 1.0` over 280ms `easeOut`, group letter cross-fades + 6pt rise, soft success haptic — the payoff moment
+- **Check-in countdown tick**: clock digits flip with a 120ms vertical roll; the ring animates its stroke continuously; at T-0 the ring fills and the CTA cross-fades to the full Warm Yellow "Check in" over 240ms
+- **Primary CTA press**: scale `1.0 → 0.98` 120ms + Warm Yellow → Pressed Yellow
+- **Fare selection**: selected card border animates Yellow in over 150ms; price area subtle scale 1.0 → 1.03 → 1.0
+- **Tab change**: instant icon/label tint to Warm Yellow; no pill slide (there is no pill)
+- **Sheet present**: bottom sheet rises 320ms `easeOut` with scrim fade
+- **Page push**: native iOS push, 300ms horizontal slide
+- **Cancellation alert**: the red banner slides down 220ms and a warning haptic fires — the only place red animates
+- **Haptics**: success on check-in/position reveal; light on CTA press and fare select; warning on cancellation
+
+## 7. 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
+
+## 8. Responsive Behavior
+
+### 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
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA / boarding group (Warm Yellow): `#F9B612` (pressed `#E0A300`)
+- Structure / secondary (Southwest Blue): `#304CB2`
+- Link / bright blue: `#2567E8`
+- Alerts only (Bold Red): `#E51D23`
+- Canvas (light): `#FFFFFF` · wash `#F2F5FB`
+- Canvas (dark): `#0E1726` · surface 1 `#16223A` · surface 2 `#1F2E4A`
+- Divider: `#DCE2EE` light / `#2A3A57` dark
+- Text primary: `#1A2233` light / `#EAF0FA` dark
+- Text secondary: `#5A6783` light / `#9DAAC4` dark
+- Text on Yellow: `#1A1A1A` · text on Blue: `#FFFFFF`
+- Success: `#1E8E4E` light / `#1FAE5E` dark
+
+### Example Component Prompts
+- "Build the Southwest boarding-position card in SwiftUI: 20pt corner radius, gradient `#304CB2 → #243C8E`, soft blue glow shadow `rgba(48,76,178,0.3) 0 14px 30px -16px`. Eyebrow 'BOARDING POSITION' Southwest Sans 13pt w700 uppercase `rgba(255,255,255,0.78)` +1.2pt tracking. Group letter 'A' 88pt w900 `#F9B612`; position number '23' 52pt w800 white, baseline-aligned. Caption 'Board in group A, position 23' 13pt w500 `rgba(255,255,255,0.85)`. 1pt 18%-white divider, then two columns: 'BOARDING STARTS / 4:25 PM' and 'CONFIRMATION / K9F2Q2'."
+
+- "Create the Southwest 24-hour check-in countdown: card 16pt radius `#16223A` with 1pt `#2A3A57` border. Leading 54pt ring — track `#2A3A57`, progress `#F9B612` 5pt stroke rounded cap rotated -90°, center tabular clock '23:41' 11pt w800 `#F9B612`. Title 'Check-in opens soon' 15pt w700, sub 'Opens 24 hrs before departure to lock your spot' 12pt secondary. Trailing Warm Yellow pill 'Notify'. When the ring completes, swap the pill for a full-width `#F9B612` 52pt 'Check in' CTA with `#1A1A1A` text."
+
+- "Build the Southwest primary button: 52pt tall, 8pt corner radius, `#F9B612` fill, label Southwest Sans 16pt w800 `#1A1A1A`. Pressed: `#E0A300` + scale 0.98. There is exactly one of these per screen — it is the only Warm Yellow element."
+
+- "Render the Wanna Get Away fare ladder: a horizontal row of cards (Wanna Get Away, WGA Plus, Anytime, Business Select) cheapest leftmost. Card 12pt radius `#1F2E4A`, 1pt `#2A3A57` border; selected card 2pt `#F9B612` border + Yellow-10% fill. Fare name 11pt w700 uppercase tracked secondary; price '$98' 19pt w800 primary; '5,940 pts' 11pt w600 secondary below."
+
+- "Build the Southwest bottom tab bar: 5 tabs Home / Book / Trips / Rapid Rewards / Account, height 68pt, `#0E1726` dark bg, 0.5pt `#2A3A57` top divider. Active tint `#F9B612` (icon fill + label), inactive `#67748F`. NO pill or indicator — only a color tint change. Labels Southwest Sans 10pt w600 always visible."
+
+- "Create the Southwest flight status timeline: vertical nodes Scheduled → Boarding → Departed → Arrived. Current node `#F9B612` filled, completed nodes `#304CB2`, future nodes `#2A3A57`. On cancellation only, render a node and top banner in `#E51D23` with a warning haptic."
+
+### Iteration Guide
+1. There is NO seat map — never add seat selection; the product is a boarding position (group A/B/C + number 1–60)
+2. The boarding position (`A23`) is the loudest element on its screen — Warm Yellow group letter, white number, 88/52pt weight 900/800
+3. The 24-hour check-in is a launch clock — a ring emptying toward T-0 that flips to the full Yellow CTA at T-24h
+4. Warm Yellow `#F9B612` is the ONE primary CTA color — one per screen; Blue `#304CB2` is everything structural
+5. Bold Red `#E51D23` is alerts ONLY — cancellations, irregular ops, destructive confirms; never decoration or a CTA
+6. Dark canvas is navy `#0E1726` (a darkened Southwest Blue), never neutral black; light text is ink `#1A2233`
+7. Numbers are heavy and tabular — positions, fares, points, clocks never jitter and outweigh nearby headings
+8. Fares present bottom-up: Wanna Get Away cheapest and leftmost; show dollars + Rapid Rewards points together
+9. Cards are generously rounded (16pt) and the boarding card most of all (20pt) with a blue-glow shadow
+10. Voice is warm and plainspoken — "Bags fly free", "Wanna Get Away", "no change fees"; never minimal-for-its-own-sake