KLM DESIGN.md

Design System Inspiration of KLM

Overview

Visual Theme & Atmosphere

KLM Royal Dutch Airlines "was founded on 7 October 1919 and is the oldest airline in the world still operating under its original name", in its newsroom's words. The KLM Group carried 34.1 million passengers and 621,000 tonnes of cargo, with 92 European and 70 intercontinental destinations, and "since the merger with Air France in 2004" it has operated as one of the two airlines of the Air France KLM Group.

The Dutch site is clean and unmistakably KLM: white and cool grey #f6f7f8 surfaces, deep navy #002746 text, and KLM blue #0070c2 for the brand, links and the flight search. Controls are 4px-rounded; type is Universal Sans Display and Universal Sans Text.

What makes it worth reading:

• A semantic system with an airline's vocabulary. Beside text, surface and action roles, the --aero-* tokens name Flying Blue loyalty tiers, airports (--aero-color-surface-airport-ams) and cabin classes (--aero-color-text-la-premiere-default).
• Three-step actions. The blue goes #0070c2 → #005496 (hover) → #003d6d (pressed); white controls go through #eaebec and #d4d8da.
• A dark focus outline. A 2px #001527 outline marks keyboard focus.

Primary tasks

• Search flights; book, manage a trip, check in.
• Flying Blue; help.

Brand Narrative

The oldest airline still flying under its original name keeps its identity in one colour: KLM blue. The site pairs it with navy text and quiet greys, and its tokens speak an airline's language — airports, cabins, loyalty tiers — on top of a conventional semantic core.

Principles

• Blue is KLM. Brand, links and the main action.
• Three steps per action. Rest, hover, pressed.
• Visible focus. A dark 2px outline.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle on klm.nl: 1,792 root custom properties — --aero-* 832 (KLM's), --mat-* 884 (Angular Material, excluded), --bwc-* 71 (a palette layer) and a few others.

Blue

• Primary (#0070c2) — --aero-color-primary-500, --aero-color-background-brand, --aero-color-text-brand, --aero-color-text-link-default.
• Primary hover (#005496) — --aero-color-surface-action-primary-hover, --aero-color-blue-600.
• Primary pressed (#003d6d) — --aero-color-blue-700.
• Primary 50 (#eaf4fb) · Blue 200 (#a5d5ef) · Signature (#009fda, --aero-color-border-brand-signature).

Navy and neutrals

• Foreground (#002746) — --aero-color-text-default; 19 of 23 <p> elements.
• Navy 900 (#001527) — the focus outline.
• Background (#f6f7f8) — --aero-color-background-default.
• Canvas (#ffffff) — --aero-color-surface-default.
• Tertiary hover (#eaebec) · pressed (#d4d8da).
• Text muted (#536069) · Text disabled (#889096) · Border strong (#aab0b5).

Loyalty and cabins

Flying Blue #0800b9 (--aero-color-brand-loyalty-one) · Critical #ad0029 · La Première #d40504.

Typography

Font family

Universal Sans Display (500) and Universal Sans Text (400, 500, 600), loaded (document.fonts).

Scale

The flight search button is 14px/500; header tabs 16px/400; header utility buttons 20px/500.

Layout

• The booking widget leads the page on a blue band; grey #f6f7f8 sections below.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

--aero-shadow-* and --aero-elevation-* tokens exist; the measured controls are flat.

Motion & Easing

Not measured.

---

Tier 1 sources: https://www.klm.nl/ (live homepage — 1,792 root custom properties read via getComputedStyle, Angular Material excluded; Universal Sans loaded; three components measured at rest, hover, pressed and focus after declining cookies, captured 2026-09-26); https://www.klm.nl/zz-this-does-not-exist (nonsense-path control — HTTP 404 in the browser, read 2026-09-26); https://news.klm.com/ (KLM newsroom — founded 7 October 1919, oldest airline under its original name, 34.1 million passengers, Air France KLM Group since 2004, read 2026-09-26)

Components

Measured after declining cookies ("Weiger"), focus read under a real Tab key, and a hover counted only when :hover matched; background-image, text-decoration and pseudo-elements were compared too.

• Flight search — Zoek vluchten: #0070c2, white 14px/500, 4px, 48px. Hover #005496, press #003d6d.
• Header tabs — Boeken, Mijn Reis, Check-in: white, blue label, 4px, 50px. Hover #eaebec with a #005496 label; press #d4d8da with #003d6d. Focus: outline: 2px solid #001527.
• Utility buttons — Zoeken, Inloggen: white, navy 20px/500, 48px, 12px. Hover #eaebec, press #d4d8da, the same focus outline.

Radius

4px on buttons and tabs.

States

Hover: search #005496, tabs and utilities #eaebec. Press: #003d6d and #d4d8da. Focus: a 2px #001527 outline on tabs and utilities.

Do's and Don'ts

Do

• Use KLM blue #0070c2 for the primary action, stepping to #005496 and #003d6d.
• Set text in navy #002746.
• Draw focus as a 2px #001527 outline.

Don't

• Don't count Angular Material's --mat-* as KLM tokens.
• Don't use the Flying Blue indigo #0800b9 outside loyalty contexts.
• Don't round beyond 4px.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#0070c2 KLM blue · #005496 hover · #003d6d pressed · #002746 navy · #001527 focus · #f6f7f8 background · #eaebec / #d4d8da grey states · #0800b9 Flying Blue

Example Component Prompts

• "A 48px KLM blue #0070c2 button, white 14px/500 Universal Sans Text, 4px radius; hover #005496, press #003d6d."
• "A white tab with a blue label that washes to #eaebec on hover; focus a 2px #001527 outline."