The Atlassian Design Guidelines (ADG) is a public best practice guide for how to design all things Atlassian. As well as being a sneak peek into our inner workings, these are also our best practices for designing products and add-ons that behave consistently for our users. Today, we released Atlassian Design Guidelines 1.1.

Our design team has been working for the last couple of months on precision and beauty for altogether new patterns and updates to existing ones. The results will give you a beautiful, consistent experience across the Atlassian suite and the add-on system. As an add-on developer, you can dive into the deep end with the guidelines to guide you along the way.

What’s in the release

New tables

Tables can now be sorted, and inline actions got the consistency treatment.

1.1-blog-images-tables

Feature discovery dialog

We’ve been using inline dialogs in our products for new feature discovery for some time, now there’s a standard way to implement that pattern.

1.1-blog-images-featuredisc

Comments

Atlassian uses ‘threaded’ and ‘flat’ designs for comments. We’ve accommodated for both styles and formalised some rules around how to interact with them.

1.1-blog-images-comments

Icon font updates

The icon font is becoming the standard iconography delivery mechanism for most of our products so this library will grow with every release. We now have 50 icons in the font that are easily reusable by add-on developers. ProTip: Hover the icon for a tooltip with the AUI class and unicode values.

1.1-blog-images-icons

Everything else

There was so much in this release that we could only list some of the highlights here. Full details are available in the changelog.

We’ll be releasing every 6-8 weeks going forward so expect new patterns real soon!

Check it Out

Fresh ideas, announcements, and inspiration for your team, delivered weekly.

Subscribe now