Design System 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.

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.



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


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.


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.

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.



App Icon

Ui Icons

Grid & layout

Back to top