--- version: alpha name: "Southwest Airlines" website: "https://www.southwest.com" description: >- A US low-cost airline whose marketing site runs on a tight navy-and-gold contract — Southwest Sans at 36px / weight 700 in deep navy sits on a white canvas, with a saturated honey-yellow Search button fixed at the center of the booking widget as the load-bearing CTA. The Heart logomark is the brand's one warm chromatic moment; everything else is structural blue. Six near-identical navy tones layer the chrome (a near-black navy at #090f23 for ink, a mid Southwest blue at #304cb2 for links and accents, a darker primary navy at #111b40 for headings) and the rare radius across the whole system is 2px — sharp corners on every button, every input, every card. The system is the airline-marketing inverse of Delta's editorial blacks: friendly via warm voltage rather than via type-driven restraint. seo: title: "Southwest Airlines Design System for React — honey-yellow CTA, Southwest Sans, 18 components" metaDescription: "Southwest Airlines marketing system as a DESIGN.md file — honey-yellow #ffbf27 Search button on navy chrome, Southwest Sans, 2px radius across every surface. Tokens for React and AI tools." highlights: - "Honey-yellow as load-bearing CTA — Southwest yellow #ffbf27 carries the Search booking button while the navy chrome handles every other surface" - "Six-tone navy stack — six near-identical blues (#090f23, #111b40, #1c2d6a, #1a2c80, #304cb2, plus #006bae link blue) ladder the chrome from ink to mid-link blue" - "Sharp-corner radius — 2px appears 104 times on buttons, inputs, and cards; the only round shape is the 50% circle, used 14 times for avatars and icon dots" - "Heart-coded brand voice — the Heart logomark plus a saturated #d5152e warm-red carry the friendly-airline positioning across rewards, danger states, and Pinterest social" - "Southwest Sans across every tier — 36px / 700 h2 down to 10px / 400 disclaimer; no display ladder, no serif companion, no italic emphasis variant" tags: - "Travel & Hospitality" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Southwest's marketing site does something almost no major US airline attempts: it puts a saturated honey-yellow button at the exact center of the booking widget and trusts it to do all the load-bearing CTA work. Above the fold, a navy-and-white booking lozenge floats over a beach-sunset photograph; the date pickers, passenger selector, and routing fields are framed in tight 2px-radius input boxes with hairline borders, and the Search button at the bottom of the lozenge sits in honey-yellow with deep navy text. Where Delta runs a near-black hero with a single thin red voltage and United stays on editorial blue across the chrome, Southwest holds the friendly-airline position by keeping its primary brand color warm — the yellow is the system's main brand handshake, not the navy that dominates the surrounding chrome. The DESIGN.md file packages the system into a machine-readable spec. Inside: 16 color tokens drawn from the page's --primary-100 / --primary-500 / --secondary-500 / --tertiary-500 family (a six-tone navy ladder from near-black ink down to a mid Southwest blue at #304cb2, the honey-yellow voltage, a warm-red danger tone, a success green, plus a small neutral set), 11 Southwest Sans typography tokens spanning the 36px / 700 hero h2 down to a 10px / 400 disclaimer, a polarized 2px-or-50% radius scale, an 8 / 16 / 32px spacing rhythm, and 18 component definitions covering the honey-yellow CTA, the navy-input booking lozenge, the Search-by-fare fare-tile cards, the Rapid Rewards card surface, and the top-nav. Feed this file to an AI coding tool and it reproduces Southwest's specific moves: warm-yellow CTA against a navy structural chrome, six-tone navy ladder that handles every text and border tier, sharp 2px radii across every interactive surface, and Southwest Sans at modest weights. The one move worth borrowing only if your product is itself friendly-coded is the yellow-as-CTA choice — most airlines and SaaS products would read the saturated yellow as a warning rather than as an invitation, and the only reason Southwest gets away with it is the equity of the Heart logomark and forty years of consistent yellow-trim aircraft livery. Treat the navy stack as the reusable part; the yellow only works under those preconditions. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.southwest.com" title: "Southwest Airlines — official site" description: "Southwest's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Southwest's primary brand color?" answer: "Southwest's load-bearing CTA color is honey-yellow, wired into the design system as the secondary-500 token. It appears 18 times on the captured marketing page — 9 as background and 9 as border — almost exclusively on the Search booking button at the center of the hero booking widget and on the Log In and rewards-badge surfaces. The dominant chrome color, by frequency, is the navy primary-500 mid-blue that carries 394 of the captured page's text and border occurrences. Southwest is unusual among US airlines in that the brand's main interactive handshake is the warm yellow rather than the structural navy." - id: "typography" title: "What typeface does Southwest use, and what should I use as a substitute?" answer: "Southwest runs Southwest Sans, a custom proprietary sans-serif, across every tier of the marketing system. The hero h2 sits at 36px / weight 700 with a 48px line-height; body copy at 16px / 400 with a 24px leading; the page's smallest disclaimer text drops to 10px / 400. Fallbacks walk to Arial then to the system sans. Inter at the same weights is the closest open-source substitute; the proportions transfer cleanly and Inter's slightly looser counters read close to Southwest Sans at 14-18px body sizes. The 36px hero is the loudest typographic moment in the system — there is no heavier display tier." - id: "radii" title: "Why are Southwest's corners so sharp?" answer: "The radius scale is polarized at 2px and 50% with almost nothing between them. 2px appears 104 times across the captured page — on every button (including the honey-yellow Search CTA), every input box in the booking widget, every fare-tile card on the destinations rail, every rewards-card surface in the Rapid Rewards band, and every option-button border. 50% appears 14 times for circular avatars and icon dots. There is no 4 / 8 / 12 / 16px middle radius tier. The sharp corner is a deliberate echo of the airline's airport-signage geometry — physical signage uses square corners because routed plastic is cheaper, and the digital surface inherits the convention." - id: "navy-stack" title: "Why are there six different navy blues?" answer: "The chrome layers a six-tone navy ladder from near-black ink at primary-100 down through primary-200 and primary-300 and primary-350 and primary-500 to a mid Southwest blue. The near-black handles 702 of the captured page's text and border occurrences as the dominant ink; the primary-500 blue handles 394 occurrences as the link and active-state color across nav, autocomplete, search-icon, and footer content. The intermediate navies fill the tier-text gradient on paid-tier and A-List badges, plus the dark-blue Save-on-vacation band. Treat the ladder as a structural device — every tier of the chrome maps to a fixed step on the navy scale rather than to an opacity blend." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own airline-marketing site?" answer: "Yes — the file feeds into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Southwest's specific moves: warm-yellow Search CTA against a navy structural chrome, six-tone navy ladder, 2px radius across every interactive surface, and Southwest Sans at the 36px / 700 hero tier. The tokens resolve cleanly without invention. The one move worth borrowing only if your brand has yellow equity is the honey-yellow CTA — for any brand without forty years of yellow-trim livery the saturated yellow reads as a warning rather than as an invitation, and a navy or red CTA on the same scaffolding would carry the booking flow just as well." mockups: - "marketing-hero" - "checkout-flow" colors: primary: "#ffbf27" ink: "#090f23" ink-heading: "#111b40" ink-tier: "#1c2d6a" ink-deep: "#1a2c80" link-blue: "#304cb2" civic-blue: "#0077b7" canvas: "#ffffff" surface-1: "#f4f4f4" hairline: "#cccccc" muted: "#515151" muted-soft: "#7a7a7a" hairline-soft: "#e0e0e0" success: "#00801f" danger: "#d5152e" ink-strong: "#000000" typography: display-md: fontFamily: "\"Southwest Sans\", Arial, sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 48px letterSpacing: 0 display-sm: fontFamily: "\"Southwest Sans\", Arial, sans-serif" fontSize: 28px fontWeight: 700 lineHeight: 42px letterSpacing: 0 heading-md: fontFamily: "\"Southwest Sans\", Arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 36px letterSpacing: 0 heading-sm: fontFamily: "\"Southwest Sans\", Arial, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 28px letterSpacing: 0 body-lg: fontFamily: "\"Southwest Sans\", Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 27px letterSpacing: 0 body-md: fontFamily: "\"Southwest Sans\", Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-md-bold: fontFamily: "\"Southwest Sans\", Arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 24px letterSpacing: 0 body-sm: fontFamily: "\"Southwest Sans\", Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 label-sm: fontFamily: "\"Southwest Sans\", Arial, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 16px letterSpacing: 0 label-eyebrow: fontFamily: "\"Southwest Sans\", Arial, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 20px letterSpacing: 0 input-md: fontFamily: "\"Southwest Sans\", Arial, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 24px letterSpacing: 0 rounded: none: "0px" xs: "2px" sm: "4px" md: "10px" full: "50%" spacing: xxs: "2px" xs: "4px" sm: "8px" md: "12px" base: "16px" lg: "20px" xl: "24px" 2xl: "32px" 3xl: "40px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.ink-heading}" typography: "{typography.body-md-bold}" rounded: "{rounded.xs}" padding: "11px 20px" height: "48px" borderColor: "{colors.primary}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.link-blue}" typography: "{typography.body-md-bold}" rounded: "{rounded.xs}" padding: "11px 20px" height: "48px" borderColor: "{colors.link-blue}" button-login: backgroundColor: "{colors.primary}" textColor: "{colors.ink-heading}" typography: "{typography.body-md-bold}" rounded: "{rounded.xs}" padding: "0" height: "32px" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.link-blue}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "0px 32px" height: "64px" borderColor: "{colors.hairline-soft}" nav-link: backgroundColor: transparent textColor: "{colors.link-blue}" typography: "{typography.body-sm}" padding: "0px 12px" hero-heading: backgroundColor: transparent textColor: "{colors.ink-heading}" typography: "{typography.display-md}" section-heading: backgroundColor: transparent textColor: "{colors.ink-heading}" typography: "{typography.display-md}" body-paragraph: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" body-paragraph-muted: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.body-sm}" eyebrow-label: backgroundColor: transparent textColor: "{colors.ink-heading}" typography: "{typography.label-eyebrow}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-heading}" typography: "{typography.input-md}" rounded: "{rounded.xs}" padding: "4px 8px 3px" height: "48px" borderColor: "{colors.hairline}" booking-lozenge: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-heading}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: "16px" borderColor: "{colors.hairline}" fare-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-heading}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: "16px" borderColor: "{colors.hairline-soft}" rewards-band: backgroundColor: "{colors.ink-deep}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "16px 32px" card-rewards: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink-heading}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: "16px" borderColor: "{colors.hairline-soft}" danger-link: backgroundColor: transparent textColor: "{colors.danger}" typography: "{typography.body-md}" success-link: backgroundColor: transparent textColor: "{colors.success}" typography: "{typography.body-md}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.link-blue}" typography: "{typography.body-sm}" padding: "32px" borderColor: "{colors.hairline}" --- ## Overview Southwest's marketing site does something almost no major US airline attempts. **Warm-CTA inversion.** Where Delta runs a near-black hero with a single thin red voltage and United stays on editorial-blue chrome across every surface, Southwest gives the load-bearing booking CTA to a saturated honey-yellow (`{colors.primary}` — #ffbf27) and lets a six-tone navy stack carry the structural chrome around it. The Search booking button sits at the exact center of the hero booking widget over a beach-sunset photograph; the input fields, the autocomplete dropdowns, the date pickers, and the passenger selector are framed in tight 2px-radius boxes in deep navy (`{colors.ink-heading}` — #111b40) ink on a white canvas, and the yellow button is the warmest surface on the page. The honey-yellow appears 18 times across the captured surface — 9 as background, 9 as border — almost entirely on the Search CTA and the top-nav Log In button. The chrome layers a six-tone navy ladder. Near-black ink (`{colors.ink}` — #090f23) carries 702 of the captured page's text and border occurrences as the dominant ink; the mid Southwest link blue (`{colors.link-blue}` — #304cb2) carries 394 occurrences as the link and active-state color across nav, autocomplete, search icon, and footer content; a darker primary navy (`{colors.ink-heading}` — #111b40) handles 286 occurrences as the heading and button-text color. Three intermediate navies (`{colors.ink-tier}`, `{colors.ink-deep}`, plus the `--primary-300`/350 variants) carry the dark-blue Save-on-vacation band and the A-List tier badges. The ladder is a structural device — every tier maps to a fixed step on the navy scale rather than to an opacity blend. The radius scale is sharp. **Square-corner discipline.** 2px appears 104 times on buttons, inputs, and cards; 50% appears 14 times for circular avatars and icon dots; nothing else is rendered at frequency above 3. There is no 4 / 8 / 12 / 16px middle tier. The sharp corner is the airport-signage geometry: every interactive surface, every fare-tile card, every booking-widget input gets the same 2px corner, and the warmth of the page comes from the yellow CTA plus the beach-sunset photography rather than from generous rounding. **Key Characteristics:** - Single load-bearing CTA color (`{colors.primary}` — #ffbf27) — honey-yellow on the Search booking button, the Log In button, and the rewards badge. 18 total occurrences, 9 as background, 9 as border. - Six-tone navy ladder — `{colors.ink}` (#090f23), `{colors.ink-heading}` (#111b40), `{colors.ink-tier}` (#1c2d6a), `{colors.ink-deep}` (#1a2c80), `{colors.link-blue}` (#304cb2), plus a `{colors.civic-blue}` LinkedIn-tone link — carries the chrome from near-black ink down to mid-link blue. - Sharp-corner radius — `{rounded.xs}` 2px renders on every interactive surface (104 occurrences); `{rounded.full}` 50% renders only on avatars and icon dots (14 occurrences). - Southwest Sans across every tier — 36px / 700 hero h2 down to 10px / 400 disclaimer. No display ladder above 36px, no serif companion, no italic emphasis variant. - Warm-red danger token (`{colors.danger}` — #d5152e) scoped to form-error, password-validation, overnight-indicator, Pinterest, and cancel-button — never on commercial CTAs. - Success green (`{colors.success}` — #00801f) scoped to confirmation-number text, flight-status-success, and password-validation-valid — three occurrences, all as background. - 8 / 16 / 32px spacing rhythm with a tight 2px micro-gap inside booking-widget inputs. - Heart-coded brand voice — the Heart logomark in the wordmark and the saturated `{colors.danger}` red are the brand's only chromatic warmth outside the honey-yellow CTA. ## Colors ### Brand - **Honey Yellow** (`{colors.primary}` — #ffbf27): frequency 18. Used as background (9) and border (9). The load-bearing CTA color — Search booking button, top-nav Log In button, and the rewards-badge background. Wired in CSS as `--secondary-500`, `--primary-badge-background`, `--search-autocomplete-button-background`, `--search-autocomplete-button-border-color`, and `--tier-pending-background`. The single warm chromatic moment on the chrome and the brand's primary interactive handshake. - **Danger Red** (`{colors.danger}` — #d5152e): the brand's warm-red secondary, declared in CSS but absent from the captured render frequency tally. Wired as `--danger-500`, `--tertiary-500`, `--upcoming-trips-cancel-button-color`, `--flight-status-danger`, `--form-field-error`, `--password-validation-message-error`, and `--secondary-youtube`. Scoped to form-error, password-validation, overnight-indicator, and cancel-button surfaces — never on commercial CTAs. ### Chrome Navy Ladder - **Ink** (`{colors.ink}` — #090f23): frequency 702. Used as text (359) and border (343). The dominant ink across the captured page — body paragraphs, form-field labels, autocomplete text, calendar dates. Wired as `--primary-100`, `--upcoming-trips-cutoff-dialog-message-color`, `--itinerary-stations-secondary`. The near-black baseline of the navy ladder. - **Ink Heading** (`{colors.ink-heading}` — #111b40): frequency 286. Used as text (153), border (132), background (1). Display headings, h2s on rewards-band, primary-button text color, search-icon. Wired as `--primary-200`, `--recent-search-text-color`, `--form-field-label`, `--primary-header-search-icon`, `--tier-a-list-preferred-background`. The heading-and-button-label tier of the navy ladder. - **Ink Tier** (`{colors.ink-tier}` — #1c2d6a): the third step of the navy ladder. Wired as `--primary-300`, `--secondary-header-title-section-background`, `--gradients-bold-blue-0-percent`, `--flight-status-neutral`, `--primary-header-horizontal-list-menu-dark-background`. Used on the dark-blue secondary-header band and on neutral flight-status badges. - **Ink Deep** (`{colors.ink-deep}` — #1a2c80): the fourth step. Wired as `--primary-350`, `--package-savings-amount-foreground`, `--tier-a-list-background`, `--gradients-paid-tier-100-percent`, `--gradients-paid-tier-radial-25-percent` (the captured CSS family). The dark band behind the "Save on your entire vacay with Getaways by Southwest" callout and the A-List Preferred member-tier surface. - **Link Blue** (`{colors.link-blue}` — #304cb2): frequency 394. Used as text (195), border (197), background (2). The mid Southwest blue and the page's link / active-state color. Wired as `--primary-500`, `--primary-header-logo`, `--header-link`, `--footer-content`, `--option-button-foreground`, `--itinerary-stations-primary`. The single brand-coded chrome tone after the navy ink — every link, every active autocomplete state, every footer category label. ### Secondary Blue - **Civic Blue** (`{colors.civic-blue}` — #0077b7): the LinkedIn-shaped second blue, declared as `--primary-linkedin`, `--secondary-linkedin`, and `--gradients-turquoise-100-percent`. Scoped to the LinkedIn social-link affordance in the footer and to the turquoise gradient ramp. Not a chrome color outside those two contexts. ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): frequency 76. Used as text (29), background (18), border (29). The page floor, the booking-lozenge surface, the primary-header background, and the inverse text color on the dark-blue rewards band. Wired across the system as `--page-background`, `--primary-header-background`, `--tier-a-list-text`, and 27 other variables. - **Surface-1** (`{colors.surface-1}` — #f4f4f4): frequency 5 as background. The light-gray surface on the Rapid Rewards card band and the special-offer card containers. Wired as `--neutral-800`, `--system-message-background`, `--primary-950`, `--passenger-type-message-background-color`. ### Text Muted - **Muted** (`{colors.muted}` — #515151): frequency 16. Used as text (8) and border (8). Secondary running text — disclaimers, password-validation messages, flight-summary date text, form-field captions. Wired as `--neutral-200`, `--disclaimer-text`, `--form-field-caption`, `--flightStopsTracker-label`. - **Muted Soft** (`{colors.muted-soft}` — #7a7a7a): the third-tier neutral, declared as `--neutral-300`, `--secondary-container`, `--flight-status-scheduled`, `--itinerary-flight-airline-operator-text`. Used on tertiary captions and the scheduled-flight status row. ### Hairline - **Hairline** (`{colors.hairline}` — #cccccc): frequency 12. Used as border (12). The default 1px input border and card-divider rule. Wired as `--neutral-500`, `--autocomplete-separator`, `--footer-separator`, `--recent-search-container-border`, `--upcoming-trips-banner-separator-color`, `--form-field-disabled`. - **Hairline Soft** (`{colors.hairline-soft}` — #e0e0e0): declared as `--neutral-700`, `--autocomplete-disabled`, `--secondary-header-navigation-link-section-foreground`. The softer secondary divider tone. ### Semantic - **Success** (`{colors.success}` — #00801f): frequency 3 as background. Wired as `--success-500`, `--flight-status-success`, `--confirmation-number-text`, `--password-validation-message-valid`, `--username-available`, `--next-day-indicator`. Scoped to confirmation messages, validation success states, and the next-day-departure indicator. - **Ink Strong** (`{colors.ink-strong}` — #000000): frequency 56. Used as text (26), border (25), shadow (5). Wired as `--neutral-100`, `--option-button-border-hover`, `--upcoming-trips-trip-actions-text-color`, `--flight-bound-button-unselected`. Used on the option-button hover-border, the unselected flight-bound button, and the shadow-ink layer. ## Typography ### Font Family The system runs **Southwest Sans** across every tier — a custom proprietary sans-serif Southwest commissioned for the airline. Fallbacks walk `Arial, sans-serif`. There is no separate display family, no serif companion, no italic emphasis variant on the captured surface. One sans-serif does every job — display, heading, body, button, label, input. ### Hierarchy | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-md}` | 36px | 700 | 48px | Hero h2 ("Join Rapid Rewards. Get rewarded rapidly."), section h2 | | `{typography.display-sm}` | 28px | 700 | 42px | Smaller section displays, dark-band callout headlines | | `{typography.heading-md}` | 24px | 700 | 36px | Card-band h3 ("Special Offers", "Save on your entire vacay") | | `{typography.heading-sm}` | 20px | 700 | 28px | Fare-tile prices, callout headlines | | `{typography.body-lg}` | 18px | 400 | 27px | Lead paragraphs, hero sub-copy | | `{typography.body-md}` | 16px | 400 | 24px | Default running text | | `{typography.body-md-bold}` | 16px | 700 | 24px | Primary and secondary button labels, emphasized inline copy | | `{typography.body-sm}` | 14px | 400 | 20px | Nav links, secondary metadata, captions (53 occurrences — the workhorse small-text tier) | | `{typography.label-sm}` | 12px | 700 | 16px | Form-field labels above booking inputs | | `{typography.label-eyebrow}` | 12px | 700 | 20px | Uppercase eyebrow labels above section headings | | `{typography.input-md}` | 20px | 400 | 24px | Booking-widget input field text | ### Principles The 36px / 700 h2 is the loudest typographic tier in the system — there is no 48 / 56 / 64px display moment. Body sits at 16px / 400 with a 24px leading; the 14px / 400 body-sm carries 53 occurrences on the captured page and is the workhorse small-text tier. Button labels at 16px / 700 are deliberately heavier than the body to make the yellow Search CTA read as the warmest interactive surface. There is one all-caps treatment in the system — the 12px / 700 eyebrow label above section headings — and it is the only place small-caps appear at any tier. The input-md tier (20px / 400) is the largest input-field text size on the captured page; the booking-widget date pickers and airport-code fields use it to make the form readable at a glance from the hero photograph behind them. ### Note on Font Substitutes Southwest Sans is proprietary. **Inter** at the same weights is the closest open-source substitute; the proportions transfer cleanly and Inter's slightly looser counters read close to Southwest Sans at 14-18px body sizes. For the 36px hero size, **Geist** holds the cap height and weight-700 stem thickness. The system uses 0 letter-spacing across the board — no tracking adjustments needed when substituting. ## Layout ### Spacing System - **Base unit:** 4px — the page's micro-gap. Combined with an 8px module (19 occurrences) and a 16px macro-module (14 occurrences) for the dominant rhythm. - **Tokens:** `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px · `{spacing.3xl}` 40px. - **Booking lozenge padding:** `{spacing.base}` 16px internal, with a tight 2px micro-gap between adjacent input boxes. - **Section padding:** `{spacing.base}` 16px vertical, `{spacing.2xl}` 32px horizontal on the rewards band and the dark-blue Getaways callout. - **Button padding:** 11 / 20px on the primary Search CTA (the asymmetric padding centers the bold Southwest Sans optically on the 48px button height). ### Grid & Container - **Max content width:** ~1024px on the booking lozenge, ~1200px on the special-offers card row. - **Hero block:** the hero photograph extends edge-to-edge behind the booking lozenge; the lozenge floats centered with a 1px hairline outline and a tight 2px-radius corner. To the right of the lozenge sits a "Tides out, summer sale's in." callout with a $69 fare tile and a yellow-bordered Book Now button. - **Below the booking widget:** a Rapid Rewards card band (full-width pale `{colors.surface-1}` band with a credit-card mockup and a yellow Apply Now CTA), a dark-blue Getaways callout, a Heart Plane "Join Rapid Rewards" band with a Southwest aircraft photograph, and a 3-up Special Offers card row (Cruise / Rent a car / Book a hotel) with cyan / green / blue accent corners on each card. - **Footer:** multi-column civic-link grid with `{colors.link-blue}` text and a 1px `{colors.hairline}` divider. ### Rhythm The page alternates **booking dense / marketing dense / footer dense** — there is no editorial breathing band. Above the fold the booking lozenge plus the right-rail callout pack the hero with form fields, prices, and CTAs; below the fold the Rapid Rewards, Getaways, and Special Offers bands stack at tight 32-40px vertical gaps. This is the opposite of the magazine-style cadence on Cloudflare or Spline — Southwest's page is a transactional surface first and a marketing surface second, and the spacing rhythm reflects it. ## Elevation The system has essentially **no shadow tier**. The captured page renders 5 occurrences of `{colors.ink-strong}` as shadow ink, all confined to faint elevations on the booking-lozenge surface, the autocomplete dropdown, and the option-button focus state. The fare-tile cards, the Rapid Rewards band, and the Special Offers cards all use a 1px `{colors.hairline-soft}` border rather than a drop shadow. - **Flat (no shadow):** body, hero photograph, marketing bands, footer — 99% of surfaces. - **Lozenge elevation:** the booking widget sits with a faint shadow halo over the beach-sunset photograph; the shadow uses `{colors.ink-strong}` at low opacity rather than a tinted navy. - **Autocomplete dropdown:** faint shadow on the focus state. No drop shadow on the resting state. - **Hairline borders:** the system uses 12 captured occurrences of `{colors.hairline}` and additional uses of `{colors.hairline-soft}` to carry the work that shadows would otherwise carry. ## Shapes The radius scale is **polarized**: a tight 2px on every interactive surface, plus a 50% circle for avatars and icon dots, with almost nothing between. - `{rounded.none}` 0px — display headings, body text, the dark-blue rewards band. - `{rounded.xs}` 2px — frequency 104. The dominant interactive radius: primary Search CTA, secondary Log In button, every input box in the booking widget, every fare-tile card, every option-button, every autocomplete row. - `{rounded.sm}` 4px — frequency 1. A rare middle radius captured once on a small chip. - `{rounded.md}` 10px — frequency 3. The slightly-rounder badge variant used on rewards-tier indicators and the "Earn 50,000 points" callout pill. - `{rounded.full}` 50% — frequency 14. Circular avatars, icon dots, the social-link icon row in the footer. There is no 6 / 8 / 12 / 16 / 20px middle tier. The sharp corner is the system's main visual signature and the warmth of the page comes from the yellow CTA plus the beach-sunset photography rather than from generous rounding. Compare to Spline's 16px-default rounding or to Cloudflare's binary 3px-or-pill scale — Southwest takes a third position: sharp everywhere except a single full-circle for avatars. ## Components **`button-primary`** — The signature CTA. Honey-yellow `{colors.primary}` (#ffbf27) fill, navy `{colors.ink-heading}` text, `{rounded.xs}` 2px radius, 11x20 padding, 48px height. The Search booking button at the bottom of the hero lozenge is the canonical instance. **`button-secondary`** — White `{colors.canvas}` fill, link-blue text and 1px border, `{rounded.xs}` 2px radius. Used for "Manage trip" / "View details" / secondary CTAs across the marketing bands. **`button-login`** — Same honey-yellow fill but at 32px height — the top-nav Log In button. A miniature variant of the primary CTA. **`top-nav`** — White `{colors.canvas}` surface, 64px height, `{spacing.2xl}` 32px horizontal padding, 1px `{colors.hairline-soft}` bottom border. Houses the Heart-logomark Southwest wordmark flush left, the primary nav cluster center (Flight / Hotel / Car / Vacations / Cruises), and the right-aligned "Special offers" / "Help" / "Log In" cluster. **`nav-link`** — Transparent background, link-blue `{colors.link-blue}` text in `{typography.body-sm}` (14px / 400), 0 / 12px padding. **`hero-heading`** — Navy `{colors.ink-heading}` text on the white canvas, `{typography.display-md}` (36px / 700 / 48px leading). The h2 inside the Rapid Rewards band ("Join Rapid Rewards. Get rewarded rapidly."). **`section-heading`** — Same 36px / 700 token, used for "Special Offers" and other below-fold section h2s. **`body-paragraph`** — Default ink running-text at `{typography.body-md}` (16px / 400 / 24px leading). The single-paragraph dek beneath each section headline. **`body-paragraph-muted`** — `{colors.muted}` variant for disclaimer text and secondary footer captions. **`eyebrow-label`** — `{typography.label-eyebrow}` (12px / 700 uppercase) above section headings. **`text-input`** — White `{colors.canvas}` fill, navy `{colors.ink-heading}` text at `{typography.input-md}` (20px / 400), 1px `{colors.hairline}` border, `{rounded.xs}` 2px radius, 4/8/3 asymmetric padding, 48px height. The booking-widget date pickers and airport-code fields. **`booking-lozenge`** — White surface, 1px `{colors.hairline}` border, `{rounded.xs}` 2px radius, 16px internal padding. The hero booking widget that floats over the beach-sunset photograph. **`fare-card`** — White surface, 1px `{colors.hairline-soft}` border, `{rounded.xs}` 2px radius, 16px padding. The Special Offers cards (Cruise / Rent a car / Book a hotel) and the fare-tile cards. **`rewards-band`** — Dark-blue `{colors.ink-deep}` fill, white text, no border-radius, 16/32 padding. The "Save on your entire vacay with Getaways by Southwest" callout band and the paid-tier / A-List Preferred tier surfaces. **`card-rewards`** — Pale `{colors.surface-1}` (#f4f4f4) fill, navy text, `{rounded.xs}` 2px radius, 16px padding. The Rapid Rewards credit-card band ("Earn 50,000 points. Plus 7,500 anniversary points each year") with the credit-card mockup on the left. **`danger-link`** — Transparent fill, danger-red `{colors.danger}` text at body-md typography. Scoped to error messages, cancel-trip links, and the password-validation-error state. **`success-link`** — Transparent fill, success-green `{colors.success}` text. Scoped to confirmation numbers, password-validation-valid messages, and the username-available indicator. **`footer`** — White canvas, link-blue text at `{typography.body-sm}` (14px / 400), 32px padding, 1px `{colors.hairline}` top divider. Multi-column civic-link grid with the link-blue carrying every footer link. ## Do's and Don'ts **Do** hold the honey-yellow `{colors.primary}` (#ffbf27) for the load-bearing booking CTA and the rewards-tier badge. The yellow appears 18 times on the captured surface and almost all of those occurrences cluster on Search, Log In, and the rewards badge. Spreading it across multiple secondary CTAs on the same page dilutes the brand's main interactive handshake. **Do** use the six-tone navy ladder as a structural device — every tier of the chrome maps to a fixed step on the scale (`{colors.ink}` for body ink, `{colors.ink-heading}` for headings + button text, `{colors.link-blue}` for links, etc.). Picking a navy at the wrong step breaks the chrome's internal logic. **Do** keep the radius at `{rounded.xs}` 2px on every interactive surface. The sharp corner is the airport-signage geometry and the system's main visual signature; rounding the Search button to 8 or 12px softens the brand and breaks the geometric discipline. **Do** scope the warm-red `{colors.danger}` (#d5152e) to form-error and cancel-trip surfaces only. The brand's Heart logomark plus the danger red are the only chromatic warmth outside the yellow CTA, and using the red on a commercial chrome surface reads as a warning rather than as warmth. **Don't** introduce a 4 / 8 / 12 / 16px middle radius tier. The system is polarized at 2px on every interactive surface and 50% on avatars; adding a middle softens the sharp-corner discipline. The captured page renders 2px 104 times and 50% 14 times — every other radius is at frequency 3 or below. **Don't** flip the chrome to a yellow-dominant surface. The yellow carries 18 occurrences against the navy ladder's combined 1380+ — the saturated yellow only works at small surface area against the calm navy chrome around it, and a full-bleed yellow band would read as a warning page. **Don't** use the civic blue `{colors.civic-blue}` (#0077b7) as a link color outside the LinkedIn social affordance. It is wired only as `--primary-linkedin` and `--secondary-linkedin` in the captured CSS; treating it as a general link tone breaks the chrome's structural color scoping. **Don't** add a third typeface or a serif emphasis tier. The system runs Southwest Sans across every tier of the page, with no italic or serif companion. Adding a serif emphasis or a display-mono tier would read as borrowed from a magazine system rather than from the airline's transactional chrome. ## Known Gaps - **Hover and focus states:** the captured surface exposes a small set of `--option-button-border-hover` / `--option-button-background-focus` / `--option-button-background-focus-visible` variables but the full state matrix (disabled, pressed, error focus) is not captured. - **Mobile breakpoints:** the captured surface is the 1440px desktop view. The mobile booking-lozenge collapse, the hamburger nav, and the bottom-aligned Search CTA are not represented in the tokens. - **Form validation states:** the password-validation, username-availability, and form-field-error styles are wired in CSS but only the resting state appears on the captured page. The active-error UI with the warm-red message text is not represented visually. - **Motion:** the booking lozenge carries no visible scroll-driven animation on the captured surface, but the production page has subtle hover-driven autocomplete dropdowns that are not captured. - **Authenticated chrome:** the My Account / Rapid Rewards member dashboard surface uses a darker primary-200 chrome and an expanded set of trip-management tokens that are not represented here. - **Product sub-brands:** Southwest Vacations, Getaways by Southwest, and the Southwest Business surface each carry sub-brand chrome variants — the magenta `--tertiary-vacations-300/400/500` family and the cyan `--secondary-vacations-700` family are declared but absent from the captured render. None of those sub-brand tokens are in the captured page. - **Rapid Rewards tier badges:** the A-List Preferred, A-List, paid-tier, and Pending tier-badge surfaces are wired into the CSS (six gradient tokens) but only the A-List Preferred background appears on the captured page; the gradient end-stop values for the other tiers live in the member dashboard.