What is Delta Air Lines' primary brand color?

Delta's brand is anchored on two navy tones used as surface and text, with Delta red (#e31837) as the singular CTA accent. The navy surfaces appear in the header bar, the search widget frame, and the navigation stripe; red is reserved for primary buttons like 'Search flights,' fare-class highlighted prices, and active-state indicators on the booking widget. Across the captured marketing surface, red appears fewer than a dozen times — always as a foreground action signal, never as a background canvas.

What typeface does Delta use, and what should I substitute?

Delta's marketing system runs DIN Pro — a geometric sans with squared junctions and a legibility profile originally designed for German transport signage. The system uses weight 400 for body, 500 for sub-headings, and 700 for section headlines. Display tops out at 48px in weight 700. The closest open-source substitute is IBM Plex Sans (similar square-shouldered geometry) or Barlow (looser, but shares the utilitarian neutrality). Inter reads too rounded; avoid it as a substitute if geometric discipline is the goal.

Why does Delta use two navy tones?

The header nav sits on a darker navy (#003366 or equivalent) while mid-page section headers and subheadings use a slightly lighter navy that creates visual hierarchy without introducing a second hue. This 'dual-navy surface ladder' is the system's primary depth mechanism — no shadows, no gradients, just the lightness step between two navy values. The convention is common in airline and finance brands that need to signal institutional gravitas without the warmth of a lifestyle gradient.

How is the flight search widget styled?

The booking search widget sits directly in the above-fold hero on a white card surface, with field inputs that have a 1px hairline border, 4px corner radius, and a white fill. Labels appear as small navy text above each input (DIN Pro 12-14px, weight 400). The primary 'Search flights' CTA is a solid Delta red pill at 44-48px height. The widget is the densest component in the system — it holds origin/destination fields, date pickers, passenger count selectors, and fare-class toggles in roughly 500px of horizontal width.

How does Delta style its Medallion status badges?

Delta's SkyMiles Medallion tiers (Silver, Gold, Platinum, Diamond) each receive a distinct badge treatment on account and loyalty surfaces. Silver uses a light gray chip with navy text; Gold uses a gold-adjacent amber fill with dark text; Platinum uses a deeper blue chip; Diamond uses a near-black navy chip with white text. The badge radius is fully rounded (pill). These badges appear in the logged-in account surfaces and deal-card loyalty sections; they are among the few non-structural uses of color in the system.

Delta Air Lines Design System

Delta Air Lines' marketing-site design tokens as a DESIGN.md spec.

About Delta Air Lines DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source delta.com

Travel & Hospitality

Delta Air Lines' homepage is not a travel fantasy — it is a booking engine with branding applied. The above-fold experience opens on a deep navy header, a flight-search widget with field-bordered inputs, and a primary CTA in Delta red (#e31837) that reads unmistakably as "the one button to click." Where Southwest layers warm orange over vacation photography and United leans into deep blue hero gradients, Delta's surface is fundamentally cooler and more transactional: navy is both the canvas and the information color, and red appears exactly where a traveler's next action lives.

This DESIGN.md file captures 14 color tokens drawn from Delta's marketing surface — two navy tones, a red accent, white, light grays, and a small set of semantic status colors — plus 12 typography tokens in DIN Pro from the 48px hero headline down to 12px legal caption. The spec includes 8 spacing values on a 4px base scale, 5 corner-radius tokens, and 16 component definitions covering the search widget, the branded CTA button, hairline-bordered cards, the persistent top-nav stripe, and the medallion-status badge hierarchy.

Feed this file to an AI coding tool and it will produce Delta's distinctive moves: strict navy-on-white content areas, the surgical use of red for exactly one CTA per section, DIN Pro at consistent weights rather than a variable-weight display tier, and a grid that prioritizes departure times and fare classes over lifestyle photography. The system is worth studying for teams building transaction-first interfaces — booking flows, scheduling tools, account dashboards — that need to signal institutional trust without reaching for a gradient or a hero illustration.

What makes it distinct

Dual-navy architecturea dark navy header surface and a lighter mid-navy secondary tone create a surface ladder without any shadow or gradient
Red as surgical accentDelta red appears only on primary CTAs and active state indicators, never as a background or decorative fill
DIN Pro across every tierthe same geometric sans used on airport departure boards runs the entire typographic stack, from 48px display to 12px caption
Information-first grid3-4 column content grids with hairline dividers dominate the below-fold layout, prioritizing data density over photography
No decorative radiusmost surfaces sit at 0-4px; pill geometry appears only on badge and status chips

Live at delta.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

delta.com

Explore Delta Air Lines

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Delta Air Lines design system FAQ

Common questions about Delta Air Lines's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Delta Air Lines — official site

Delta's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.