--- version: alpha name: "JetBlue" website: "https://www.jetblue.com" description: >- A consumer airline whose digital system is anchored on royal blue (#0033a0, wired as --color-primary and --color-royal-blue) across 470 total occurrences — text, border, and background simultaneously — with a proprietary typeface named jbklarheit running every tier from 32px display to 12px caption in a single family. A sky blue secondary (#8dc8e8) serves as the accent-1 brand color for hover states and section dividers, while the deep navy (#00205b, --color-brand-core) marks the pressed and darkened brand state. The system is lighter than United, warmer than American, and more consumer-facing than Delta — a value-carrier design vocabulary that trusts cheerful photography and a generous 4px base grid over institutional gravitas. seo: title: "JetBlue Design System for React — royal blue #0033a0, jbklarheit, 17 components" metaDescription: "JetBlue's marketing-site design tokens as a DESIGN.md spec. Royal blue #0033a0 primary, jbklarheit typeface, sky blue accent, 15 color tokens, 14 typography levels, 17 components. For React, Next.js, and AI coding tools." highlights: - "Royal blue as structural spine — #0033a0 (--color-primary) dominates 470 occurrences as text, border, and CTA background simultaneously" - "jbklarheit — JetBlue's proprietary humanist sans across every tier; Inter is the open-source equivalent" - "Sky blue secondary accent — #8dc8e8 (--color-sky-blue) used for hover states, card borders, and section dividers; never as a CTA background" - "4px grid, 8px dominant module — spacing at 8px (85 occurrences) and 16px (36) drives a dense-but-airy information layout" - "Zero-radius primary button — the search CTA sits at 0px border-radius while cards run 4-16px; the angular CTA is the deliberate identity anchor" tags: - "Travel & Hospitality" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. 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.jetblue.com" title: "JetBlue — official site" description: "JetBlue'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 JetBlue's primary brand color?" answer: "JetBlue's primary brand voltage is royal blue (#0033a0), wired into the CSS as --color-royal-blue and --color-primary. It is the most-used hex on the marketing surface — 470 total occurrences split almost equally between text (234) and border (233), with just 3 background fills. This makes it unusual among airline brands: the primary color is a text and border color first, a button fill color second. The CTA button 'Search flights' sits on a solid #0033a0 background. Deep navy (#00205b, --color-brand-core) is the pressed/hover state, darker by two stops." - id: "typography" title: "What typeface does JetBlue use, and what should I substitute?" answer: "JetBlue runs jbklarheit — a proprietary humanist sans-serif wired as --font-sans and --font-jbklarheit. It runs every tier of the system from 32px display headlines to 12px legal captions. The CSS weight scale is 400 (body), 500 (headings and medium labels), 600 (emphasis links), and 700 (bold headings and button labels). The open-source equivalent closest in feel is Inter — the proportions, x-height, and humanist terminals are comparable. Avoid geometric sans substitutes like DIN or Futura; jbklarheit has rounded counters that read warmer." - id: "button-radius" title: "Why does JetBlue's primary CTA button have zero border-radius?" answer: "The 'Search flights' primary button is extracted at borderRadius: 0px — fully square corners on a blue fill. This is not a rendering accident; JetBlue's booking widget is a dense horizontal row of origin/destination fields, date pickers, and the blue CTA at the right end. The zero radius aligns the button flush with the field row, reading the entire widget as one contiguous form element. Cards and navigation elements on the page run 4-16px radius; the zero-radius CTA is the deliberate contrast anchor. Applying a rounded radius to the primary button would soften the booking widget's industrial-form identity." - id: "secondary-colors" title: "What are JetBlue's secondary and accent colors?" answer: "JetBlue's CSS exposes several brand-layer accent colors: sky blue (#8dc8e8, --color-sky-blue, --color-brand-accent-1) used for hover states, card-border tints, and section divider lines; orange (#ff8200, --color-secondary, --color-brand-evenmore) used for promotional badges and the Even More Space upsell product; electric blue (#00b5e2, --color-brand-accent-4) and bright blue (#0072ce, --color-brand-accent-2) for sub-brand surfaces. On the captured marketing page, only sky blue renders with meaningful frequency (6 occurrences). The orange, electric blue, and bright blue are scoped to specific product upsells and promotional moments." - id: "use-in-project" title: "Can I use this DESIGN.md to build a booking interface?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce JetBlue's specific moves: royal blue as a spine color across text and borders (not just CTAs), zero-radius primary button inside a field-row widget, jbklarheit-equivalent type at weight 400-500 for body and labels, and sky blue as a hover / secondary border accent. The deal-card component structure (photography, route label, price, secondary CTA) transfers well to booking-flow and travel-search interfaces. Note the zero-radius CTA is intentional — if you switch it to 8px, the widget identity changes significantly." mockups: - "marketing-hero" - "checkout-flow" colors: primary: "#0033a0" primary-core: "#00205b" primary-hover: "#00205b" sky-blue: "#8dc8e8" ink: "#000000" ink-charcoal: "#303234" ink-muted: "#757575" canvas: "#ffffff" surface-1: "#f5f7fa" hairline: "#d3d3d3" hairline-light: "#e8e8e9" status-error: "#d50f0f" status-success: "#438443" status-attention: "#e4cd4d" shadow: "#000000" typography: display-xl: fontFamily: "\"jbklarheit\", \"jbklarheit Fallback\", ui-sans-serif, system-ui, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 50px letterSpacing: "0" display-lg: fontFamily: "\"jbklarheit\", \"jbklarheit Fallback\", ui-sans-serif, system-ui, sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 40px letterSpacing: "0" heading-md: fontFamily: "\"jbklarheit\", \"jbklarheit Fallback\", ui-sans-serif, system-ui, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 30px letterSpacing: "0" heading-sm: fontFamily: "\"jbklarheit\", \"jbklarheit Fallback\", ui-sans-serif, system-ui, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 22.5px letterSpacing: "-0.1px" heading-xs: fontFamily: "\"jbklarheit\", \"jbklarheit Fallback\", ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 24px letterSpacing: "-0.1px" body-lg: fontFamily: "\"jbklarheit\", \"jbklarheit Fallback\", ui-sans-serif, system-ui, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 27px letterSpacing: "0" body-md: fontFamily: "\"jbklarheit\", \"jbklarheit Fallback\", ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: "0" body-sm: fontFamily: "\"jbklarheit\", \"jbklarheit Fallback\", ui-sans-serif, system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: "-0.1px" label-md: fontFamily: "\"jbklarheit\", \"jbklarheit Fallback\", ui-sans-serif, system-ui, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 20px letterSpacing: "-0.1px" caption: fontFamily: "\"jbklarheit\", \"jbklarheit Fallback\", ui-sans-serif, system-ui, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 18px letterSpacing: "0" button-md: fontFamily: "\"jbklarheit\", \"jbklarheit Fallback\", ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 24px letterSpacing: "0" nav-link: fontFamily: "\"jbklarheit\", \"jbklarheit Fallback\", ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 24px letterSpacing: "0.3px" link-emphasis: fontFamily: "\"jbklarheit\", \"jbklarheit Fallback\", ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 24px letterSpacing: "0.3px" legal: fontFamily: "\"jbklarheit\", \"jbklarheit Fallback\", ui-sans-serif, system-ui, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 18px letterSpacing: "0" rounded: none: "0px" sm: "4px" md: "8px" lg: "12px" xl: "16px" full: "9999px" spacing: xs: "4px" sm: "8px" md: "12px" base: "16px" lg: "24px" xl: "32px" 2xl: "40px" 3xl: "48px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "16px 24px" height: "56px" border: "0" button-primary-hover: backgroundColor: "{colors.primary-core}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "16px 24px" height: "56px" border: "0" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "11px 23px" height: "48px" borderColor: "{colors.primary}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "0px 24px" height: "64px" borderColor: "{colors.hairline}" nav-link: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.nav-link}" padding: "8px 12px" hero-heading: backgroundColor: "transparent" textColor: "{colors.primary-core}" typography: "{typography.display-lg}" padding: "40px 0px" section-heading: backgroundColor: "transparent" textColor: "{colors.primary-core}" typography: "{typography.display-lg}" padding: "0" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-md}" deal-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-charcoal}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "16px 24px 24px" borderColor: "{colors.sky-blue}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-charcoal}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "16px" borderColor: "{colors.hairline}" search-widget: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "24px 8px 8px 16px" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-charcoal}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "24px 8px 8px 16px" height: "54px" borderColor: "{colors.hairline}" destination-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.heading-sm}" rounded: "{rounded.lg}" padding: "0" borderColor: "{colors.hairline}" package-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-charcoal}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "16px" borderColor: "{colors.hairline}" loyalty-logo: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "8px 16px" footer: backgroundColor: "{colors.primary-core}" textColor: "{colors.canvas}" typography: "{typography.body-sm}" padding: "48px 24px" footer-link: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.body-sm}" padding: "4px 0px" --- ## Overview JetBlue's web system commits to an unusual relationship between its brand color and its function. **Blue as infrastructure**: unlike airlines that hold their brand blue for CTA buttons and let photography carry the page, JetBlue's royal blue (#0033a0) appears 470 times in the captured surface — 234 as text, 233 as border, 3 as background. The color is the skeleton of every interactive element, every link underline, every input focus ring, every card outline. The button itself is one of the three background occurrences. Where United runs a similar royal blue but uses dark gray for most body text, JetBlue keeps blue on everything that can be clicked, bordered, or focused. The typographic system runs jbklarheit — JetBlue's proprietary humanist sans — without a second family. Unlike the geometric sans that Delta and older airline systems favor, jbklarheit has rounded apertures and a slightly warmer feel; it sits closer to Inter than to DIN. The weight range is 400 / 500 / 600 / 700, with the 500 weight handling section headings and the 700 carrying button labels and bold display. The CSS variable `--text-editorial` is declared at 2rem / 700, suggesting an intended 32px display tier that the captured marketing surface largely replaces with h2 headlines at the same size. **Key Characteristics:** - Royal blue (#0033a0) dominates 470 occurrences — text-and-border-first, button-background-second; the primary color is structural, not decorative. - Deep navy (#00205b, --color-brand-core) is the pressed state and hover for primary interactive elements; it also colors section headings. - Sky blue (#8dc8e8, --color-sky-blue) renders on deal-card borders and hover-state fills as the secondary accent — 6 occurrences, all border. - Zero-radius primary CTA: the "Search flights" button sits at 0px corner-radius, creating a deliberate square anchor against the 4-16px radius cards on the same page. - jbklarheit runs every tier without a secondary display or serif; the single family does the work through weight and size variation alone. - 8px spacing is the dominant module (85 occurrences), with 16px second (36); the 4px base grid drives the search-widget field layout. - The footer renders in deep navy (#00205b), the only dark surface on an otherwise white-canvas page. ## Colors ### Brand - **Primary** (`{colors.primary}` — #0033a0): frequency 470. Used as text (234), border (233), background (3). Wired as --color-royal-blue and --color-primary. The structural spine of the system — not a CTA accent held in reserve, but the literal color of every interactive surface element. - **Primary Core** (`{colors.primary-core}` — #00205b): frequency 89. Used as text (44), border (42), background (3). Wired as --color-brand-core, --color-core-blue, --color-state-primary-hover, --color-state-primary-pressed. The pressed state, the section heading color, and the footer background. - **Sky Blue** (`{colors.sky-blue}` — #8dc8e8): frequency 6, all as border. Wired as --color-sky-blue, --color-brand-accent-1, --color-state-surface-container-hover-variant. Used on deal-card borders and hover-state fills; the secondary blue accent. ### Surface - **Canvas** (`{colors.canvas}` — #ffffff): frequency 139 — the page body, all card surfaces, input backgrounds. Merged cluster includes the off-white near-white tone (--color-off-white, --color-neutral-95). The primary white surface. - **Surface-1** (`{colors.surface-1}` — #f5f7fa): declared as --color-surface, --color-blue-98. The light tinted background for off-white section bands. ### Text - **Ink** (`{colors.ink}` — #000000): frequency 446 as text/border/shadow. Structural page ink — primary text color for headings and body where blue is not used. - **Ink Charcoal** (`{colors.ink-charcoal}` — #303234): frequency 27. Wired as --color-on-surface, --color-charcoal, --color-neutral-20. The input-field text color and card body text. - **Ink Muted** (`{colors.ink-muted}` — #757575): frequency 24. Wired as --color-slate-gray, --color-on-surface-variant-medium. Secondary body copy, promotional card sub-text, footer captions. ### Hairlines - **Hairline** (`{colors.hairline}` — #d3d3d3): frequency 20, all as border. Wired as --color-outline, --color-medium-gray. Card and input field borders at rest. - **Hairline Light** (`{colors.hairline-light}` — #e8e8e9): frequency 3. Wired as --color-disabled, --color-light-gray. The subtle surface-level divider between page sections and disabled input states. ### Semantic - **Status Error** (`{colors.status-error}` — #d50f0f): wired as --color-error, --color-status-negative. Form validation errors and system alerts. - **Status Success** (`{colors.status-success}` — #438443): wired as --color-status-positive. Booking-confirmed states. - **Status Attention** (`{colors.status-attention}` — #e4cd4d): wired as --color-status-attention. Fare-expiry and seat-availability warnings. - **Shadow** (`{colors.shadow}` — #000000): frequency 12 as shadow ink. Used in rgba form (`rgba(0,0,0,*)`) for modal overlays and card hover shadows. ## Typography ### Font Family The system runs **jbklarheit** for every surface — a proprietary humanist sans-serif JetBlue ships as `--font-sans` and `--font-jbklarheit`. Fallbacks walk `"jbklarheit Fallback"`, `ui-sans-serif`, `system-ui`, and the full system-emoji stack. There is no serif, no mono, no second display family. The weight scale is 400 / 500 / 600 / 700; the CSS declares `--font-weight-normal: 400`, `--font-weight-medium: 500`, `--font-weight-semibold: 600`, `--font-weight-bold: 700`, `--font-weight-extrabold: 800`. Unlike the squared-shoulder geometry of DIN (Delta) or the tight condensed forms of LufthansaHead (Lufthansa), jbklarheit reads as humanist — it has rounded apertures, open counters, and a warmth that aligns with JetBlue's consumer-value positioning. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 40px | 700 | 50px | 0 | Campaign hero headline | | `{typography.display-lg}` | 32px | 700 | 40px | 0 | Section h2 ("Today's travel offers") | | `{typography.heading-md}` | 24px | 500 | 30px | 0 | Section titles, card group headings | | `{typography.heading-sm}` | 18px | 500 | 22.5px | -0.1px | Card titles, widget section labels | | `{typography.heading-xs}` | 16px | 700 | 24px | -0.1px | Sub-headings in data-dense contexts | | `{typography.body-lg}` | 18px | 400 | 27px | 0 | Lead paragraphs | | `{typography.body-md}` | 16px | 400 | 24px | 0 | Default body copy, input text | | `{typography.body-sm}` | 14px | 400 | 20px | -0.1px | Secondary copy, card metadata | | `{typography.label-md}` | 14px | 700 | 20px | -0.1px | Loyalty badge labels, status indicators | | `{typography.caption}` | 12px | 400 | 18px | 0 | Fine print, fare footnotes | | `{typography.button-md}` | 16px | 700 | 24px | 0 | CTA button labels | | `{typography.nav-link}` | 16px | 600 | 24px | 0.3px | Top-nav links | | `{typography.link-emphasis}` | 16px | 600 | 24px | 0.3px | Inline emphasized links ("Learn more") | | `{typography.legal}` | 12px | 400 | 18px | 0 | Legal disclaimers, fare conditions | ### Note on Font Substitutes jbklarheit is proprietary. **Inter** is the closest open-source substitute — comparable x-height, rounded apertures, and weight distribution. For the 600-weight nav links, Inter Semi-Bold (600) matches closely. Avoid DIN or Futura as substitutes; their geometric angularity imports the wrong register. **Nunito Sans** is a softer alternative if Inter feels too neutral. ## Layout ### Spacing System - **Base unit:** 4px. - **Dominant module:** 8px (85 occurrences); 16px is second (36). - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 40px · `{spacing.3xl}` 48px. - **Card internal padding:** `{spacing.base}` 16px on smaller deal cards; `{spacing.xl}` 32px + `{spacing.lg}` 40px on package cards. - **Search widget:** the flight-search widget uses complex padding (`24px 8px 8px 16px`) — a top-label offset pattern placing the input label at 24px from the top and the input text at 8px from the bottom. ### Grid & Container - **Max content width:** ~1312px; the deal cards in the "Today's travel offers" grid sit at a 4-column grid within that container. - **Hero:** a full-bleed photography or video hero with the flight-search widget floating on a white card panel overlaid at the bottom of the hero band. - **Deal card grid:** 3-4 column grid with photography thumbnails, destination name (heading-sm), price in royal blue (heading-md), and a secondary CTA button. - **Packages section:** a 3-column grid of category tiles (All-inclusives, Cruises, Family Vacations, Hotel deals, Car rentals, Trip activities). - **Footer:** single-column company logo + 4-column link-category grid in deep navy, white text. ### Rhythm The page alternates between a deals surface (deal cards in a white grid, sky-blue-bordered) and a features surface (JetBlue logo partner cards, category packages). The transitions are flat — no gradient bands, no section-background shifts — just white canvas from the hero to the footer navy, with 48-64px vertical padding between sections. ## Elevation The system uses **minimal shadow**. Deal cards hover with a subtle `rgba(0,0,0,0.12)` shadow; at rest they rely on the 1px `{colors.hairline}` border or the 1px `{colors.sky-blue}` border for definition. The search-widget panel at the base of the hero carries a visible elevation shadow. Modal overlays use `rgba(0,0,0,0.5)` (--color-modal-overlay is declared as a semi-transparent black). No tinted or colored shadows exist in the system. ## Shapes The radius scale reflects a deliberate split between the search interaction (angular, zero-radius) and content surfaces (moderate rounding): - `{rounded.none}` 0px — the primary "Search flights" button (extracted at 0px radius), and the flight-search input fields. - `{rounded.sm}` 4px — default card radius; the most common surface rounding (24 occurrences in extraction). - `{rounded.md}` 8px — deal-card image containers and larger card surfaces (6 occurrences). - `{rounded.lg}` 12px — package-category tiles and promotional banners (10 occurrences). - `{rounded.xl}` 16px — media thumbnails and marketing image cards (6 occurrences). - `{rounded.full}` 9999px — loyalty-badge chips, notification indicators. The zero-radius CTA button is the system's most deliberate shape choice. The search widget becomes a single contiguous form strip — input, input, input, button — because there is no visible gap or rounding break between the last field and the CTA. ## Components **`button-primary`** — Royal blue (#0033a0) fill, white text, jbklarheit 16px / 700, 0px radius, 16×24px padding, 56px height. "Search flights" is the canonical instance inside the booking widget. Zero border-radius creates a flush-join with the adjacent input fields. **`button-primary-hover`** — Shifts to deep navy (#00205b, --color-state-primary-pressed) on hover; same dimensions and no-radius treatment. **`button-secondary`** — White canvas fill, royal blue border (1px), royal blue text. 4px radius. Used for "Book now" on deal cards and "Explore destinations" CTAs. **`top-nav`** — White canvas surface, 64px height, 1px bottom hairline border, no border-radius. JetBlue logo flush left; link cluster (Book, Manage, Check-in, JetBlue for Business, TrueBlue) center-left; MosaicPlus + Sign in flush right. **`nav-link`** — Transparent background, royal blue text (#0033a0) in `{typography.nav-link}` (16px / 600), 8×12px padding. **`hero-heading`** — Deep navy (#00205b) text, jbklarheit 32px / 700 (`{typography.display-lg}`). Section headings below the hero ("Today's travel offers," "Packages, trip deals and more," "So many ways to JetBlue"). **`section-heading`** — Same token as `hero-heading`. Section-level h2 elements on the white canvas. **`body-paragraph`** — Ink-muted (#757575) text at `{typography.body-md}` (16px / 400). Secondary promotional copy and deal card descriptions. **`deal-card`** — White canvas, 1px sky-blue (#8dc8e8) border, 8px radius, `16px 24px 24px` padding. Photography thumbnail top, destination + route label in deep navy, price in royal blue, secondary button below. The signature card variant — sky-blue border distinguishes these deal cards from the standard hairline-bordered content cards. **`card`** — White canvas, 1px hairline border (#d3d3d3), 8px radius, 16px padding. Default content card for package tiles and partner cards. **`search-widget`** — White canvas, the full booking search form. Inputs have 0px radius and the primary CTA at the right end. Complex padding `24px 8px 8px 16px` to accommodate floating labels above each field. **`text-input`** — White canvas fill, ink-charcoal text (#303234), 0px radius (matching the widget's flush-join pattern), `24px 8px 8px 16px` padding, 54px height, 1px hairline border. Border shifts to royal blue on focus. **`destination-card`** — White canvas, 1px hairline border, 12px radius, 0 padding (photography fills the card). Used in the grid of destination thumbnails below the deal cards. **`package-card`** — White canvas, 1px hairline border, 12px radius, 16px padding. Holds category icon, title, and brief description for the packages grid. **`loyalty-logo`** — Transparent background, royal blue text, 0px radius. Renders the partner loyalty logos (JetBlue, JetBlue Travel Products, JetBlue Vacations, Hotels + More, JetBlue Card) in a 5-item horizontal strip. **`footer`** — Deep navy (#00205b) surface, white text, jbklarheit 14px / 400, 48×24px padding. 4-column link grid: Get Travel, Business Travel, JetBlue in the Community, Stay Connected. White wordmark flush left at top. **`footer-link`** — Transparent background on the deep navy footer, white text in `{typography.body-sm}`, 4px top padding. ## Do's and Don'ts **Do** use royal blue (#0033a0) for all interactive text, borders, and button fills. The system's legibility depends on blue as a consistent interactivity signal — when every clickable element is blue and only blue, users learn the language instantly. **Do** keep the primary button at 0px radius inside the search-widget context. The zero-radius CTA creates the flush-join with input fields that makes the booking widget read as a single form element. Rounding the button by 8px visually separates it from the fields and increases perceived friction. **Do** use `{colors.sky-blue}` (#8dc8e8) exclusively for deal-card borders and hover-fill backgrounds. The sky blue reads as a lighter, secondary blue at a perceptual distance from the primary royal — placing it on CTAs or headings would read as a second blue brand color and introduce ambiguity. **Do** use `{colors.primary-core}` (#00205b) for section headings and the footer background rather than the primary royal blue. The extracted section headings render in this darker navy, not in the CTA blue — the distinction creates a subtle hierarchy where content headings sit darker than interactive chrome. **Don't** apply border-radius to the search-CTA button independently. Changing `{rounded.none}` to `{rounded.sm}` or higher on `button-primary` breaks the widget's strip-form identity — if radius is needed, it must be applied uniformly to both the inputs and the button. **Don't** use `{colors.sky-blue}` (#8dc8e8) as a button background or CTA fill. Its 6 occurrences in the captured surface are all border-color — it reads as an ambient brand accent, not a primary action color. A button in sky blue would be mistaken for a secondary or tertiary action at best, or a decorative chip at worst. **Don't** introduce a second typeface. jbklarheit handles every tier including nav, buttons, legal, and caption — adding a serif or mono voice for emphasis or code would break the single-family discipline and require an additional font-load that the system does not currently carry. **Don't** render deal-card price labels in any color other than royal blue (#0033a0). Prices in ink-charcoal or ink-muted would lose the interactivity signal — the blue price on a white card is a subtle CTA in itself, training the user's eye toward the fare before they reach the secondary button. ## Known Gaps - **Hover and focus states:** documented for `button-primary-hover` only. The full state matrix — input focus rings (royal blue 2px outline), disabled field opacity, datepicker hover, dropdown active — is not captured from the marketing surface. - **Cookie banner override:** the captured screenshot shows a privacy-consent banner overlaying the hero; some below-the-fold content was obscured. The booking widget and deal-card grid are partially visible; the full hero photography and video are not captured. - **Orange product accent:** JetBlue's orange (#ff8200, --color-secondary, --color-brand-evenmore) appears as a declared CSS var but does not render on the captured page. It is scoped to the "Even More Space" and "Even More Speed" upsell product badge — a paid upgrade marker that only appears in fare-selection contexts, not on the marketing homepage. - **Dark mode:** no dark-mode marketing surface is exposed; the footer's deep-navy band is the closest dark surface. - **Motion:** the hero content carousel and datepicker transitions are not captured; animation curves and durations live in the booking widget JavaScript. - **App surfaces:** the JetBlue iOS/Android app carries a separate bottom-navigation component, boarding-pass card, and seat-selection map that are not included here.