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

Alpha V1 Release

Airbus Design System was released almost a year ago. It is the official single source of truth for digital products and services for Airbus.

Overview

We included a lot of new things based on your requests during that first year of adoption. 

This release includes a total refactoring of the visual language based on several principles:

  • Unify the Airbus digital ecosystem (from corporate needs to business needs, and employees needs). 
  • Converge toward a single digital expression of the brand.
  • Make it more agnostic and more easy to use for the designers and the developerImplement the WCAG 2.0 AA accessibility guidelines and compliance with the Section 508 standards for selling digital products in the US (Mandatory by law).

For those unfamiliar with the history of the product, we started with 286 Symbols (reusable assets for designers) and we will offer 1914 Symbols, for 37 Components and more than a 100 sub-components for designers and developers. For the development assets we started to provide the components on React and after a year of adoption we decided to make our solution more agnostic by providing components on Angular.

Components status
Component Brand Center UI kit CSS React Angular
Accordion
Avatar
Badge
Banner
Bottom sheet
Breadcrumb
Button
Card
Chat
Checkbox
Chip
Combo box
Container
Cover
Data table
Data visualisation
Date & time picker
Empty state
Footer
Header
Input field
Link
Loading
Media
Modal
Pagination
Panel
Popover
Progress bar
Radio button
Range slider
Rating
Select
Skeleton
Stepper
Tab
Textarea
Toggle
Tooltip
Transfer list
Release note

✅ Done

  • New artistic direction based on the Airbus Brand dark blue (#00205B)
  • Colour palettes refactoring (Digital colours, more shades per palette, less colours)
  • Text and layer styles refactored (easier to use)
  • New components + more than 100 Variants
  • Refactoring all components according to the 8px grid and optimized for the 1440px layouts
  • All interactive states for each component
  • Resizable settings for each component using smart layers
  • File structure (one page/component)
  • Naming structure (symbol list)
  • WCAG Standards check for all colour contrasts ratios
  • Default + Reverse colours for 15/37 components
  • Total refactoring of the datavisualization section
  • Grid system improvements (container variant for desktop layouts + gutter modifications)
  • App icons guidelines (for the web, iOS and android)
  • Getting started page (content modifications and improvements)
  • Design documentation updated (brand.airbus.com/design-system)

❌ Deprecated components

  • Notification Panel (Replaced with Notification Popover
  • Segmented Controls (Replaced by Button Group)
  • Filter Panel (We provide several examples depending on the context of use)
  • List (You can build you own list of components with the Items section)
  • Comments (You can build your own component with the Items section)

 

🧪 Your contribution is key!

We believe the System is a collaborative piece, let us know if something is missing or should be improved. Your contribution is more than welcome and the System team can review your contributions or discuss.

 

Your contribution can be on:

  • Functional bugs
  • Visual or accessibility defects
  • Component improvements
  • Use of the Ui kit
How to adopt it?
V1 Release Plan
Code & Design assets

Request code and design assets for creating user interfaces.

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