Brand engagement is defined in three levels, based on the customer journey. On the first level, brand elements are used big and bold: the blue panel and large branded photography. By the third level, the brand is carried by its smaller elements: typography and iconography.

At this level, it is all about brand recognition: advertising across print and online media, social channels and displays at the airport. The blue panel and large, emotive photography lead.

Used in: logos, printed and online advertising, aircraft, the airport and merchandise.

This is where people actively interact with the brand: in the app, on the homepage and landing pages, or in a marketing email. A gradient of KLM Blue keeps the brand recognisable while leaving room for content and choice.

Used in: marketing, landing pages, the homepage, kiosk screensavers and email campaigns.

Here people are already engaged and trying to get something done: booking a ticket, paying for an upgrade, reading a service email or changing a booking. The brand steps back to typography and iconography, so the task always leads.

Used in: functional emails and conversion-driven parts of the experience, such as the booking flow and My Trip.

An updated palette with light and dark gradients, and a page balance that stays mostly light, with dark sections used to break the page and draw attention. The colour for primary actions was reviewed against every shade for contrast, keeping the most important actions unmistakable without feeling too vibrant.

Ancillary imagery had gradients that didn’t match the palette, awkward overlaps and colour baked into images. We rebuilt it: a richer gradient with a subtle warmer light, tones taken from the palette, more space for the product and no overlap — so it can be coded as a component, with the gradient in CSS rather than in the image.

Every product cut-out is refined for hue, levels and contrast, so the assets pop and never look grey.

The new gradient brings the kick: a premium feel with contrast, and an easy, scannable focal point. Light shines from the product.

Elegant line icons stay the default, with a subtle brand touch: corners mostly sharp, combined with a roundness taken from the Air France accent. Not too playful, not too sharp — balance is key.

Every icon is drawn on one grid. Stroke widths scale from 1.5 at 24px to 3.0 at 80px, and detail is added as icons grow, from a basic form to negative space and a curved stroke ending at the largest size.

Across the aircraft, cabin, amenity kits and campaigns, the Air France accent marks moments of care and identity. In digital it can do the same: quietly orienting passengers, drawing attention to a useful next step and adding brand expression.

An outline accent is less visually heavy — a subtle extra touch of brand, used sparingly and lovely in motion.

Two families of photography, aligned with the new brand imagery guidelines. Dreamlike visuals set the tone, limited to one per page at the first, header-level entry. Experience visuals complement them, with no usage limit.

Everything comes together in a prototype — typography, colour, imagery, layout, icons and shapes — used as an environment to explore, test and showcase the language in context. Next: aligning typography and colour with the design system, and exploring more contexts.

Thirteen features in short chapters, from Unwind to Dining & work, each with a single, clear action: Recline, Raise, Unfold the table. A progress bar keeps you oriented, and the tour ends with Relax mode, where one touch sets the recline, leg rest, footrest and headrest wings together.

Or skip the tour and explore. Every feature is a single tap in one panel: dim the cabin to try the reading light, raise the touchscreen, plug in, find the remote. Drag to turn around the seat, pinch to zoom, or use the keyboard. Switch between a standard, front-row, window or aisle seat, in French or English.

Connect the dots across all of BA’s current and future digital work: show how the experience translates holistically across touchpoints and devices, and how BA responds to pain points and nuances within different journeys in thoughtful, intelligent ways — galvanising teams, removing silos and connecting design thinking.

A three-minute film brings it to life through one family’s trip to Madrid: dreaming and planning together, a shared booking, choosing seats, boarding passes and finding the gate, help from a conversational assistant when it’s needed, and a warm welcome home.

A visual expression of the British Airways brand voice, typography is an instantly recognisable brand asset present on every digital touchpoint. Type sizes are set as percentages of the body copy, creating a clear information hierarchy that flexes across any application.

Icons and illustrations share one drawing approach: lines finish with rounded terminals and taper towards the end, and curves are kept as soft as possible.

