Using ADG and AUI

We at Atlassian provide a toolkit to help you create beautiful features for our products. The toolkit combines the Atlassian Design Guidelines (ADG) and the Atlassian User Interface (AUI) library. The two work harmoniously together to provide a set of tools for you.

Atlassian Design Guidelines (ADG)

The ADG guides you on how your feature should behave and how it should look. You should reference the ADG in your conceptual phases to figure out:

  • which components or patterns you can use in your add-on
  • how your add-on components should interact
  • how to arrange your components on the screen
  • which visual attributes such as colors, font sizes, etc. work best

The guidelines were developed by Atlassian's own design team. Following the ADG will make your feature more familiar to users, easier to use and harmonious with the Atlassian product family.

Atlassian User Interface (AUI) library

You use AUI to build your user interface. AUI is a library of Javascript, CSS, templates and other resources you can include in your projects. Building a user interface with AUI automatically ensures your feature is ADG compliant in terms of look, feel and control behavior. Anything you find in the ADG can be built with the AUI library.

The AUI library is cross-product compatible. This means that JIRA, Bitbucket, Confluence and all other Atlassian hosted applications use the same AUI library to create a dropdown or label. There may be instances where a product-specific API provides extra or different functionality.

Where to go next

If you have never built a plugin, make sure you have installed the SDK and worked through Set up the Atlassian Plugin SDK and Build a Project. If you are familiar with the SDK but want to learn more about AUI, start with the Getting started with AUI tutorial in this space.