Southwest Airlines Design System

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.