Illustrations respond to their context and come in three sizes — small, medium and large — gaining complexity and detail as they grow, while always being treated the same way for consistency.

Photography creates a sense of wonder through three principles:

1. Insider experiences

Hero the stories of people who know destinations best — experts and locals documenting what really makes a place, not just what the postcards show.

2. New perspectives

Show people an angle they wouldn't find anywhere else, from a distance and right up close, but never predictable.

3. Find the wonder

The world is full of amazing experiences and fantastic people, and the imagery celebrates this.

Velocity curve. Every animation uses the same velocity curve, for scale, movement, opacity and blur, so the whole experience shares one interaction feel.

Transitioning to content. When a link is clicked, a piece of the page's content is carried through to the next page.

Modal behaviour. Modals use a frosted card; the page behind fades to 10% opacity until the modal is closed.

Navigating layers. Content can be explored on the X and Y axes and in depth on the Z axis, with a 5% parallax offset between layers.

Founded in 1919, KLM is the world's oldest airline still operating under its original name. Its design DNA reflects Dutch heritage — grounded, confident and timeless — while continuously evolving for modern travellers.

A Digital Experience Design Language (DXDL) is a framework that guides the design and development of branded digital products and services. Built on brand principles, it is the foundation for guidelines and components — so that every single element breathes KLM, consistently.

Typography is usually a big driver in building a strong digital design language, for two reasons.

The brand can be instantly recognised by its typography, and most of KLM's digital platforms and UI are text-heavy — a great opportunity to bring the brand look-and-feel into every screen.

A digital-first colour system built for accessibility, with every tone on a scale from 50 to 900. KLM Blue lives at 400; tone 500 is optimised for interactive elements.

To meet both brand and accessibility needs, colour use is balanced across three levels of brand engagement:

Awareness — brand recognition in advertising, social media, aircraft and the airport.
Participation — the app, homepage, landing pages and marketing email, where the Sky Gradient adds recognition.
Functional — task-focused moments like booking, upgrades and service email.

Shapes add warmth and personality without shouting. Smooth rounded corners feel softer and more human, while the journey stroke and dot offer a playful nod to travel.

Icons carry the same shape language at small scale. Sharp stroke terminals match the Universal Sans typeface, and outlined and filled versions distinguish default from active states.

A sky-inspired gradient centred on KLM Blue 400 opens and closes pages where accessibility limits the use of the primary blue, quietly reinforcing the brand. Single and multi-panel layouts keep KLM the obvious sender of every message — from the app to airport screens.

The First experience invites people to step inside the suite. Tap the hotspots to explore the seat, the materials and the details, or swipe through First at a glance: the dining, the Meridian headset, the Elemis amenities. Rich photography leads, with copy kept short and confident.

The British Airways experience brings travel classes, lounges, food and drink, entertainment and holidays into one place, browsable as large thumbnails or a quick list. On desktop, an image collage previews each topic as you move through the menu.

Editorial pages give British Airways a voice: BA100, celebrating the centenary and the people who made it, and partner stories like AirPortr’s door-to-door baggage service. Film, long-form storytelling and quiet calls to action sit side by side.

Destination pages turn inspiration into action. Fly me to New York puts the destination in the search itself, with the best fares by month, recommended hotels and holidays below, and Explore pages that capture the feel of a city before you search for flights.

The same design language carries through to the practical moments. Hand baggage allowances become clear and visual, with dimensions you can take in at a glance, and lounge pages set the tone for the journey ahead.

Built on the new British Airways design language, the experience uses a clear, conversational tone of voice — giving customers the information they need in a way that is clear, concise and quiet.

Putting control in the customer's hands, the experience plays back what they have, what they can change and how British Airways can help.

Reviewing everything in the previous Manage My Booking, stripping it back and developing a UX flow that lets both the customer and British Airways get the most from the experience.

A digital stage — immersive in feel, strategic in structure. Typography, motion and spatial composition create tension and release, echoing the physicality of sport.