The Header is the most iconic UI component of the Application. It enables users to clearly identify which brand and application they are using within the Airbus digital ecosystem.

General guidelines

All Headers are created with the same guidelines: a plain background (corporate blue, white or transparent), the logo on the left, the name of the application and several components based on the application needs (tabs, buttons, icons etc).

We recommend choosing an app name related to the app’s purpose (e.g.: “Health Monitoring”). Avoid app names with acronyms (e.g.: “HM”).


What kind of Header should I use?

We provide 3 different variants (blue, white and transparent). Using the correct Header depending on the business sector ensures business continuity and consistency. By just looking at the Header, it’s possible to recognize the targeted audience.



The blue variant is the default and classic variant that should be used for business to business applications.



The transparent variant is supposed to be used on top of covers, mostly used on corporate websites or classic websites with editorial content B2C oriented. The transparent header should change to a blue one when the user is scrolling vertically (outside the cover).



The white variant is more discreet than the blue and therefore should be used for business to employee applications, putting more emphasis on the brand is less required for employees needs. A more discrete component will put the focus on efficiency and highlight the content.

Incorrect uses

  • Do not change the color(s).
  • Do not change the design guidelines.
  • Do not attempt to recreate the Wordmark.
  • Do not rearrange the elements of the logo.
  • Do not outline or redraw anything.
  • Do not use the app icon with your app logo.
  • Do not use the logo on backgrounds containing complex photographs or illustrations.
  • Do not delete the separator between the logo and the application name.
  • Do not attach text or another logo to your Wordmark.
Visual guidelines

How do I build it?

To ensure that the logos are clearly visible, they need to be surrounded by an unremovable white space. Use the tallest letter in the Wordmark to define the minimum space around the logo. This space should not be too large, so as to avoid having an application header that is too long.


App Icon & Favicon

In order to maintain consistent branding, apps must respect the design guidelines, even the App icons and Favicons.

Responsive behaviours

Responsive variant

This variant is the application bar, it should be used with the bottom navigation bar. This set of components should be used for native or hybrid mobile applications.

Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top