---
version: alpha
name: "Lufthansa"
description: "Lufthansa uses a precise airline service system: a deep navy header, signature yellow identity moments, white booking and content surfaces, custom Lufthansa Head and Text families, and restrained cards for flight search, travel extras, and destination guidance."
colors:
  bg: "#ffffff"
  bg-navy: "#05164d"
  surface: "#ffffff"
  surface-soft: "#f5f5f5"
  text: "#05164d"
  text-muted: "#52627c"
  text-on-dark: "#ebebeb"
  brand: "#05164d"
  accent: "#ffad00"
  accent-hover: "#e89d00"
  border: "#d7dce4"
  on-brand: "#ffffff"
typography:
  display:
    fontFamily: "LufthansaHead"
    fontSize: "72px"
    lineHeight: 1.5
    letterSpacing: "-0.025em"
  body:
    fontFamily: "LufthansaText"
    fontSize: "16px"
    lineHeight: 1.5
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "8px"
  card: "16px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

Lufthansa feels precise and calm. A dark navy service shell frames white booking and content areas, while yellow appears in controlled identity and action moments.

## Colors

Use navy `#05164d` for headers, major text, and brand structure. Yellow `#ffad00` is the recognition accent; muted blue-gray `#52627c` supports dense service copy.

## Typography

Lufthansa Head uses light weights for spacious display text. Lufthansa Text handles labels and travel details with practical density and consistent line height.

## Layout

Keep Book, My flights, Check-in, and Flight status accessible from the top. Place supporting travel products after the primary flight workflow.

Stack route and travel controls on mobile while maintaining their logical order. Service cards may become a two-column or horizontal list only when labels remain readable.

## Elevation & Depth

Rely on a navy-to-white structural transition and thin gray borders. Shadows should be soft and reserved for the central flight-search layer.

## Shapes

Use 4px for primary controls, 8px for service cards, and 16px only for large promotional imagery. Do not turn navigation into oversized pills.

## Components

The booking panel uses white fields, visible labels, and compact 4-8px corners. Service cards for hotels, cars, insurance, activities, and parking sit on `#f5f5f5` with simple icons.

Field expansion, fare selection, and carousel movement should be restrained. Yellow hover and focus states can reinforce identity without moving surrounding controls.

Preserve skip links for navigation, content, flight search, search, and footer. Every loading state needs a text equivalent, and date/class controls require keyboard operation.

Use calm service language: find flights, check in, manage flights, choose extras, prepare for your trip. Promotional text should remain secondary to task completion.

Navy is the persistent brand shell, not a full dark mode. White remains the default for booking, forms, and reading-heavy service content.

The system reflects modern transport graphics: high legibility, limited colors, and repeatable modules. Custom type and yellow identity moments prevent the utility layer from feeling generic.

## Do's and Don'ts

Do prioritize service tasks, use yellow sparingly, and keep loading feedback explicit. Do not fill large surfaces with yellow, hide flight status, or use low-contrast text on navy.

Create a Lufthansa-style airline homepage with a deep navy header, light-weight Lufthansa Head display type, white flight-search panel, signature yellow submit action, compact service cards, and top-level Book/My flights/Check-in/Flight status navigation.