The Atlassian Design Guidelines (ADG) has released version 1.5, 2.0 in the last few months. We were very busy working on these milestones that we didn’t announce them until now. Today we released version 2.1.

Releasing 2.0 and 2.1 was a big step forward for the design team and the design culture at Atlassian. The guidelines we have released is the start of a new standard we’ll be setting for our brand and marketing communications to ensure that our customers have a harmonious experience from purchase to first use.

What’s in the release

Completely new design and new url

As part of a larger project to harmonize Atlassian apps and sites – we looked broadly about how to approach the ‘Customer owned’ vs ‘Atlassian owned’ properties. We’ve settled on a clean and fresh white canvas to be used on our website and help channels. You’ll start to see this popping up more and more as the year progresses and teams roll out this new design direction.

Also, the ADG is now available at design.atlassian.com. Check it out!

home-page

 

Brand guidelines

The major addition to the ADG is the brand guidelines. The ADG was traditionally all about product design. With ADG2 we have expanded its scope to empower our marketing teams and get them shipping faster, and shipping more consistent experiences.

The brand guidelines include how to use our logos and where to download them. If you’re not sure about our copy writingcolor palette or typography, we have those covered as well.

brand

 

How we design

We used to put our design principles and approach in a ‘Getting started’ menu on the ADG. Since we’ve included brand guidelines, we needed to abstract those higher level philosophies and principles so that all our design work is referenced by the same core design values. The new ‘How we design’ section covers some of this.

how-we-design

 

Resources

Ever needed a keynote presentation template? Ever needed company logos? We have them in the ADG now along with our Photoshop and Sketch GUIs.

resources

 

Changing the navigation

We never had a scalable navigation system for the ADG and the horizontal navigation filled up pretty quickly. We made the move in 2.0 to utilize an in-page navigation tree to navigate to all the relevant sections. This approach is much cleaner and allows us to scale the ADG to fit more patterns and components in the future.

Everything else

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

  • Site has been moved to design.atlassian.com instead of developer.atlassian.com/design
  • Consolidation of blue colors so we don’t reference bright blue 1, bright blue 2 and blue anymore. The colors are now navy, blue and cyan.
  • Removal of buggy code examples and replaced with screenshot call outs
  • Removal of contextual screenshots from products in favor of better example mockups with call outs
  • Broken links to API docs fixed
  • Redesigned call out mockups to look like the new design
  • The former bright blue 1 color, #3b7fc4, was introduced in the last release but did not pass accessibility on #f5f5f5 backgrounds. The blue color is now #3572b0 and passes AA accessibility standards on #f5f5f5 and #fff. View the full product design color palette.
  • Date formats have been moved to patterns
  • Design principles, approach, resources and other getting started design information has been moved out of product design and into it’s own section called how we design.

Thanks

Special thanks to all the team members from Sydney and San Francisco involved in making this happening and continuing to push design at Atlassian. Without the individual contributions of our great team, we would not have been able to achieve this turn around in design at Atlassian. It’s been 2 years since we released the first version and I’m proud that we’ve been able to continue pushing our design work.

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

Subscribe now