---
version: alpha
name: "Lufthansa"
website: "https://www.lufthansa.com"
description: >-
  A European flag carrier whose digital system layers two proprietary type families — LufthansaHead (a condensed display sans at weight 300 for editorial moments and weight 700 for card titles) and LufthansaText (a humanist companion running every body, nav, and form context) — over a disciplined deep-navy identity (#05164d, 556 total occurrences across text and border). The single brand voltage is Lufthansa yellow (#ffad00), appearing only on the primary CTA button background and the cookie-consent "Agree" button — a restrained accent that signals flag-carrier positioning through scarcity rather than saturation. Corner radii cluster at 6-8px; the page runs at 20px base spacing.

seo:
  title: "Lufthansa Design System for React — navy #05164d, LufthansaHead + LufthansaText, 15 components"
  metaDescription: "Lufthansa's marketing-site design tokens as a DESIGN.md spec. Deep navy #05164d structural base, yellow #ffad00 CTA accent, LufthansaHead + LufthansaText type system, 13 colors, 13 typography levels, 15 components. For React, Next.js, and AI tools."
  highlights:
    - "Dual proprietary typeface — LufthansaHead (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 display — LufthansaHead headlines sit at 36px weight 300, inverting the common 700-at-large-size convention"
    - "20px dominant module — spacing at 20px (47 occurrences) drives a noticeably wider-girthed layout than the 8/16px convention most web systems use"
  tags:
    - "Travel & Hospitality"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  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.lufthansa.com"
      title: "Lufthansa — official site"
      description: "Lufthansa'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 Lufthansa's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typefaces does Lufthansa use, and what should I substitute?"
      answer: "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."
    - id: "yellow-usage"
      title: "Where does Lufthansa yellow appear in the system?"
      answer: "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."
    - id: "spacing-module"
      title: "Why does Lufthansa use 20px as its dominant spacing module?"
      answer: "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."
    - id: "weight-300-display"
      title: "Why do Lufthansa's display headlines run at weight 300?"
      answer: "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."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  navy: "#05164d"
  navy-mid: "#52627c"
  navy-deep: "#000245"
  primary: "#ffad00"
  ink: "#000000"
  ink-muted: "#4d4d4d"
  ink-soft: "#666666"
  canvas: "#ffffff"
  surface-1: "#f5f5f5"
  hairline: "#ebebeb"
  hairline-mid: "#b4b4b4"
  hairline-dark: "#dcdcdc"
  hairline-strong: "#333333"

typography:
  display-xl:
    fontFamily: "\"LufthansaHead\", Arial, Helvetica, sans-serif"
    fontSize: 36px
    fontWeight: 300
    lineHeight: 39.6px
    letterSpacing: "0"
  display-lg:
    fontFamily: "\"LufthansaHead\", Arial, Helvetica, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 30.8px
    letterSpacing: "0"
  heading-md:
    fontFamily: "\"LufthansaHead\", Arial, Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 26.4px
    letterSpacing: "0"
  heading-sm:
    fontFamily: "\"LufthansaHead\", Arial, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 19.8px
    letterSpacing: "0"
  heading-xs:
    fontFamily: "\"LufthansaHead\", Arial, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 19.8px
    letterSpacing: "0"
  body-lg:
    fontFamily: "\"LufthansaText\", Arial, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: "0"
  body-md:
    fontFamily: "\"LufthansaText\", Arial, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 27px
    letterSpacing: "0"
  body-sm:
    fontFamily: "\"LufthansaText\", Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 18px
    letterSpacing: "0"
  label-md:
    fontFamily: "\"LufthansaText\", Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 21px
    letterSpacing: "0"
  label-sm:
    fontFamily: "\"LufthansaText\", Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 18px
    letterSpacing: "0"
  caption:
    fontFamily: "\"LufthansaText\", Arial, Helvetica, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 10px
    letterSpacing: "0"
  button-md:
    fontFamily: "\"LufthansaText\", Arial, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: "0"
  nav-link:
    fontFamily: "\"LufthansaText\", Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 21px
    letterSpacing: "0"

rounded:
  none: "0px"
  sm: "3px"
  md: "4px"
  lg: "6px"
  xl: "8px"
  full: "50%"

spacing:
  xs: "5px"
  sm: "8px"
  md: "10px"
  base: "20px"
  lg: "24px"
  xl: "30px"
  2xl: "32px"
  3xl: "40px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.navy}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: "11px 30px"
    height: "50px"
    borderColor: "{colors.primary}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.navy}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: "11px 30px"
    height: "50px"
    borderColor: "{colors.navy}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.navy}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 20px"
    height: "122px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.navy}"
    typography: "{typography.nav-link}"
    padding: "0px 10px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    padding: "0"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.navy}"
    typography: "{typography.display-xl}"
    padding: "0"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.navy}"
    typography: "{typography.body-sm}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.navy}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.xl}"
    padding: "20px"
    borderColor: "{colors.hairline}"
  news-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.navy}"
    typography: "{typography.heading-sm}"
    rounded: "{rounded.xl}"
    padding: "0"
    borderColor: "{colors.hairline}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.navy}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.none}"
    padding: "6px 0px"
    height: "39px"
    borderColor: "{colors.hairline-mid}"
  recommendation-chip:
    backgroundColor: "{colors.navy}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "5px 10px"
  service-icon-card:
    backgroundColor: "transparent"
    textColor: "{colors.navy}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "20px 10px"
  footer:
    backgroundColor: "{colors.navy}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    padding: "32px 88px"
  footer-link:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.label-sm}"
    padding: "6px 0px"
