Lufthansa Identity System

Overview

The Lufthansa Identity System is a corporate brand guideline built on Frontify, presenting the airline's identity as a structured, Germanic-precise system: a deep navy (#05164d) canvas, crisp white page fields and a single restrained warning red (#d9534f) reserved for alerts. The aesthetic movement is best described as Corporate Swiss Modernism: a flat, grid-aligned layout with hairline dividers and no decorative effects. The emotional response is trust, orderliness and quiet premium confidence, reinforced by the concentric 'Heritage, Positioning, Brand Values' diagram that frames the brand as thought-through and cultivated.

Tone of voice is declarative and instructional rather than promotional: short, measured sentences that describe rules and reasons. Vocabulary favours words such as 'characteristic', 'holistic', 'profiled' and 'thought-through'. Example sentence in the brand's voice: "Every point of contact with the brand follows one profiled, holistic logic."

Colors

The palette is anchored by Lufthansa Navy (#05164d), which is the primary role: it carries all H1 and H2 headings (font-size 36px and 22px), body text colour, the header bar background, the primary button outline and fill on hover, and the hero diagram panel. Lufthansa Navy is the single most frequent brand colour on the page and the one users read as the brand. On-primary (#ffffff) is used for any text or icon sitting on navy.

Secondary (#52627c, slate blue) supports body links and muted supporting copy; it is a quieter tone used for navigation hover states and link colour (rgb(82, 98, 124)). Neutral surfaces run from pure white (#ffffff) for the page field through #f8f8f8 for the active sidebar row, #eaebec for hover containers, and #e6e6e6 for the footer band. Tertiary red (#d9534f) is

Typography

The type system pairs LufthansaHead (display, headings and quote lines, weights 300 and 700) with LufthansaText (body, labels and links, weights 300, 400 and 600). Headings carry the brand's authority through 700-weight navy setting, while the 300-weight custom display style offers a lighter editorial counterpoint. Use display at 36px with 39.6px line-height and no letter-spacing for page titles, headline-md at 22px / 28.6px for section titles, and body-md at 16px / 24px for running copy. Labels such as button text use label-md at 14px, weight 600, with text-transform none. Apply no text-shadow anywhere; contrast is handled by colour alone.

Layout

The layout is a fixed-width container with a maximum width of 1280px, arranged on a 12-column grid with 20px gutters. The left sidebar occupies roughly 190px and the content column 800px to 950px, creating a documentation-style two-column model. Whitespace is generous: the header is 90px tall, and vertical rhythm between the H1 and the intro paragraph uses roughly 40px. Use the lg spacing token (8px) for tight list rhythm, the xl token (10px) for heading margin-bottom, and the gutter token (20px) between columns. Section separation should rely on 35px top padding above H1 rather than dividers.

Elevation & Depth

Hierarchy is conveyed mostly by flat colour blocks rather than shadow. Where lift is needed, the card shadow is 0 3px 10px #0808084d. Hairline containment uses 0 0 0 1px rgba(54, 61, 74, 0.25) on bordered panels and inputs. An inset accent of inset 7px 0 12px -6px #05164d is applied to the left edge of highlighted navigation or callout blocks. There is no glassmorphism and no backdrop-filter. Level 1 is the white page field, Level 2 is the #f8f8f8 or #eaebec container, and Level 3 is the navy hero panel.

Shapes

The shape philosophy is Soft-Technical: corners are small and purposeful rather than pill-like. Buttons and cards use 4px radius (rounded DEFAULT), sidebar and nav items use 2px, and the large diagram panel uses square corners. The 9999px full radius is reserved for circular numbered step markers and status badges. Keep radii at 4px or below for any functional surface so the system reads as engineered rather than playful.

Components

Action Elements Primary buttons are outlined, not filled: transparent background, 2px navy border, navy 14px / 600 label, padding 6px 30px, height 36px, radius 4px. On hover the fill transitions to #05164d with white text over 200ms ease. Secondary buttons use the #dcdcdc fill with navy text and a 2px border of matching colour; on hover they become white. Tertiary buttons invert for navy and white backgrounds.

Containers & Surfaces Cards sit on #ffffff with a 4px radius, 8px internal padding (lg) and the md card shadow of 0 3px 10px #0808084d. Hover lifts the surface to #eaebec. The navy hero panel is full-bleed within the content column with 10px padding and square corners.

Inputs & Interaction Nav links are 16px body text in white on the navy header, with a 1px underline on

Do's and Don'ts

**Do**

• Use Lufthansa Navy (#05164d) as the single dominant accent for headings, outlines and primary actions.
• Keep button radii at 4px and border widths at 2px to match the outlined button system.
• Step surfaces by one neutral (#ffffff, #f8f8f8, #eaebec) rather than stacking shadows.
• Set headings in LufthansaHead 700 and body in LufthansaText 400 at 16px / 24px.

**Don't**

• Don't place navy text on navy backgrounds; the contrast collapses.
• Don't use the warning red (#d9534f) decoratively or for primary calls to action.
• Don't introduce gradients, glassmorphism or backdrop-filter effects; the system is flat.
• Don't use pill-shaped buttons; the 9999px radius is reserved for markers and badges.