Skip to end of metadata
Go to start of metadata

Atlassian provides a toolkit for you to help you create beautiful features for our products. The toolkit combines the Atlassian Design Guidelines (ADG) and the Atlassian User Interface Library (AUI). The two work harmoniously together to provide a complete toolkit for you. 

Atlassian Design Guidelines (ADG)

The ADG guides you on how your feature should behave and how it should lookYou 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, and icon formats 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 attractive.

Visit the ADG.

Atlassian User Interface (AUI) Library

You use AUI to build your UI. 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 that you find in the ADG you can build with the AUI library. 

The AUI library is cross-product compatible. Meaning JIRA, Stash, Confluence and all other Atlassian host 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.

Browse through the AUI components.

 

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. If you are already familiar with AUI and ADG or just want some quick links, see: