Colors

Where appropriate, we enable people to introduce their own color palettes. Our products adapt intelligently and flexibly to cater for the user's preference. We are also committed to complying with AA standard contrast ratios . To accomplish this, you should choose primary, secondary and extended colors that ensure sufficient color contrast between elements. This allows users with low vision to see and use the interface.

Primary color palette

Our primary palette is comprised of neutrals, white, and blue. These colors are present across most visual elements all the way from marketing to product. If you'd like to use these colors you can download our palette here.

We use N800 primarily for body text and headings. B400, otherwise known as "Pacific Bridge" is used for primary actions and buttons, links, global navigation, indicates progress, and represents authentication. N0 is used for page backgrounds and things that are white.

Secondary color palette

Our secondary palette is made up of red, yellow, green, and purple. These colors are not used equally - see the Color System below for more information.

We use R300 primarily to indicate errors and to indicate destructive actions. Y300 indicates warnings and blocked progress and can be found in lozenges and banners. Use N800 for any text placed on top of Y300. G300 is used to represent success in flags and inline messages, while P300 is used to indicate help, information, and Prince songs.

Neutrals

Muted and neutral palettes are derived from purple. Their varying degrees of saturation allow for the appropriate level of warmth across marketing and product.

Neutral alphas

We use N900 as a basis for the RGB values to avoid shadows from desaturating other colors that appear beneath transparent neutral colors and is a number between 0.0 (fully transparent) and 1.0 (fully opaque). The alpha palette can be used for shadows to represent layering, 'blankets' that cover the UI when a model is active, and elements that darken the background they are placed on such as buttons and badges. Try to avoid using the alpha palette for text colors and make sure that you account for varying text and background combinations when using the alpha palette as a background for text.

A good example of this would be tags sitting in a text field. Both tags and text fields have a grey background as their default state, and to contrast the pair we added an alpha color to the tags to bring the depth that was needed for them to coincide with each other.

Extended Palette

The extended palette consists of all the useable tints and shades of each color in the palette. They are all helpfully named and numbered for easy reference. Usage of these colors varies depending on the element, but they come in handy for illustrations and components in product.

Red

Red is mainly used for backgrounds in messages and in error states.

Rosie #FFEBE5 - Remembering Rosie. To honor Rosie we have named a color in our product palette after her. Like Rosie and her legacy, Rosie will be woven throughout Atlassian products and design for many years to come. Like its namesake it will leave that corner of the world which it has touched just a little bit brighter by its beauty and grace.

Alexandria #FF8F73 - Alexandria has made a huge impact at Atlassian, so we've named a color of her choice after her. As Alex does, this color brings a moment of lightness, promise, strength, and happiness wherever it is found.

Yellow

Yellow indicates warning or impeded progress.

Green

Normally used to Indicate success, or to celebrate a win. You can see green use lozenges, badges, toggles, and messages.

Teal

Mobile - Accent colors for text fields and cursors, text selection, progress bars, selection controls, buttons, sliders, and links.

Normally used in illustrations and as an accent color.

Blue

Blue is used to indicate authentication, connectivity, and progress. You can find blue in the following components and patterns: messages, buttons, navigation, lozenges, badges, tabs, and the date picker.

Purple

Indicates help and support. And is used in messages, lozenges and image callouts.

Color System

The following guidelines outline when to use colors in product. We've developed a color system that helps users find people, identify status, see actions, to locate help, and to indicate next steps. The consistent use of color keeps cognitive loads low and makes for a unified and engaging user experience.