---

## Overview

Lufthansa's marketing surface makes a typographic wager almost no other airline accepts. **Weight as confidence signal**: the editorial display headlines run LufthansaHead at weight 300 — the same condensed sans-serif used on departures boards and airline livery, but drawn as light as possible at 36px. This is the inverse of the category default. JetBlue, Delta, and United all reach for weight 700 at their largest display sizes, telegraphing urgency or authority. Lufthansa, by contrast, uses lightness as its signal of confidence: when the words are spare enough to hold at weight 300, the brand trusts itself.

The chromatic system reinforces the move. Deep navy (#05164d) runs 556 total occurrences — 275 as text, 265 as border, 11 as shadow — making it the structural skeleton of the page, not an accent. On this predominantly white-and-navy surface, Lufthansa yellow (#ffad00) appears exactly once as a background: the primary CTA button ("Find flights," "Agree"). The yellow does not reappear on headings, section bands, or icons. This is not a secondary color — it is an action color, used so sparingly that any element carrying it immediately reads as the most important thing on the page.

**Key Characteristics:**
- Deep navy (#05164d) as total infrastructure — 556 occurrences split nearly equally between text (275) and border (265); the page is built in navy and white.
- Lufthansa yellow (#ffad00) reserved for the primary CTA button only — a background layer with navy text on top; no other element in the captured surface uses it as a fill.
- Two proprietary typefaces: LufthansaHead (condensed display, weight 300 editorial / weight 700 card) + LufthansaText (humanist body, weight 300-700).
- Display headline at weight 300 — LufthansaHead 36px / 300 for section h2 headings; this is the most counter-conventional typographic choice in the airline category.
- 20px dominant spacing module (47 occurrences) — a wider-girthed rhythm than the 8/16px systems most airlines use.
- Corner radius is moderate-conservative: 3-8px across most surfaces, 50% (full circle) on recommendation chips.
- Nav height declared at 122px via CSS custom property — notably taller than the 56-64px standard, giving the top-nav significant visual weight.

## Colors

### Brand

- **Lufthansa Yellow** (`{colors.primary}` — #ffad00): frequency 2. Used as background fill (1) and border (1). The singular CTA voltage — appears on the primary action button and nowhere else in the captured marketing surface. Layer: brand. The system earns its scarcity discipline by refusing to repeat the yellow even once more.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 104. Used as text (43), background (18), border (43). The primary page canvas, merged from #ffffff and #f5f5f5 in the extraction cluster. All card surfaces and input fields.
- **Surface-1** (`{colors.surface-1}` — #f5f5f5): declared in the merged cluster above. The lightly-tinted alternating section background.

### Text

- **Navy** (`{colors.navy}` — #05164d): frequency 556. Used as text (275), border (265), shadow (11), background (5). The structural identity of the page. Not black — a very dark indigo navy that adds a cold undertone to text without approaching the neutrality of charcoal. The dominant ink, hairline, and surface-shadow color.
- **Navy Mid** (`{colors.navy-mid}` — #52627c): frequency 194. Used as text (103), border (91). A secondary desaturated navy — used for secondary nav text, card sub-labels, and form-field border tones at a slightly lighter saturation than the primary navy.
- **Navy Deep** (`{colors.navy-deep}` — #000245): frequency 8. Used as text (4), border (4). An almost-black navy, declared for the darkest accent contexts in the below-fold content.
- **Ink** (`{colors.ink}` — #000000): frequency 9. Used as text (3), background (1), border (5). Pure black, rare in the system — appears on the footer boundary and a few structural dividers.
- **Ink Muted** (`{colors.ink-muted}` — #4d4d4d): frequency 3. Used across form-field text and secondary metadata captions.
- **Ink Soft** (`{colors.ink-soft}` — #666666): frequency 8, all as border. Section dividers at a medium gray.

### Hairlines

- **Hairline** (`{colors.hairline}` — #ebebeb): frequency 122. Used as text (62), border (60). The primary hairline tone — card borders, input field outlines, section dividers. The most-used border tone after navy-mid.
- **Hairline Mid** (`{colors.hairline-mid}` — #b4b4b4): frequency 142. Used as text (71), border (71). A medium gray hairline used for input field borders and structural dividers.
- **Hairline Dark** (`{colors.hairline-dark}` — #dcdcdc): frequency 11, all as border. A slightly lighter-than-mid hairline for secondary card outlines.
- **Hairline Strong** (`{colors.hairline-strong}` — #333333): frequency 3, all as border. A near-black hairline for the strongest section boundary marks.

## Typography

### Font Families

The system runs two proprietary voices: **LufthansaHead** for display and heading surfaces, and **LufthansaText** for body, navigation, button, and form contexts. Both families share the same Arial / Helvetica fallback stack, and LufthansaText includes Roboto as a secondary fallback in some declarations.

The pairing is the system's most distinctive typographic move — not the presence of two families (many systems do this) but the specific combination of a condensed, light display face with a humanist, heavier-body companion. LufthansaHead at 36px / weight 300 for section headings would look unmoored in Inter or DIN at the same weight; it works because the condensed geometry of LufthansaHead holds legibility at low weight in a way that broader sans-serifs cannot.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 36px | 300 | 39.6px | Section h2 ("Current topics and news") — LufthansaHead |
| `{typography.display-lg}` | 28px | 700 | 30.8px | Feature card headings — LufthansaHead |
| `{typography.heading-md}` | 24px | 700 | 26.4px | Sub-section h3 / h4 titles — LufthansaHead |
| `{typography.heading-sm}` | 18px | 700 | 19.8px | Card titles and highlighted links — LufthansaHead |
| `{typography.heading-xs}` | 18px | 300 | 19.8px | Light-weight sub-headings — LufthansaHead |
| `{typography.body-lg}` | 18px | 400 | 27px | Form field labels, lead paragraphs — LufthansaText |
| `{typography.body-md}` | 18px | 700 | 27px | Button labels, bold inline text — LufthansaText |
| `{typography.body-sm}` | 14px | 300 | 18px | Default body paragraphs, list items — LufthansaText |
| `{typography.label-md}` | 14px | 700 | 21px | Navigation links, card category labels — LufthansaText |
| `{typography.label-sm}` | 14px | 700 | 18px | Secondary nav labels, bold inline spans — LufthansaText |
| `{typography.caption}` | 10px | 400 | 10px | Micro captions, navigation icons — LufthansaText |
| `{typography.button-md}` | 18px | 700 | 24px | CTA button labels — LufthansaText |
| `{typography.nav-link}` | 14px | 700 | 21px | Top-nav anchor text — LufthansaText |

### Weight 300 as Editorial Signature

The most unusual typographic decision: LufthansaHead at weight 300 for section display headlines. This weight is rarely used for display text in any consumer product; it requires that the condensed letterform be legible at low weight at 36px, which only works because of LufthansaHead's proportional compression. The practical effect is that section headings feel annotational rather than declarative — a sensibility that runs through the entire system.

### Note on Font Substitutes

LufthansaHead is proprietary. **Barlow Condensed** at the same weights is the closest open-source substitute — the proportional compression, cap height, and low-weight legibility transfer closely. For LufthansaText, **Source Sans Pro** (weight 300 for body, 700 for headings) or **IBM Plex Sans** are strong equivalents. Do not substitute both with a single family — the condensed/humanist pairing is the identity.

## Layout

### Spacing System

- **Base module:** 20px — the dominant padding value (47 occurrences), appearing on card internal padding, nav-link horizontal padding (10px per side = 20px total), and section-row gaps.
- **Tokens:** `{spacing.xs}` 5px · `{spacing.sm}` 8px · `{spacing.md}` 10px · `{spacing.base}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 30px · `{spacing.2xl}` 32px · `{spacing.3xl}` 40px.
- **Section padding:** footer uses 32px vertical + 88px horizontal (the CSS `--container-offset: 8.8rem`); this is the widest horizontal padding in the extraction.
- **Card internal padding:** 20px on most content cards; news-carousel items use 0 horizontal padding (photography fills edge-to-edge, title overlays at 20px from the image bottom).

### Grid & Container

- **Max content width:** implied ~1280px from the 88px horizontal padding convention.
- **Hero:** a full-bleed photography panel with a consent modal overlay on capture; the hero carries large type ("More comfort and service on board") in a navy-on-photo treatment.
- **News carousel:** a 3-up card grid of news photography tiles with article category label (LufthansaText 10px / 400), headline (LufthansaHead 18px / 700), and arrow link.
- **Recommendations section:** a tab-strip ("Round trip") above an implied fare-grid; tabs use a pill radius on the active state.
- **Services grid:** 5 service icons (Hotels, Rental car, Travel insurance, Tours and activities, Parking) in a horizontal row at 20px padding per icon-label unit.

### Rhythm

The page alternates between a photographic editorial band (hero + news carousel) and a functional information band (flight search, services grid). The 20px module makes each band feel noticeably wider in its internal rhythm than, say, a 16px-module system would; the effect is that individual content items are given more surrounding space, which reads as a confidence signal: the system is not optimizing for density.

## Elevation

The system uses **minimal shadow**, primarily the navy itself as depth via border contrast. The consent modal carries a subtle drop shadow (`box-shadow` with navy-based ink at low opacity); card surfaces at rest rely on `{colors.hairline}` borders. The 122px nav sits flat against the page without a shadow. Shadow ink uses the declared navy (#05164d) as the base rather than pure black — giving any shadow on the page a slight blue-cold tint.

## Shapes

The radius philosophy is **moderate-conservative**, with a single circular exception:

- `{rounded.none}` 0px — the search-input fields (extracted at borderRadius 0px), the footer, and the full-width hero band.
- `{rounded.sm}` 3px — fine-element rounding (captured in the extraction's 3px / 1 occurrence tier).
- `{rounded.md}` 4px — the primary CTA button (`borderRadius: 4px` extracted from the consent button); card borders in content areas.
- `{rounded.lg}` 6px — nav-link hover states and secondary surface rounding (6px / 14 occurrences in extraction).
- `{rounded.xl}` 8px — the dominant card radius (8px / 20 occurrences); used on news cards, service cards, and feature panels.
- `{rounded.full}` 50% — the recommendation-type chip ("Round trip" active state) and circular icon buttons.

The scale skips the 12-16-24px generous-soft tier that consumer brands favor. Lufthansa's surfaces are either moderate (3-8px) or fully circular — never the in-between softness that would read as casual.

## Components

**`button-primary`** — Lufthansa yellow (#ffad00) fill, deep navy text, LufthansaText 18px / 700, 4px radius, 11×30px padding, 50px height, 1px yellow border. The singular yellow element on the page — extracted from the cookie-consent "Agree" button, which mirrors the flight-search primary CTA. No secondary color competes with it.

**`button-secondary`** — White canvas fill, deep navy text and border, identical dimensions to the primary. Used for secondary actions like "I do not agree" in the consent modal and secondary booking actions.

**`top-nav`** — White canvas, 122px height (declared as `--header-height`), no border. The nav is notably tall — the Lufthansa wordmark and symbol occupy significant vertical space. Navigation links sit at 14px / 700 LufthansaText with 0px × 10px padding.

**`nav-link`** — Transparent background, navy text, `{typography.nav-link}` (14px / 700), 0×10px padding. No hover background — the cursor change is the only hover signal captured.

**`hero-heading`** — White canvas text on the photographic hero, LufthansaHead 36px / 300 (`{typography.display-xl}`). The editorial-weight headline renders over the full-bleed photography.

**`section-heading`** — Navy text on white canvas, same `{typography.display-xl}` token. Used for "Current topics and news," "Recommendations," "Looking for more than just a flight?" The lightness of weight 300 at this size is the system's defining typographic moment.

**`body-paragraph`** — Navy text, LufthansaText 14px / 300 (`{typography.body-sm}`). Default body copy for card descriptions and page paragraphs.

**`body-paragraph-muted`** — Ink-muted (#4d4d4d) text, same `{typography.body-sm}`. Secondary metadata captions.

**`card`** — White canvas, 1px hairline border (#ebebeb), 8px radius, 20px padding. Default content card.

**`news-card`** — White canvas, 1px hairline border, 8px radius, 0 padding (photography fills edge-to-edge). Holds a 10px / 400 category caption at the top, an 18px / 700 LufthansaHead headline beneath the image, and an arrow nav-link. The primary below-fold content unit.

**`text-input`** — White canvas, navy text (#05164d), 0px radius, `6px 0px` padding, 39px height. The flight search origin/destination input — the zero radius creates a flush-stroke field row consistent with Lufthansa's utilitarian form aesthetic.

**`recommendation-chip`** — Navy fill, white text, LufthansaText 14px / 700, 50% radius (full circle/pill), 5×10px padding. The "Round trip" active trip-type selector beneath the flight search.

**`service-icon-card`** — Transparent background, navy text, 0px radius, 20×10px padding. The 5-icon horizontal row (Hotels, Car rental, etc.) — no visible card border, just the icon + label stack.

**`footer`** — Navy (#05164d) surface, white text, LufthansaText 14px / 300, 32×88px padding. Four column groups: Frequently visited pages, Customer services, About us, Corporate customers. A search field sits at the top-left of the footer in an inverted style.

**`footer-link`** — Transparent background on the navy footer, white text, `{typography.label-sm}`, 6px top padding.

## Do's and Don'ts

**Do** use Lufthansa yellow (#ffad00) for exactly one primary action per page view. The system derives its CTA clarity entirely from yellow's scarcity — the moment a second yellow element appears (a yellow badge, a yellow heading accent), the primary action loses its signal supremacy.

**Do** render display headlines in LufthansaHead at weight 300, not weight 700. The weight-300 display is the system's single most distinctive design choice. Promoting headlines to 700 at 36px makes the system read like any other airline — the editorial restraint disappears.

**Do** use `{colors.navy}` (#05164d) for both text and borders throughout the system. The navy is a two-role color — it carries ink and hairline duty simultaneously. Introducing a separate charcoal for text (as JetBlue and Delta do) would soften the monochrome-navy discipline.

**Do** size the top-nav to 122px (the declared `--header-height`). The tall nav is a visual weight statement — it reserves above-fold real estate for the wordmark and horizontal navigation before the hero image loads. Shrinking it to 64px imports the value-carrier aesthetic.

**Don't** use `{colors.navy}` (#05164d) as a background canvas for full sections. The nav sits on white; the page sits on white; the footer is the one exception. Navy-on-navy section bands would destroy the page's white-breathing-room rhythm.

**Don't** render `{typography.display-xl}` (36px / weight 300) with LufthansaText instead of LufthansaHead. The weight-300 display only holds visual legibility at 36px because LufthansaHead is a condensed face — the tighter letterform at low weight creates enough density to read. LufthansaText at 36px / 300 would dissolve into the page.

**Don't** introduce a 12 or 16px radius tier between `{rounded.xl}` (8px) and `{rounded.full}` (50%). The binary structure — moderate rounding on cards, full-circle on chips — is the shape identity. A 12px card radius reads as a softer consumer brand register (Airbnb, JetBlue) rather than the utilitarian-editorial register Lufthansa occupies.

**Don't** use `{colors.hairline}` (#ebebeb) as a text color. It is a border-only token (60 of 62 occurrences are borders). For light muted text, use `{colors.ink-muted}` (#4d4d4d) or `{colors.navy-mid}` (#52627c).

## Known Gaps

- **Hero obscured by consent modal:** the captured screenshot shows a cookie-consent modal overlaying the hero image. Below-fold sections (Recommendations, Services) are visible; the hero and above-fold booking widget are only partially captured.
- **Dark mode:** no dark-mode marketing surface is exposed; the footer is the only dark band.
- **Hover and focus states:** the system declares nav-link active states via CSS but the captured static render does not show hover backgrounds or focus rings.
- **Miles & More loyalty surfaces:** the loyalty program (Miles & More) carries its own color tier — a rose/pink accent and a distinct typeface weight — that is not represented in the marketing-homepage tokens.
- **Cabin-class sub-brands:** Business Class, First Class, and Economy Light each have distinct visual treatments in booking flows that are not captured here.
- **Motion:** the hero carousel animates (slide transitions, Swiper.js) — animation curves and timing are not represented in this spec.
- **LufthansaHead weight variants:** the extraction captured weights 300 and 700; the font file may include additional weights (400, 500) not observed on the marketing surface.