JetBlue Design System

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

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.