Color

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

Air France Red

Air France Red is used for our logo and other branding assets such as illustrations. Do not use for functional UI elements such as text or surface color with small white text, use Accent instead.

#ff0000

Air France Red

Only use for branding purposes, the Air France logo and visuals.

Primary

Our primary palette consists of various shades of blue, composed to work for digital products and provide sufficient contrast (based on the usage). Lighter shades are mostly used for background elements. When the colour provides good enough contrast, it’s mostly used for foreground purposes. This starts at the Primary 500 shade.

Primary

#f5f8fd

100

Used for backgrounds

#b3c7e9

300

Used for backgrounds

#0045b6

500

Used for primary actions and links

#14438b

800

Used for subtitles and non-primary actions

#051039

900

Used for primary text

Accent

As the name states, this colour is only used for accents and extra indications. Just like the KLM Blue colour, it should be used with care since it doesn’t provide a good enough colour contrast to be accessible. Therefore, do not apply it to text or as a background colour behind text.

Accent

#d40504

500

Use for accents and visuals

Grey

Our neutral colours consist of grey values and are meant for backgrounds, borders, and texts. Neutral colours are calm, easy to observe and give room for other colours to highlight the right elements. As you may notice from the hexadecimal values, our grey palette is not 100% grey. It contains a light touch of blue that, in terms of hue, matches the primary palette.

Grey

#f6f6f7

100

Use only as background colour

#e9e9eb

200

Use only as background colour

#d3d4d7

300

Use only as background colour

#a6a8af

500

Use only as background colour

#646774

700

Used for tertiary text and caption

#383c4c

900

Used for secondary text

Blue

Used across information states.

Blue

#e0ecff

100

Generally used across informative states, as a background color. NOT similar to our Primary colors.

#80b0ff

300

Generally used across informative states, as a border color. NOT similar to our Primary colors.

#0045b6

500

Generally used across informative states, as a fill color for icons. NOT similar to our Primary colors.

#051039

900

Used for informative states, as a text color on a Blue 100 background. NOT similar to our Primary colors.

Green

Used across success states.

Green

#e8f8eb

100

Generally used across success/ complete states, as a background colour

#6eb87e

300

Generally used across success/ complete states, as a border color

#03821e

500

Generally used across success/ complete states, as a fill color for icons

#002f0a

900

Used for success/ complete states, as a text color on a Green 100 background

Red

Used across blocking or error states.

Red

#fee3e3

100

Generally used across blocking or error states, as a background color

#fd8282

300

Generally used across blocking or error states, as a border color

#d40504

500

Generally used across blocking or error states, as a fill color for icons

#3f0404

900

Used for blocking or error states, as text color on a Red 100 background

Yellow

Used across warning or incomplete states.

Yellow

#fff5e0

100

Generally used across warning, incomplete or pending states, as a background color. For other purposes: only use as a border or background color.

#ffd480

300

Generally used across warning, incomplete or pending states, as a border color. For other purposes: only use as a border or background color.

#ffa800

500

Generally used across warning, incomplete or pending states, as a fill color for icons

#a95c14

700

Used for text on status label

#362400

900

Used for warning, incomplete or pending states, as a text color on a Yellow 100 background

Neutral

Our neutral palette only contain black and white. White is used as a background or text colour in general. Sometimes it translates to white for our dark theme as well. In that case it will always stay white, where we introduced a separate style/ class for (the '0' class). In other cases it will translate to the dark mode opposite.

Neutral

#ffffff

0 (always white)

This colour remains white whether in light or dark mode

#ffffff

100

White

#000000

900

Black

State colours

States communicate the status of a component, for example when pressing or clicking an interactive component. To visually indicate this state we use opacity styles as an overlay, on top of the default component colour.

Container/ component default background colour

Opacity style as a state overlat

Component content

Opacity states come in different values and colours, which are applied to our components. The values are based on the type of state. The colours are based on the component colour or surface colour. These opacity states our part of our Base Colours library.

Opacity / Primary

rgba(5,16,57,0.08)

Use for hover states on white surface

rgba(5,16,57,0.16)

Use for active states on white surface

Opacity / Black

rgba(0,0,0,0.04)

Use for hover states on white surface

rgba(0,0,0,0.08)

Use for active states on white surface or for hover states on a colour surface

rgba(0,0,0,0.16)

Use for hover states on colour surface

rgba(0,0,0,0.24)

Use for active states on colour surface

Opacity / White

rgba(255,255,255,0.16)

Use for hover states on colour surface

rgba(255,255,255,0.24)

Use for active states on colour surface

Accessibility

The way we apply colour plays a mayor role when it comes to providing accessible experiences. Users, including users with visual disabilities, must be able to perceive content on the page. In order to do so, the colour contrast should be sufficient enough.

When we say contrast, we mean the difference between two colours. For accessibility measures, this difference is measured and represented as a ratio. This ratio should at least pass the minimum AA requirement as provides by the Web Content Accessibility Guidelines (WCAG). This means that the visual presentation of text has a contrast ratio of at least 4.5:1, except for exceptions such as large text (should have at least a 3:1 ratio), graphics, decorative elements or logotypes.

This means that the colours on this page, could not simply be combined with any other colour. Only combinations that pass the minimum AA requirements can be applied. In the matrix below, you can see which colour combination provide sufficient contrast (marked green with a checkmark). Some combinations are only allowed when using large text, meaning at least 19px and bold or 24px regular (marked yellow with a letter 'L'). We did not include our notification colours.