The Atlassian Design System (ADS) is powerful and comprehensive. It organizes content clearly. It helps designers and developers quickly find the needed components, styles, and guidelines.

This clear hierarchy makes the design system easy to use. It helps with large teams or complex projects.

The Evolution and Versions

The ADS began in 2002, when Atlassian was founded. Early products like JIRA and Confluence quickly gained market recognition.

ADS has developed a well-established system. It includes accessibility and responsive layout features. It has grown from basic design components. Each update shows Atlassian’s effort to improve user experience.

Understanding ADS’s changes helps designers use it better and see future design trends. You can deeply appreciate each version's charm through  the evolving Jira interface.

AUI (Atlassian User Interface)  2009

• AUI was Atlassian's first design system. It provided UI components and styles for products like Jira and Confluence.

• It uses jQuery. It provides basic UI components, like buttons and dialogs.

• The design was basic. It lacked a unified style. It focused more on functionality and consistency.

ADG (Atlassian Design Guidelines) 2012

• ADG was a further development of AUI. It aimed to unify the visual style and user experience across Atlassian products.

• It introduced clearer design guidelines, standardizing aspects such as color, typography, and icons.

• The goal of ADG was to make all Atlassian products look and feel the same, creating a better user experience.

ADG 2 &3 (Atlassian Design Guidelines 2 & 3)  2016

• ADG 2 was a major upgrade of ADG. It used responsive design to adapt to different devices and screen sizes. This fixed scalability issues.

• ADG3/Atlaskit provided flexible building blocks, allowing developers to reuse components across multiple products, speeding up the development process. Jeniffer, who contributed to the creation of ADG3, shared insights about the process.

Atlassian Design System（ADS）2018

• The ADS is the latest design system from Atlassian, integrating content and code from the Atlassian.design and atlaskit.atlassian.com websites. It fully incorporates prior design experience with modern design principles.

• It has a full library of UI components, icons, colors, and design rules for all Atlassian products.

• The system strongly emphasizes  ease of access. Supporting multilingual and international design needs.

• It stresses integration with modern frontend frameworks, like React. This boosts development efficiency and component reuse.

What Products Built with ADS

• Confluence: Team collaboration and content management platform.

• JIRA: Tool for managing projects and tracking issues.

• Trello: Task management and collaboration tool.

• Bitbucket: Code management and collaboration platform.

And more 18+ Atlassian Products.

Applicable industries for reference

Material Design highlights visual feedback and imitates the physical world. In contrast, the Carbon Design System focuses on consistency. This makes it perfect for large-scale enterprise applications. IIn contrast, the ADS optimizes the user experience for team collaboration tools, especially in complex project management and collaboration environments, such as:

• Enterprise Applications: They need complex features and high consistency. Examples are project management tools and CRM systems.

• Collaboration Platforms: Tools that support team collaboration and information sharing, such as knowledge management systems and social networks.

• Productivity Tools: Apps that boost individual and team productivity. They include task management and time tracking tools.