Hi partners, we’re excited to share that we’ve started to refresh key UI foundations in our products, which are all powered by the Atlassian Design System.
Introduction
Why are we doing this?
- Atlassian debuted its brand refresh and visual brand system at Team ’24 this year. This strategic refresh was focused on strengthening our connection with our customers and representing the unique, diverse way we all come together to enable teamwork.
- We’re evolving and modernizing the look and feel of our products to make them more visually appealing.
- We’re raising the bar and keeping aspects like performance, accessibility, and scalability at the core of the visual refresh rollout.
The key benefits of our visual refresh updates are:
- Visual appeal — One of the biggest drivers is to address customer feedback on the lack of visual appeal and make our products feel clearer, modern, and more effective to use.
- Usability — Modernized icons provide clearer navigation and way finding signals as well as ensuring all type choices meet our accessibility goals.
- Productivity/velocity — Refreshed infrastructure, tooling, and documentation for iconography and typography will be released to support the adoption and usage of the new releases. This will help you ship value to customers more quickly.
- Alignment between marketing and product — We’re bringing the marketing and product UI languages closer together through shared brand colors.
- Familiarity — The visual refresh will roll out across more products and core experiences so that navigating from one Atlassian product to the next feels coherent, enabling better focus on the task at hand.
In this post, we’ll share what’s coming soon, how this will impact UI in our products, what you can expect, and timelines.
What’s coming soon
Iconography
Icons play a powerful role in defining UI experiences, and it’s no different for Atlassian UI. The new icons will be more consistent in weight and style, optically balanced with the rest of the UI, and more clear when it comes to representing different concepts.
Here are some improvements you can expect:
- Refreshed look — New icons feature a modernized style with lighter stroke weights and straight end caps.
- Dedicated icon sizes — Icons should no longer be scaled to different sizes. Instead, each icon will have a single size, 16px, that can be customized with padding. A limited set of 12px icons are also available for use alongside small text, and for use cases that require chevrons.
- Fewer duplicate icons — Duplicate or similar icons have been consolidated into a smaller, more consistent set that better represents the UX it’s designed for.
- Easier to pick the right icon — Picking the right icon is easier with icon categories, each with clear usage guidance included in its metadata and documentation:
- Single-purpose icons are reserved for a dedicated meaning or association (e.g. Edit).
- Multi-purpose icons can be used in a variety of contexts (e.g. Camera).
Typography
Good typography enhances communication and makes UI easier to read and scan. With this update, we aim to make our typography system easier and more intuitive to apply, scalable with our changing needs and infrastructure, and to enable comfortable reading experiences for Atlassian’s diverse customers.
Here are some improvements you can expect:
- A cohesive scale — We now apply a cohesive scale of font sizes and line heights for all headings and body text. This allows for a more harmonious experience as all styles are created to work with each other. It also allows us to easily cater to further sizes, if needed.
- Improved visual hierarchy — Bolder headings provide greater contrast and improved visual hierarchy within our UI. This will make it easier to scan information-dense screens.
- Improved accessibility and readability — We have increased our smallest heading and body sizes from 11px to 12px and removed ALL CAPS heading styles in order to enhance accessibility and readability.
- Better naming — We have implemented a much simpler and clearer naming convention that reflects the new scale and makes our styles and design tokens easier to use.
Colors
We’re iterating on the color system to fold in updates from our brand color palette, which will be updated through existing color design tokens. If you’ve already adopted color design tokens, there’s no additional work needed from you to receive these changes — you’ll get these for free! We still recommend a review just to make sure the changes have applied properly.
Here are some improvements you can expect:
- More aligned with the visual brand refresh — Colors have been updated to better reflect the visual brand refresh.
- Refreshed orange colors — These feature more yellow lighter shades to align closer to the brand refresh colors.
- Refreshed purple colors — These feature a warmer purple shade and will impact discovery style experiences such as spotlight.
- Refreshed neutral colors — These feature fewer blue tints in neutral color tokens such as
color.text,color.background.neutral, and surfaces in dark mode.
How this comes together in UI
The screens below highlight the refreshed UI being applied to Jira and Atlassian Home. The screens include all of the iconography, typography and color changes listed above and reflect a clearer and more modern visual improvement.
They also show our work in parallel on a new, modern navigation system designed for consistency, flexibility, and efficiency. Read more about The new navigation: Coming to you in 2025.
What to expect for your apps
We’re excited to share this with you as Marketplace partners! We want to ensure that the adoption experience is easy for all developers and designers who rely on it to build great apps in our Marketplace and ecosystem.
We highly recommend that you also adopt the new visual style so your apps provide a consistent experience for our mutual customers. We’re currently preparing the above changes for you to adopt, and will share more details about how to get started once they are ready.
As an overview:
- For color, you will get the improvements automatically if you are already using design tokens.
- For iconography, this will require migrating from the previous icons to our new icons if you use them in your app. We also recommend redrawing any custom icons to align with the new visual style.
- For typography, start using the new design tokens and primitives to benefit from the improvements.
In the coming months, we’ll be providing resources to support you — for both Forge and Connect apps:
- Detailed migration guides (including recommended mappings from previous and new icons)
- Tooling to assist in automating migrations
- Updated Figma community libraries
In the meantime, the best way to get ready is to adopt the Atlassian Design System as much as possible. The easiest way to do this is to use Forge UI Kit, where many changes will come for free.
For Forge Custom UI and Connect apps, you will also benefit from many of these changes with little effort when you use the latest design tokens, primitives, and components from the Atlassian Design System — and continue to benefit from future iterations. Check out the Atlassian Design System documentation for our current offerings (this is where we will publish new guides once ready).
Timelines
From October 2024, the refreshed UI will start to roll out to Atlassian customers via Early Access Program releases for Atlassian Home and Jira. Over the next six months, the scope of products will expand to include Jira Service Management, Jira Product Discovery and Confluence, with all products listed here enabling the refreshed UI as a General Availability release in March 2025.
This timeline allows Marketplace partners time to understand the changes, update and test apps where needed to align with the refreshed UI of Atlassian products, similar to the launch of dark mode (thanks again, partners!). We’ll be sharing separate posts with details, starting with an RFC in the next month outlining planned iconography changes.
If you have any questions please reply and ask us here. Let me introduce a few of my teammates who you will also be hearing from:
- @JocelynWong — our lead designer on this project
- @acampbell3, @GorkemK and @AkshaySaini — our engineers leading iconography, typography and Forge/Connect integration efforts
Cheers,
Stephen
Engineering Manager
Atlassian Design System
