In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Colours

Colours are the heart of the Airbus Design System, the essence to our Brand image.

A new set of colours for the Digital world.

The following guidelines explain why respecting colours usage is key for the end user global experience as well as Airbus brand image.

Digital brand colours are extracted from the Brand colours, in fact softly different. 

For this new release, the Design System team has worked closely with the Branding team to reshape colours and make them fit the digital world. One of the major reasons behind this was improving accessibility by bringing a better color contrast (AA as a minimum) and helping the design of accessible Ui components. Also, colours have been softly saturated and the number of shades per palette extended as an anticipation for Dark and Light themes.

Picture that presents the primary colour palettes. The V.0.5 compared to the new one improved including accessibility standards. The new palette also shows the accessibility level and the hex code for each shade.
Understanding the palettes

We also reduced the number of palettes in order to ease their usage across digital products.

 

Brand colours

Two palettes are available for each Brand. For the Airbus brand these palettes are primary blue and  secondary blue. The primary blue carries the most the brand identity, it is used thoughtfully across the Ui components to convey a bold and recognizable identity for the brand.

Colours carry meaningful information, this is why we decided to apply Primary blue on interactive elements, guiding the user through the experience. Used logically throughout it improves affordance across complex applications and dashboards.

Colours02

Neutrals

Composed of grey shades, they are common to all brands, used on various components.

Colours03

Semantic colours for feedback

Also common between brands, the semantic colours are made to add meanings to components, to enhance feedback to the user. This set of colours is used for action buttons, alert messages, and form elements. Input fields, for example, may contain positive and negative feedback, whereas alert messages may provide feedback or warnings.

Backgrounds

Background colours are usually used when creating sections in your designs. Few backgrounds are provided and if you use other shades please share this with us.

UI shades

Other palettes can be used in data visualisation, for color chip tags, etc.

Colours04
Colours in the Ui kit

Using Sketch, all colours are listed as layer styles and shades.

When creating new components, always consider applying layer styles from the synchronized Ui kit. Doing so enables you to automatically have updates.

Colours05

Typography

App Icon

Ui Icons

Grid & layout

Back to top