Confluence is getting a visual refresh

[#1]

Hello community,

The Confluence team is excited to announce that we have started to roll out a visual refresh of the Confluence UI! 🖌️ With this refresh, powered by the Atlassian Design System, we’re bringing a new look and feel to Confluence through updated icons, typography, components, and colors. Our goal is to make Confluence clearer, more modern, and more effective to use. While Confluence is the first to get this refresh, it will soon roll out to some other Atlassian products. Read on for all the details!

Why we're doing this 

At Team 24, Atlassian debuted its brand refresh and visual brand system. We’re now starting to bring this update to our products, starting with Confluence. This visual refresh introduces several key benefits:

• Cross-product cohesion — The visual refresh will roll out across several Atlassian products so that navigating from one product to the next feels coherent and becomes easier than ever before.

• More productivity — Through a clear and consistent visual language we’re reducing visual noise and making it easier for users to focus on the task at hand.

• More visual appeal — One of our goals was to create a brand experience that feels human and tangible, despite being digital, to make our products more modern, relatable, and engaging for users.

• Increased usability — Our modernized icons provide clearer navigation and our type choices and colors provide better accessibility.

What’s changing

The visual refresh updates four visual elements: Iconography, typography, components and colors.

Iconography

Our new icons are consistent in weight and style and optically balanced with the rest of the UI. They feature a modernized style with lighter stroke weights and straight end caps. We have also consolidated duplicate or similar icons into a smaller set to better represent different concepts.

Typography

Our typography update is aimed at ensuring comfortable reading experiences for our diverse customers. We’ve applied a cohesive scale of font sizes and line heights for all headings and body text. Bolder headings provide greater contrast, making it easier to scan information-dense screens. We also increased our smallest heading and body sizes from 11px to 12px and removed ALL CAPS heading styles for better accessibility and readability.

Components

We’ve modernized some of our components such as buttons, lozenges, avatars, badges, tabs, and tags. These updates aim to provide a consistent and cohesive visual standard across different products.

Colors

We’ve updated a few colors within our product to match our refreshed brand color palette.

• Orange — Warmer orange tones, particularly in the lighter shades

• Yellow - Cooled down tones in the lighter shades to improve differentiation between yellow and orange

• Purple — A warmer purple shade

• Blue - Dialed down saturdation

• Neutrals — Dialed down cool tones to be more neutral

Bringing it all together

Here’s how the visual refresh of iconography, typography, components, and color comes together into a clearer and more modern UI. In parallel to the visual refresh, we’ve been working on a new, modern navigation system, as shown in the image on the right. The new navigation is designed for consistency, flexibility, and efficiency and is currently available for early access. Read more about the new navigation.

Before:

---

After:

When will I see the visual refresh?

We’ve begun rolling out the visual refresh across the majority of Confluence experiences. However, there are still a few areas within Confluence that have not yet gotten the update. These areas will be refreshed over the next few weeks. If you don’t see the visual refresh yet, no need to worry. There is nothing you need to do to enable the update and you should automatically see it in a few weeks.

Thank you for being a part of our community. We encourage you to explore the new design and share your feedback with us!

[Kristian Klima]

Hello!

I like the new UI look and feel, it feels sharper - the old one felt blurry especially on retina (high DPI) screens.

Having said that... Currently, I still see the 'old school' heading formats.

H2 heading is represented as <h2> in HTML.

After switching to XL etc..., will the HTML remain unchanged? 

I'm wondering if this would impact 'theme' apps and other quality of life apps that modify the look and feel (and add functionality), such as numbered headings.

[Maurice Pasman]

Awesome, huge improvement!

[Aron Gombas _Midori_]

I welcome this change, too. Great work!

[Corinne Guibert]

unfortunately, this broke the display in the Jira Issues connector: I don't have any more the full color background status, which makes it harder to see at glace the status of the issue

[Martin James]

Could we revisit how the search bar is displayed in page view mode? From your screenshot, it stretches across the header and pushes the menu into the sidebar, making the main content less accessible. As the sidebar is already quite full, moving more elements there may cause frustration for users and customers. The current version, which expanded the search bar over the header menu when clicked, seemed way more efficient and did not affect the existing layout. It would be helpful to understand why Atlassian plan to move away from a method that worked well for most people.

Another concern is that placing the site menu in the sidebar puts the Space Title and Logo out of place. People are going to confuse the 'Home' link with their space home page. If we receive complaints on this, I’ll have to direct users to Atlassian for clarification.

Thought I'd update this comment to balance out my feedback. The new icons for the page in view and edit mode look a lot more stick and clean. Great job.

[Ville Halmes]

Removing the background color from JIRA Issue statuses is a very poor UX. This unfortunately downgrades the visualization of Confluence pages to Azure Devops level (at least how it was couple of years ago, haven´t used that in a while.

Small change but now instead of browsing you need to read every ticket status separately because one can´t differentiate between Done/In Progress/To Do. Please at least increase the status border width with color and/or add color to the border of the whole issue.

[Barbara Szczesniak]

I can see the new icons and different look/colors for status macros. I use a blue light filter, so I don't see the colors as they are, so I don't really notice a difference there. 

As far as the typography, though, I never had all of those styles before, and I don't have all of the new styles listed now. Are those intended to be some combination of what is listed in the text styles menu combined with the more formatting options? Or is this something to do with responsive HTML?

[Andy Gladstone]

I have noticed this change in our instance and so far I am impressed by the softer tones and curves in the fonts and icons. 

[Kristine Murphy]

Any chance of these changes coming to Data Center, or is this just an upgrade for Cloud?

[Cortlandt _]

What "visual refresh" changes are available to customers with Standard licenses?

I've seen changes in the Confluence editors UI but no sign of many of the features shown here.

Colors for example :  I've seen zero changes on the colors available in the colored panels (Info, Warning, etc)
(A choice of lighter shades of colors is highly desired)

[Alexandra Luca]

It might just be me, but the new style actually feels less approachable and refreshing. The old icons had more personality. The old colors popped more and they were easier to see. The sharper angles of rounding the corners of rectangles + replacing ellipses/circles with rounded rectangles gives off a feeling of being contained. It takes away some of my creativity and enjoyment while working.

Additionally, I agree to what other fellow users mentioned above: the colored status of Jira issues in confluence need to pop like they used to. Otherwise it slows down work.

It's not my intention to be negative, and I know my feedback will not change much. Still, I'm hoping these things would be considered too in the future.

[Marine Redon]

Is there any way to use the new labels with a coloured background rather than the ones with the coloured outline? It really decreases visibility of issue status now.

[Anders Jorgensen]

Thanks for the update. Great improvements to the fonts.

I also think the previous Jira status labels were easier to spot due to their filled background.

When I first saw the new Confluence status labels in the UI, I though my browser wasn't loading the CSS correctly, since they were missing the soft rounded corners.

So for those two items, the previous version was preferable.

Other than that, great job!

[Charlie Misonne]

Some feedback about the colors: I think the new yellow and green are too similar.

I have some color vision deficiency and those colors are just too similar. A bigger contract between them would help.

whocanuse.com confirms my concern and when reading the comments here I do not seem to be the only one.
I hope this can be improved in a next phase!

[Dana Bar Lavie Jones]

This is not updated in our instance, what do we need to do to get our instance updated with this rollout? 

[Administrator]

With regards to the navigation bar changes - 

This reminds me of what happened in 2018 when Atlassian changed the ‘top’ navigation bar to a ‘side’ navigation bar. The experience was so bad that *after* they rolled it out, they ran focus groups where 95% of users said they preferred the ‘top’ to the ‘side’. Then in 2020 the ‘top’ was brought back as an ‘improvement’ (“we have heard your feedback”) and because it was a “better navigation system”.

Fast forward to today, and the reasons for changing the ‘top’ back to the ‘side’ are the same as when the ‘side’ was changed back to the ‘top’ – “it will make it faster to navigate and easier to find work”.

*The same problems that users reported in 2018 are highlighted on this page as improvements.*

Saying that something is “new and modern” doesn’t beat something that has already proven to be “better”. What would have been better is to allow customisation on the ‘top’ rather than move some of the ‘top’ to the ‘side’ and end up with three navigation bars compared to two. Also, I can’t see where the page settings are so possibly there are now four navigation bars.