Naming Conventions

Introduction

Naming is a fundamental part of the Airbus Design System. 

Giving components explicit and consistent names will ease the communication with product teams and between designers and developers.

Singular and Uppercase    

Component names are always written in singular with an uppercase letter at the beginning of each word.

Components have a dedicated name that should be always written in singular. Just like in real life, a name is never used in plural. 

You can use plurals for “Groups”, “Items” and “Examples” if you have several elements to showcase because those words are not considered to be names.

Also, always use an uppercase letter and a blank space at the beginning of each word.

Good Bad
Tab Tabs
Side Navigation Side navigation
Button Buttons
Button Group ButtonGroup
Colours  

Do not mention colours in component names

We aim to support multiple brands with an agnostic kit. Using colours in the component name will create confusion across Airbus / Skywise / ACJ etc. 

The naming structure ensures that the component evolves along with the system, so if the colour of a primary button changes, we don’t have to update its name throughout the UI Kit, Dev Kit and Documentation.

Good Bad
Button/Primary Button/Blue
Accordion/Light/Default Accordion/White
Metaphors  

Avoid metaphorical naming

To avoid confusion and infinite debates, we favor clear naming (Items, Groups, Examples…) instead of a metaphorical naming like in Atomic Design (Atoms, Molecules, Organisms..).

Good Bad
Items Atoms
Groups Molecules
Examples Organisms
Sizes  

T-shirt sizes to define sizing.

Always use short versions in caps (XS, S, M, L, XL).

In a list, always show the biggest size at the top of the list.

Use numbers (01 / 02 / 03 / 04 / 05) to reorder the list.

Good Bad
S Small
M Medium
L Large
Emojis 

Emojis are used by three billion people, making it the most spoken language in the world. Today, half of communications are done through technology and emojis are used to add an extra layer on top of what simple words can convey.

Using it in the UI Kit allows the designer to understand what is available in the Dev Kit, and how components are structured like in the example on the left.

Some emojis are forbidden to use like facial expressions, especially in the Brand Center. You can only use the following table:

Emoji Meaning Usage
📩 Release Note UI Kit Pages / Email Subject
🗝 Getting Started UI Kit Pages
🕸 Data Visualisation UI Kit Pages
📱 App Icon UI Kit Pages
📐 Grid System UI Kit Pages / Overrides
🌈 Visual Styles / Shade UI Kit Pages / Overrides
ℹ️ Iconography / Icon UI Kit Pages / Overrides
🚠 Elevation Overrides / Text Styles
👆 Interaction Overrides / Text Styles
🔲 Border Overrides / Text Styles
🏷 Label Overrides / Text Styles
Background Overrides
🏞 Picture Overrides
📘 Title Overrides
📖 Content Overrides
📏 Size Overrides
🔢 Number Overrides / Text Styles
🔤 Text / Body Overrides / Text Styles
📆 Date Overrides
📋 Placeholder Overrides
🔥 Bug Fix / State Abstract / Overrides
🌵 Branch Abstract
🔹 On Roadmap / On Sprint Abstract
💅 Polish / Cleanup Abstract
🙋‍♂️ Contribution Abstract
🏝 Exploration Abstract / Components
🧩 Items Components / Overrides
📚 Guidelines Components
🔜 Work in progress Components
🆕 New Component / Variant Components
🚧 Deprecated Components
📦 Groups Components
Available in the Dev Kit Components
🌒 Dark Theme Components
🌖 Light Theme Components
✈️ Commercial Aircraft N/A
🛰 Defence & Space N/A
🚁 Helicopters N/A
🛎 Feature Request Emails
🌟 Dev Kit N/A
💎 UI Kit N/A
📊 KPI Google Sheet
Documentation use

Always remember that the Brand Centre serves as the official guidelines for building digital products for Airbus. You should always use it if there is any doubt on a component usage, use of spacing, colours or any other topic.

If you do not find what you need or something is wrong to you, speak up, the System team will always be here to review your contributions or discuss.

Component documentation  

Component documentation

Visual and usage guidelines for all components

Visual guidelines  

Visual guidelines

To stay in line with Airbus brand.

Resources  

Resources

All assets you need for your project

Tips

If you already used a previous version of the Airbus Ui kit we recommend you to delete the old Ui kit library. To do so, open your preferences panel, go to the “Libraries” tab, right click on the one you want to delete, click “Remove Library...”

Updates

When you open a Sketch file, you may receive notifications on the upper right corner of the app.

If you update the components, all modifications will be applied automatically to all your components across all the pages of your document. ✨

Again, this only works if you used library components, by breaking the symbols you will not be able to update the components.

Contact

We are aware that using a Design System can sometimes be challenging.

If you have any doubts about component choice, or if you want a fresh look at your mockups, we encourage you to get in touch. Our team can provide support and share valuable examples of projects which have successfully launched.

Back to top