coderef

KLM

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.
DownloadRaw
KLM

Build with the KLM look.

Palette, type and components from this DESIGN.md, applied to a sample hero.

Palette

At a glance

Website
klm.nl ↗
Theme
light
Typefaces
Universal Sans Text
Sections
10
Length
991 words

Add it to your project

Then prompt your agent

Design System · KLM

Light and dark previews, tokens and a ready-to-use package, generated from this DESIGN.md. No AI involved: the same file always produces the same output.

Generating design system…

DESIGN.md

DownloadRaw
Design tokens (YAML front matter)
name: KLM
colors:
  primary: '#0070c2'
  primary-hover: '#005496'
  primary-pressed: '#003d6d'
  foreground: '#002746'
  navy-900: '#001527'
  background: '#f6f7f8'
  canvas: '#ffffff'
  tertiary-hover: '#eaebec'
  tertiary-pressed: '#d4d8da'
  primary-50: '#eaf4fb'
  blue-200: '#a5d5ef'
  signature: '#009fda'
  text-muted: '#536069'
  text-disabled: '#889096'
  border-strong: '#aab0b5'
  flying-blue: '#0800b9'
  critical: '#ad0029'
  la-premiere: '#d40504'
typography:
  button:
    fontSize: 14px
    fontWeight: 500
    use: flight search button
  nav:
    fontSize: 16px
    fontWeight: 400
    use: header tabs
rounded:
  sm: 4px
components:
  button-search:
    type: button
    backgroundColor: '#0070c2'
    textColor: '#ffffff'
    rounded: 4px
    height: 48px
    typography: 14px / 500
    hover: '#005496'
    pressed: '#003d6d'
    use: 'Zoek vluchten — --aero-color-background-brand, stepping to --aero-color-surface-action-primary-hover #005496 and #003d6d when pressed.'
  nav-tab:
    type: button
    backgroundColor: '#ffffff'
    textColor: '#0070c2'
    border: '#0070c2'
    rounded: 4px
    height: 50px
    typography: 16px / 400
    hover: '#eaebec + fg #005496'
    pressed: '#d4d8da + fg #003d6d'
    focus: 'outline 2px solid #001527'
    use: Boeken, Mijn Reis, Check-in, Flying Blue — white tabs whose grey wash and blue label deepen on hover and press; focus is a 2px navy outline.
  button-utility:
    type: button
    backgroundColor: '#ffffff'
    textColor: '#002746'
    border: '#002746'
    rounded: 4px
    height: 48px
    padding: 12px
    typography: 20px / 500
    hover: '#eaebec'
    pressed: '#d4d8da'
    focus: 'outline 2px solid #001527'
    use: 'Zoeken, Inloggen in the header — white with navy text; --aero-color-surface-action-tertiary-hover #eaebec, then #d4d8da.'
omitted:
  - section: spacing
    reason: No verified values in current evidence.
fonts:
  roles:
    display: Universal Sans Display
    sans: Universal Sans Text

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.

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.”

More like KLM

All brands designs →

Brand names describe the visual style only; coderef is not affiliated with or endorsed by any brand listed. Licenses