Colors

Color provides meaning and expression, and adds to a recognisable appearance. On a functional level, it’s there to support you by providing sufficient colour contrast or as an extra indication of (interactive) states.

How to use

Designers: Color variables

Go to the Aero Global Foundation library to find the Color variables

Developers: Color tokens

Go to Aero Global Github repo to find the Color tokens (JSON)

Theming: Brands and Themes

The two color token libraries of Air France and KLM are aligned in such a way that they can be switched easily between brand, but also between themes. All you need to do is apply a single design token to an element in your designs and code and the switch does the rest.

Air France	KLM
Light Theme — Dark Theme	Light Theme — Dark Theme

Tip: Color Pairings

Even-though the various color tokens belong to a specific category separated by the tabs (Text, Border etc), a lot of the color tokens should actually be paired. It’s quite easy to use since it’s all in the name.

For example: System Success

The Status component consists of three parts and in this case all these parts belong to the group “System Success” so you can never go wrong.

Surface: aero-surface-color-system-success

Border: aero-border-color-system-success

Text: aero-text-color-system-success

More of these pairings are either states, variants or special groups. Search for pairings in your tokens (variables) by using these keywords:

Variants	System	Special
Primary Secondary Tertiary Alternative	System Informative System Success System Warning System Critical	LaPremiere WayFinder