JetBlue Design System

JetBlue's homepage opens with a cookie consent banner over a photography hero, but the structural logic underneath is clear from the first scroll: royal blue (#0033a0) is not an accent held in reserve — it is the page's load-bearing color. The extraction captured 470 total occurrences of this single hex, split across text (234), border (233), and background (3). Every interactive element, every link, every input focus ring in the system traces back to the same royal blue. Where United's blue is dark and institutional and American's blue is a softer cobalt, JetBlue's sits in a middle register: saturated enough to signal brand, light enough to read on a white canvas without feeling heavy.

This DESIGN.md file packages 15 color tokens drawn from 105 clustered CSS custom properties, 14 typography tokens across the proprietary jbklarheit typeface from 32px display to 12px legal caption, 5 corner-radius tokens anchored at 4px, 8 spacing values on a 4px base, and 17 component definitions covering the zero-radius search CTA, the sky-blue-bordered deal card, the deep-navy footer, and the standard flight-booking widget. The CSS exposes a rich brand color vocabulary — orange (#ff8200, --color-secondary --color-brand-evenmore), sky blue, and mint green alongside the primary royal blue — but on the captured marketing surface only the blue family actually renders.

Feed this file to an AI coding tool and it will produce JetBlue's specific moves: royal blue as a structural spine rather than a decorative accent, a zero-radius CTA button that anchors the page's interactive identity, jbklarheit-equivalent typography at weight 500 for headings and 400 for body without ever touching 700 display territory, and a generous 8px module spacing rhythm. The system is worth borrowing for travel-booking, scheduling, and value-brand interfaces that need to feel accessible and direct without reaching for the institutional weight of legacy airlines.