{"id":15934,"date":"2023-07-20T03:33:17","date_gmt":"2023-07-20T10:33:17","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=15934"},"modified":"2026-05-08T18:12:19","modified_gmt":"2026-05-09T01:12:19","slug":"atlassian-design-system-creating-design-harmony-scale","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/atlassian-design-system-creating-design-harmony-scale\/","title":{"rendered":"The Atlassian Design System \u2013 Creating Design Harmony at Scale"},"content":{"rendered":"<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/atlassian-design-system-1024x512.png\" alt=\"atlassian design system\" class=\"wp-image-48752\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/atlassian-design-system-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/atlassian-design-system-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/atlassian-design-system-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/atlassian-design-system.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\">What is Atlassian Design System?<\/h2>\n<p>Atlassian Design System, ATL for short, is a design system which <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-mission-statement\/\" target=\"_blank\" rel=\"noreferrer noopener\">mission<\/a> is to create simple, intuitive, and beautiful experiences for their end-users. Atlassian&#8217;s products include Jira, Trello, and Confluence, so their design system needs to work <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/multi-brand-design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">across those products<\/a> plus serve for people who built internal product and more.<\/p>\n<p>Scale your design system with UXPin Merge, unique technology that makes it easy to use a coded design system for prototyping. Bring React, Storybook or npm components to a design tool and keep designers and developers in sync. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover UXPin Merge<\/a>.<\/p>\n<section class=\"discover-merge\">\n<div class=\"discover-merge__container\">\n<div class=\"discover-merge__left\">\n<p class=\"discover-merge__heading\">Reach a new level of prototyping<\/p>\n<p class=\"discover-merge__text\">Design with interactive components coming from your team&#8217;s design system.<\/p>\n<p>            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\"><br \/>\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button><br \/>\n            <\/a>\n        <\/div>\n<div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n<\/p><\/div>\n<\/section>\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}<\/p>\n<p>.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}<\/p>\n<p>.discover-merge__left {\n    width: 50%;\n}<\/p>\n<p>.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}<\/p>\n<p>.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}<\/p>\n<p>.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}<\/p>\n<p>.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}<\/p>\n<p>.discover-merge__button:hover {\n    cursor: pointer;\n}<\/p>\n<p>.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}<\/p>\n<p>@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}<\/p>\n<p>@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }<\/p>\n<p>    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}<\/p>\n<\/style>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\">How Atlassian Design System Was Built<\/h2>\n<p><span style=\"font-weight: 400;\">When Atlassian expanded their focus on design in 2012, J\u00fcrgen Spangl was hired as the new Head of Design. One of the first projects he initiated was creating the <\/span><a href=\"https:\/\/atlassian.design\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><span style=\"font-weight: 400;\">Atlassian Design Guidelines<\/span><\/a><span style=\"font-weight: 400;\"> (ADG) &#8211; their new internal design system. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">At the time, they faced several challenges common to scaling a design practice: <\/span><\/p>\n<ul class=\"wp-block-list\">\n<li><b>Design inconsistency <\/b><span style=\"font-weight: 400;\">&#8211; For example, 45 different types of dropdowns.<\/span><\/li>\n<li><b>Insufficient tooling<\/b><span style=\"font-weight: 400;\"> &#8211; The team needed more powerful design tools to scale their work across multiple products. <\/span><\/li>\n<li><b>Redundant questions<\/b><span style=\"font-weight: 400;\"> &#8211; Atlassian designers wanted to spend more time on core problems and less time answering the same questions (e.g. which button to use). <\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Nathan Curtis once said that &#8220;a design system is a product serving other products&#8221;. Atlassian&#8217;s design system is certainly one of their most ambitious products, created from a need to solve complex problems. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">To explore Atlassian&#8217;s journey from inconsistency to harmony, we spoke with J\u00fcrgen Spangl (Head of Design) and James Bryant (Lead Designer) about the creation, governance, and evolution of their design system.<\/span><\/p>\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/image4-1.png\" alt=\"J\u00fcrgen Spangl, Head of Design at Atlassian.\" class=\"wp-image-15940\" width=\"256\" height=\"256\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/image4-1.png 512w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/image4-1-300x300.png 300w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/image4-1-200x200.png 200w\" sizes=\"auto, (max-width: 256px) 100vw, 256px\" \/><\/figure>\n<p><i><span style=\"font-weight: 400;\">J\u00fcrgen Spangl, Head of Design at Atlassian. <\/span><\/i><\/p>\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/image2-3.png\" alt=\"James Bryant, Lead Designer at Atlassian. \" class=\"wp-image-15941\" width=\"250\" height=\"250\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/image2-3.png 500w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/image2-3-300x300.png 300w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/image2-3-200x200.png 200w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/figure>\n<p><i><span style=\"font-weight: 400;\">James Bryant, Lead Designer at Atlassian. <\/span><\/i><\/p>\n<h2 class=\"wp-block-heading\" id=\"h-creating-and-adopting-the-first-version\"><span style=\"font-weight: 400;\">Creating and Adopting the First Version<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Inspired by Apple&#8217;s Human Interface Guidelines , Atlassian decided their design system needed to be based in code while maintaining ease of use. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">People from multiple teams contributed to the process &#8211; a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">dedicated team<\/a> wasn&#8217;t formed at first so that the design system wouldn&#8217;t be created in isolation. The decision paid off since it resulted in design systems champions embedded across the company. &nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&#8220;Instead of creating <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-design-consistency-best-practices-ui-ux-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">consistency<\/a> for the sake of it, we wanted our design system to create a more harmonious user experience,&#8221; says J\u00fcrgen. &#8220;We wanted to equip everyone to make better <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-decisions\/\" target=\"_blank\" rel=\"noreferrer noopener\">design decisions<\/a> &#8211; not just designers.&#8221; <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The process, of course, was not without challenges. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">&#8220;Early on, we weren&#8217;t sure how to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-documentation-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">document the design system at scale<\/a>. We tried using Confluence, using embedded iFrames in Confluence, a Bitbucket repository,&#8221; says J\u00fcrgen. &#8220;It wasn&#8217;t until a ShipIt hackathon session that one of our designers turned our existing UI toolkit (known as AUI) into a Living Style Guide coupled to the code.&#8221; <\/span><\/p>\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"466\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/image3-2.png\" alt=\"Planning for the first version of ADG in JIRA.\" class=\"wp-image-15939\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/image3-2.png 800w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/image3-2-515x300.png 515w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/image3-2-768x447.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n<p><i><span style=\"font-weight: 400;\">Planning for the first version of ADG in JIRA. <\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">With a technical framework in place, the design systems team also needed to create a unified design language for the overall brand and each product. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">&#8220;It&#8217;s never easy to align multiple teams on a path forward on the design language,&#8221; says J\u00fcrgen. &#8220;Do you create one direction or several smaller directions for each product?&#8221; &nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To define its <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-language\/\" target=\"_blank\" rel=\"noreferrer noopener\">design language<\/a> and create all the patterns and components, the team followed a two-stage process: <\/span><\/p>\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Every month, the team would meet to work on ADG. The fast decisionmaking and momentum helped the team create many new patterns with 70-80% completeness. <\/span><\/li>\n<li><span style=\"font-weight: 400;\">During the following week, the team would then spend small chunks of time refining the patterns and codifying them into ADG. <\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The first iteration of ADG was released in June 2012 to govern its products. To allow for careful iteration, the team used a staged rollout and launched ADG first to Bitbucket, then Confluence and JIRA. <\/span><\/p>\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1844\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/unnamed-1.png\" alt=\"Atlassian Design Guidelines 3.0.\" class=\"wp-image-15955\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/unnamed-1.png 2560w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/unnamed-1-416x300.png 416w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/unnamed-1-768x553.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/unnamed-1-1024x738.png 1024w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n<p><i><span style=\"font-weight: 400;\">Atlassian Design Guidelines 3.0. <\/span><\/i><\/p>\n<h2 class=\"wp-block-heading\" id=\"h-supporting-and-governing-the-design-system\"><span style=\"font-weight: 400;\">Supporting and Governing the Design System<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now 5 years later, <\/span><a href=\"https:\/\/www.atlassian.com\/company\/careers\/design\"><span style=\"font-weight: 400;\">Atlassian Design<\/span><\/a><span style=\"font-weight: 400;\"> has grown to almost 200 people while the design system governs the brand and its 12 products across multiple devices, platforms, and marketing properties.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The company has since built a dedicated ADG team of 18 full-time employees: 5 designers, a writer, a project manager, and 11 developers. To maintain a high level of technical proficiency, an engineering team was embedded into the overall design organization. <\/span><\/p>\n<p><span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15942\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/image5-2.png\" alt=\"Design space in Atlassian Sydney.\" width=\"1000\" height=\"665\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/image5-2.png 1000w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/image5-2-451x300.png 451w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/image5-2-768x511.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><br \/><\/span><i><span style=\"font-weight: 400;\">Design space in Atlassian Sydney. <\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">&#8220;A coding background is a huge benefit for designers who want to join our team,&#8221; James says. &#8220;They also need a strong understanding of prototyping tools and be able to work with developers to ship their work quickly. Finally, they must understand how their work multiplies across different contexts, products, and teams.&#8221; <\/span><\/p>\n<p><span style=\"font-weight: 400;\">When it comes to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/advice-to-new-design-system-managers\/\" target=\"_blank\" rel=\"noreferrer noopener\">contributing to the design system<\/a>, the workflow is a two-way open source model: <\/span><\/p>\n<p><span style=\"font-weight: 400;\">1. The ADG team is regularly exploring changes and consolidations to the design system. Once they&#8217;ve done the initial research, the team converges to discuss specs and requirements. Program managers then work with other product teams to align on the design system changes, roll out the changes, and monitor feedback. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">2. Product teams can also suggest changes to the design system. The process is made much easier since each product has its own ADG representative to collaborate with a member of the design systems team. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Change requests are managed in JIRA and Confluence. Updates are pushed live to <\/span><a href=\"https:\/\/atlaskit.atlassian.com\/\"><span style=\"font-weight: 400;\">AtlasKit<\/span><\/a><span style=\"font-weight: 400;\"> (based in React), which acts as the source of truth for design patterns and code components. The ADG team also maintains a library of UI assets in Sketch for all designers. Meanwhile, the <\/span><a href=\"https:\/\/atlassian.design\/\"><span style=\"font-weight: 400;\">ADG website<\/span><\/a><span style=\"font-weight: 400;\"> describes the logic and guidelines around how to use all the patterns and components <\/span><\/p>\n<h2 class=\"wp-block-heading\" id=\"h-evolving-the-design-system\"><span style=\"font-weight: 400;\">Evolving the Design System<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">&#8220;Every 5-7 years, you probably need to revamp your design language completely because of new trends and technologies,&#8221; says J\u00fcrgen. &#8220;The world is constantly changing.&#8221; <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The team works in 2-week sprints to ship iterations within days or weeks to customers. Larger changes (like revamping a color scheme or set of UI patterns) require more time. <\/span>&nbsp;<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15956\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/unnamed-2.png\" alt=\"JIRA using ADG 3.0, the latest version of the design system\" width=\"2880\" height=\"1704\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/unnamed-2.png 2560w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/unnamed-2-507x300.png 507w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/unnamed-2-768x454.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/09\/unnamed-2-1024x606.png 1024w\" sizes=\"auto, (max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p><i><span style=\"font-weight: 400;\">JIRA using ADG 3.0, the latest version of the design system. <\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">Luckily, as James points out, embedding designers in product teams (and vice versa with developers in design teams) helps build consensus more quickly for changes to the design system.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&#8220;It&#8217;s very hard to scale when you need to talk to all designers for every single change,&#8221; James says. &#8220;We bring all the champions into large <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-design-critique\/\" target=\"_blank\" rel=\"noreferrer noopener\">design critiques<\/a> to understand whether our ideas and proposed changes <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-project-management\/\" target=\"_blank\" rel=\"noreferrer noopener\">affect their current projects<\/a> or down the line. They may learn something from our way of thinking that they can then apply back to their own work.&#8221; <\/span><\/p>\n<p><span style=\"font-weight: 400;\">To measure the success of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/7-great-design-system-management-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">design systems updates<\/a>, the team triangulates data from several sources: <\/span><\/p>\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Opt-in and opt-out in products for changes to the design system<\/span><\/span><\/li>\n<li><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Changes in NPS scores for products after design system updates<\/span><\/span><\/li>\n<li><span style=\"font-weight: 400;\">Qualitative and quantitative feedback from testing iterations with <\/span><a href=\"https:\/\/www.usertesting.com\/\"><span style=\"font-weight: 400;\">UserTesting<\/span><\/a><span style=\"font-weight: 400;\"> and in-person sessions <\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Now in its third version with strong adoption and instrumentation in place, one of the next goals of <\/span><a href=\"https:\/\/atlassian.design\"><span style=\"font-weight: 400;\">ADG<\/span><\/a><span style=\"font-weight: 400;\"> is to make back-end services more consistent.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&#8220;A really good example of that is how we&#8217;re improving &#8216;@mentions&#8217; for users in our products,&#8221; says James. &#8220;Design guidelines and front-end components make the experience feel more coherent, but you can also make back-end processes more consistent in a way that improves performance through solutions like <a href=\"https:\/\/www.dreamfactory.com\" target=\"_blank\" rel=\"noopener noreferrer\">DreamFactory<\/a>, which provides governed API access to backend data sources. Now we&#8217;re exploring how we can improve that level of platform services.&#8221; <\/span><\/p>\n<h2 class=\"wp-block-heading\" id=\"h-attlasian-s-design-system-summary\"><span style=\"font-weight: 400;\">Attlasian&#8217;s Design System Summary<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">When you consider the nature of Atlassian&#8217;s products, the stakes are almost too high to not have a design system in place. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">&#8220;We&#8217;re changing the tools people use to get their work done,&#8221; says James. &#8220;I don&#8217;t think there&#8217;s anything more frustrating or frightening than having changes slow you down since that threatens your efficiency and livelihood.&#8221; &nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A design system is <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference\/\" target=\"_blank\" rel=\"noreferrer noopener\">more than just a style guide or pattern library<\/a> \u2014 it&#8217;s the blueprint for product development. By rooting the design patterns and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-components\/\" target=\"_blank\" rel=\"noreferrer noopener\">code components<\/a> to a common language, ADG gives room to innovate without forcing users out of their comfort zone.  <\/span><\/p>\n<p><span style=\"font-weight: 400;\">&#8220;Some tension between the product and ADG team is perfectly healthy,&#8221; says J\u00fcrgen. &#8220;Product teams don&#8217;t just give in to ADG without good reason, and the ADG team doesn&#8217;t accommodate every change requested. That balance really helps drive us forward in the enterprise space.&#8221;<br \/><\/span><br \/><i><span style=\"font-weight: 400;\">Interested in being a designer at Atlassian? To see available positions, check out <\/span><\/i><a href=\"https:\/\/www.atlassian.com\/company\/careers\/design\"><i><span style=\"font-weight: 400;\">Atlassian Design Careers<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">. <\/span><\/i><\/p>\n<p>Keep your design and development teams in sync with UXPin Merge, all-in-one design technology that helps you design, comment, and hand over your prototypes to development without risking painful back-and-forth. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover UXPin Merge<\/a>.<\/p>\n<div class=\"wp-block-buttons\">\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Discover Merge<\/a><\/center><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>What is Atlassian Design System? Atlassian Design System, ATL for short, is a design system which mission is to create simple, intuitive, and beautiful experiences for their end-users. Atlassian&#8217;s products include Jira, Trello, and Confluence, so their design system needs to work across those products plus serve for people who built internal product and more.<\/p>\n","protected":false},"author":3,"featured_media":48752,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199],"tags":[],"class_list":["post-15934","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems"],"yoast_title":"","yoast_metadesc":"Take a look at Atlassian's design journey with the inception of their design system and the problems and challanges faced along the way.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The Atlassian Design System \u2013 Creating Design Harmony at Scale | UXPin<\/title>\n<meta name=\"description\" content=\"Take a look at Atlassian&#039;s design journey with the inception of their design system and the problems and challanges faced along the way.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/atlassian-design-system-creating-design-harmony-scale\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Atlassian Design System \u2013 Creating Design Harmony at Scale\" \/>\n<meta property=\"og:description\" content=\"Take a look at Atlassian&#039;s design journey with the inception of their design system and the problems and challanges faced along the way.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/atlassian-design-system-creating-design-harmony-scale\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-20T10:33:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-09T01:12:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/atlassian-design-system.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atlassian-design-system-creating-design-harmony-scale\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atlassian-design-system-creating-design-harmony-scale\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"The Atlassian Design System \u2013 Creating Design Harmony at Scale\",\"datePublished\":\"2023-07-20T10:33:17+00:00\",\"dateModified\":\"2026-05-09T01:12:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atlassian-design-system-creating-design-harmony-scale\\\/\"},\"wordCount\":1467,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atlassian-design-system-creating-design-harmony-scale\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/atlassian-design-system.png\",\"articleSection\":[\"Blog\",\"Design Systems\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atlassian-design-system-creating-design-harmony-scale\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atlassian-design-system-creating-design-harmony-scale\\\/\",\"name\":\"The Atlassian Design System \u2013 Creating Design Harmony at Scale | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atlassian-design-system-creating-design-harmony-scale\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atlassian-design-system-creating-design-harmony-scale\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/atlassian-design-system.png\",\"datePublished\":\"2023-07-20T10:33:17+00:00\",\"dateModified\":\"2026-05-09T01:12:19+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Take a look at Atlassian's design journey with the inception of their design system and the problems and challanges faced along the way.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atlassian-design-system-creating-design-harmony-scale\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atlassian-design-system-creating-design-harmony-scale\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atlassian-design-system-creating-design-harmony-scale\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/atlassian-design-system.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/atlassian-design-system.png\",\"width\":1200,\"height\":600,\"caption\":\"atlassian design system\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/atlassian-design-system-creating-design-harmony-scale\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Atlassian Design System \u2013 Creating Design Harmony at Scale\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The Atlassian Design System \u2013 Creating Design Harmony at Scale | UXPin","description":"Take a look at Atlassian's design journey with the inception of their design system and the problems and challanges faced along the way.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/atlassian-design-system-creating-design-harmony-scale\/","og_locale":"en_US","og_type":"article","og_title":"The Atlassian Design System \u2013 Creating Design Harmony at Scale","og_description":"Take a look at Atlassian's design journey with the inception of their design system and the problems and challanges faced along the way.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/atlassian-design-system-creating-design-harmony-scale\/","og_site_name":"Studio by UXPin","article_published_time":"2023-07-20T10:33:17+00:00","article_modified_time":"2026-05-09T01:12:19+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/atlassian-design-system.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/atlassian-design-system-creating-design-harmony-scale\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atlassian-design-system-creating-design-harmony-scale\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"The Atlassian Design System \u2013 Creating Design Harmony at Scale","datePublished":"2023-07-20T10:33:17+00:00","dateModified":"2026-05-09T01:12:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atlassian-design-system-creating-design-harmony-scale\/"},"wordCount":1467,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atlassian-design-system-creating-design-harmony-scale\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/atlassian-design-system.png","articleSection":["Blog","Design Systems"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/atlassian-design-system-creating-design-harmony-scale\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/atlassian-design-system-creating-design-harmony-scale\/","name":"The Atlassian Design System \u2013 Creating Design Harmony at Scale | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atlassian-design-system-creating-design-harmony-scale\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atlassian-design-system-creating-design-harmony-scale\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/atlassian-design-system.png","datePublished":"2023-07-20T10:33:17+00:00","dateModified":"2026-05-09T01:12:19+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Take a look at Atlassian's design journey with the inception of their design system and the problems and challanges faced along the way.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/atlassian-design-system-creating-design-harmony-scale\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/atlassian-design-system-creating-design-harmony-scale\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/atlassian-design-system-creating-design-harmony-scale\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/atlassian-design-system.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/07\/atlassian-design-system.png","width":1200,"height":600,"caption":"atlassian design system"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/atlassian-design-system-creating-design-harmony-scale\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"The Atlassian Design System \u2013 Creating Design Harmony at Scale"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=15934"}],"version-history":[{"count":6,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15934\/revisions"}],"predecessor-version":[{"id":59495,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15934\/revisions\/59495"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/48752"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=15934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=15934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=15934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}