What is Lufthansa's primary brand color?

Lufthansa's brand voltage is yellow (#ffad00), but it plays a strikingly narrow role on the marketing site — it appears as the background fill of the primary CTA button (the 'Agree' cookie-consent button and the search-flights CTA) and as that button's border color. The page's structural color is deep navy (#05164d), which runs 556 total occurrences as text and border. Yellow does not appear on backgrounds, section headings, or hero surfaces. The separation of the two colors — navy for everything structural, yellow for exactly one action — is the system's defining chromatic discipline.

What typefaces does Lufthansa use, and what should I substitute?

Lufthansa runs two proprietary families. LufthansaHead — a condensed display sans — carries all editorial display moments: 36px h2 headlines at weight 300, 24-28px card titles at weight 700. LufthansaText — a humanist body companion — runs body paragraphs at 14px / weight 300, navigation links at 14px / weight 700, and form labels at 18px / weight 400. The open-source substitute for LufthansaHead is Barlow Condensed at the same weights (the proportional compression matches closely). For LufthansaText, Source Sans Pro or IBM Plex Sans at corresponding weights is a strong equivalent. Do not substitute both families with a single typeface — the split between a condensed display and a humanist text family is the typographic identity.

Where does Lufthansa yellow appear in the system?

Lufthansa yellow (#ffad00) appears in exactly two confirmed rendering contexts on the captured marketing surface: as the background fill and border color of the primary CTA button (the cookie-consent 'Agree' button and the search-flights action button). Both instances pair navy (#05164d) text on the yellow fill. The CSS does not declare yellow as a link color, a section background, or a heading accent. This is the system's most disciplined chromatic constraint — the yellow is so scarce that any element using it immediately reads as the page's primary action.

Why does Lufthansa use 20px as its dominant spacing module?

The extraction captured 20px as the single most-used padding value on the page (47 occurrences), followed by 24px (18) and 10px (12). This is notably wider than the 8-16px convention used by most consumer web systems. The 20px module is visible in the nav link padding (0px 10px → effectively 20px per pair), card internal padding (20px), and section-row gaps. It gives the layout a noticeably more generous internal rhythm, which signals that the brand is not optimizing for information density — it is giving each element room to breathe. For a flag-carrier running 200+ destinations, the breathing room IS the product signal.

Why do Lufthansa's display headlines run at weight 300?

LufthansaHead at 36px / weight 300 is the most counter-conventional choice in the system. The industry convention for display headlines is weight 600-800, where visual mass signals importance. Lufthansa inverts this: the lightest weight at the largest size creates a restrained, editorial feel — the same move that Stripe uses on its display at weight 300, but in a condensed typeface rather than a variable-weight one. The effect is that section headlines ('Current topics and news') feel like bylines rather than sales pitches. This is deliberate positioning: Lufthansa is telling you this is content worth reading, not a price worth clicking.

Lufthansa Design System

Lufthansa's marketing-site design tokens as a DESIGN.md spec.

About Lufthansa DESIGN.md

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

Travel & Hospitality

Lufthansa's marketing site arrives at a typographic move that almost no other airline attempts: the display headlines run at weight 300. LufthansaHead at 36px / weight 300 carries the editorial identity — a condensed, spare letterform that reads like the cover of a European travel magazine rather than a booking engine. Where JetBlue shouts its deals in weight 700 and Delta anchors institutional trust in DIN Pro at the same weight, Lufthansa uses typographic restraint as its signal of self-assured positioning. The lighter the headline, the more self-assured the brand appears.

This DESIGN.md file packages 13 color tokens — a deep-navy primary that dominates 556 occurrences, a single yellow accent reserved for the primary CTA, and a five-step gray ladder — plus 13 typography tokens across both LufthansaHead and LufthansaText. The file includes 8 spacing values centered on a 20px dominant module (unusual in web design but consistent with Lufthansa's wider-girthed layout), 5 corner-radius tokens, and 15 component definitions covering the yellow-button CTA, the search-input row, the consent modal, and the photographic news carousel.

Feed this file to an AI coding tool and it will reproduce Lufthansa's specific moves: deep navy as both text and border ink (not a canvas color), yellow as a single sharp accent on the most important button, LufthansaHead at the light display weight for all editorial moments, and a 20px module spacing that gives content noticeably more room than an 8-16px grid. The system is worth studying for travel brands or financial institutions that communicate authority through typographic restraint rather than through photography scale or gradient intensity.

What makes it distinct

Dual proprietary typefaceLufthansaHead (condensed display, weight 300 for headlines) paired with LufthansaText (humanist body, weight 300/400/700)
Yellow as scalpel#ffad00 appears on exactly one component (primary CTA button); the system earns its restraint by never repeating the accent
Deep navy as total infrastructure#05164d runs 556 occurrences, split nearly equally between text (275) and border (265); it is the skeleton of the page
Weight 300 for displayLufthansaHead headlines sit at 36px weight 300, inverting the common 700-at-large-size convention
20px dominant modulespacing at 20px (47 occurrences) drives a noticeably wider-girthed layout than the 8/16px convention most web systems use

Live at lufthansa.com

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

lufthansa.com

Explore Lufthansa

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.

Other

Specialty colors.

Lufthansa design system FAQ

Common questions about Lufthansa'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.

Lufthansa — official site

Lufthansa'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.