In everything we do, we aim to bring focus and clarity to teams without distracting, so our logos and symbols are direct, clear, and impactful. To accomplish this, we adhere to the guidelines below.
Download our logos from the logo library.
The Atlassian logo is available in three color schemes: blue, neutral, and white. The blue version works best on a white or light background. The white version should be used on dark backgrounds. The neutral version can be used when the hierarchy calls for the logo to recede, but should always be evaluated for adequate contrast.
Each of our product logos are also available in three color schemes: blue, neutral, and white. The blue version works best on a white or light background. The white version should be used on dark backgrounds. The neutral version can be used when the hierarchy calls for the logo to recede, but should always be evaluated for adequate contrast.
To ensure that logos are clearly visible, surround them with clear space that is free of type, graphics, and other elements that might cause visual clutter.
Use the capital "A" of the Atlassian wordmark to define the minimum clearance around the logo.
Use the x-height of the logo wordmark to determine minimum clearance around the logo.
When using full logos in a horizontal row, bottom-align to the baseline of the text in the logotype. In a stacked vertical column, left-align the left-most ascenders in the logotype.
In a horizontal row, center align logo symbols.
To maintain the integrity of the Atlassian logo and to promote the consistency of the brand, please do not misuse it. Some logo crimes are listed below.
Use unapproved color combinations.
Use a drop shadow.
Use the logo on top of complex backgrounds.
Crop the logo.
Outline the logo.
Disproportionately scale the logo.
The way we talk about our products will continually grow in complexity (deployments, plans, etc.), so we want to ensure that the credibility and simplicity of the products’ logos are consistent across every use case, now and in future. Contained product logo icons offer more flexibility than full logos because they are removed from the wordmark and allow accompanying information to live alongside the logomark in a way that keeps the information visually separate from the logo.
Contained logomarks should be used in the follow scenarios:
when additional information must be appended to or live closely alongside the logo
when many logos are used together in a grid
when logos live within an environment where rendering the product name natively in its environment is more legible and user friendly (such as a product UI component)
when environmental restrictions do not allow for proper clearance guidelines to be followed for full logos
when logos live within an external environment that mandates a container (such as external marketplaces, mobile app icons, and so on)
Contained logomarks are available in three colors:
blue on N20 background (standard)
neutral on N20 background
white on B400 background
How to choose color
Our standard color is blue on N20 background, which is reflected across most Atlassian-owned properties. However, these colors do not hold any semantic meaning across Atlassian properties. The color used should be determined by the environment the logos live in and the intent that the designer has for them.
Contained logomarks are intentionally available in a square format with no corner radius so that they can be adapted to any environment’s requirements. The size of the contained logomark is flexible but it's critical that the mark and the container are scaled proportionally to one another.
How to choose shape and size
Our standard shape and size is 80×80px with 3px corner radius across most Atlassian-owned properties. However, shape and size should be determined by the environment the logos live in. For instance, Apple mobile apps will require a different corner radius than the Google Marketplace.
Generally, you may use one third of the width or height of the contained mark to determine the appropriate amount of space around the container. Information can be aligned to any edge of the container.
Information may be middle aligned with the icon when the copy does not exceed the height of the container. When the information is longer than the height of the container, it may be top-aligned or stacked below and center-aligned.
A lockup is a combination of multiple logo components or a logo combined with text in order to signify a relationship or create additional context. Lockups should be used as a single asset and abide by all standard logo rules.
Attribution lockups allow us to unify our product brands with the Atlassian wordmark and ensure that customers connect the dots between Atlassian and our land products (Confluence, Compass, Trello, Jira, and all Jira family products). Only use existing attribution lockups provided here and do not deconstruct them or create new ones.
Attribution lockups should be used for when Atlassian context is not readily set by the environment, like on advertisements or other top of funnel touch points like videos and white papers. Attribution lockups are not necessary on Atlassian-owned properties like www.atlassian.com or in the product user interface.
Use the Atlassian product strapline when you need to include multiple product names (specifically, Jira, Confluence, and Bitbucket) with the Atlassian logo. Always use centered versions of the product names under the logo, but do not alter it in any way. For best results, the logo strapline should never be scaled below 280px wide.
Atlassian programs and properties use a logo and a Charlie Sans lockup. On a white background, the program name is rendered in neutral (N800) with the logo in primary blue (B400). On darker backgrounds, both program and logo are white.
Was this page helpful?
We use this feedback to improve our documentation.