We’ve reorganized this website
We’ve combined logo guidance and downloads.
Follow this guidance to download the right type of logo for your need, and learn how to choose the right color scheme, align the logo, and then add clearance.
Add logos to product user interfaces using the logo component.
Download the right type of logo
Each logo is a combination of elements (a lockup) that may include a logomark, strapline, wordmark, or other text.
There are seven types of logos, used for different contexts.
Each zip file includes variations in approved formats based on the blue and white color palette.
| Logo type | Usage |
|---|---|
| Atlassian logo | Showing the overall company context. |
| Atlassian products strapline | Connecting multiple products or properties to the company brand. |
| Attribution logos | Connecting an individual product or property to our company brand, for example in videos and advertising. |
| Product logos | Referring to a specific product when the Atlassian context is clear. |
| Property logos | Referring to a specific property when the Atlassian context is clear. |
| Logomarks | Referring to a product where the product context is clear, for example in product user interfaces. |
| Contained logomark | Referring to a product when other types of logo are not able to fit. For example, when many logos appear in a grid. They are usually paired with product and product names nearby. |
Atlassian logo and strapline
Our iconic company logo.
The Atlassian wordmark is used in the strapline for attributed product logos.
Download Atlassian (210.49KB)Include Atlassian as alternative text for the logo.
The Atlassian products strapline combines Atlassian logomark, and wordmark as a strapline, with multiple product names under it.
Use the lockup as shown. Always centre the product names under the logo and don’t scale the strapline below 280px wide.
Write Atlassian and the product name in the alternative text for the logo.
Attribution logos
The attribution logos are a type of lockup that combine product or property logomarks with the Atlassian strapline.
They create consistency in our product portfolio, and help customers connect them with our overall Atlassian brand.
Only use attribution logos when the Atlassian context is not clear. For example, in advertisements, videos, and white papers. You don’t need to use them on Atlassian properties like www.atlassian.com or in product user interfaces.
Download Atlas Attribution (54.54KB)Write the name of the product/property and Atlassian in the alternative text for the logo.
Only use these attribution logos - don’t create new ones or deconstruct them.
Product logos
The product logo combines a logomark with the product wordmark.
Use them when the Atlassian context is clear.
If you need to connect the product to Atlassian, use an attribution logo instead. For example, in a video or advertisement.
Write the name of the products in the alternative text for the logo.
Download Atlas (38.23KB)Property logos
The Atlassian program and property logos are a lockup of the Atlassian logomark and wordmark and the name in Charlie Sans.
On a white background, the program name is rendered in neutral with the logo in primary blue. On darker backgrounds, both program and logo are white.
Download Atlassian Access (39.90KB)Write Atlassian and the name of the property as the alternative text for the logo.
Logomarks
A logomark is a symbol or icon shown without the product/property name or brand workmark.
Only use logomarks on their own when the context is very clear, such as in product user interfaces.
Add the logomark using the icon component.
The Atlassian logomark is already included in the Atlassian navigation component.
Write Atlassian or the product/property name in the alternative text for the logomark.
Contained logomarks
The contained logomarks are a combination product or property logomark in a square with a coloued background. They are paired with text nearby that explains the logomark.
Use contained logomarks when:
additional information must be appended to or live closely alongside the logo
many logos are used together in a grid
logos live within an environment where rendering the product name natively in its environment is more legible and user-friendly (such as a product user interface component)
environmental restrictions do not allow for proper clearance guidelines to be followed for full logos
logos live within an external environment that mandates a container (such as external marketplaces, mobile app icons, and so on)
Color choice
Choose between brand blue, neutral, or white based on the environment and context they are being used in.
Shape and size
The contained logomarks are provided as 80×80px squares with no corner radius. Change this to match the context the contained logomarks are used in.
Most Atlassian properties use a 3px corner radius.
This will be different for external sources, such as Apple mobile apps and Google Marketplace.
Make sure you scale the container and logomark together.
Spacing and alignment
In most cases set the space around the container to one third of the width or height of the contained mark.
Middle align with the icon when the copy is less than the height of the container.
Top-align or stack below with center-alignment if it’s taller than the container.
Choose a contrasting color scheme
The logos are available in three color schemes: blue, neutral, and white.
In products, Atlassian product logos work best on surface tokens such as color.surface or bold backgrounds such as color.background.brand.bold.
| Color scheme | Correct use |
|---|---|
| Blue | Showing the overall company context. |
| White | Connecting multiple products or properties to our the company brand. |
| Neutral | Referring to a specific property when the Atlassian context is clear. |
Don’t edit or place logos in ways that reduce the clarity and legibility of the image.
Don’t
Use unapproved color combinations.
Don’t
Use a drop shadow.
Don’t
Use the logo on top of complex backgrounds.
Don’t
Outline the logo.
Align the logo
Full lockup alignment
Bottom-align to the baseline of the text in the logotype for full logos in a horizontal row.
Left-align the left-most ascenders in the logotype for a stacked vertical column.
Logomark-only alignment
Center align logo symbols in horizontal rows.
Add clearance around the logo
Surround logos with clear space free of type, graphics, and other elements that might cause visual clutter.
Don’t resize or place the logo in ways that reduce the clarity and legibility of the image.
Don’t
Crop the logo.
Don’t
Disproportionately scale the logo.
Ideal clearance - Atlassian logo
Minimum clearance - Atlassian logo
Use the capital "A" of the Atlassian wordmark to define the minimum clearance around the logo.
Ideal clearance - product logo
Minimum clearance - product logo
Use the x-height of the logo wordmark to find the minimum clearance around the logo.
