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

Header

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

General guidelines
The picture is showing a dark header

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”).

Usage

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.

B2B

The picture is showing dark header

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

B2C

The picture is showing a transparent header

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

B2E

The picture is showing a white header

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.

Responsive variant

The first variant is a standard responsive Header. It should be used to design mobile website or progressive web apps, not native or hybrid applications.

The picture is showing a top dark application bar for mobile devices with an hamburger menu on the right
The picture is showing a top application bar for mobile devices with an hamburger menu on the right

The second 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.

The picture is showing a top dark application bar for mobile devices
The picture is showing a dark bottom nav bar for mobile devices
The picture is showing a top application bar for mobile devices
The picture is showing a bottom nav bar for mobile devices

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.

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