Logos
A logo is a visual representation of a brand or app (product). It can be a word or an image, or a combination of both.
Download logos
This page includes downloadable logo files for use in marketing contexts as well as specific usage guidance for app or marketing contexts.
If you want to add logos to app (product) experiences, use the logo component.
Download the logos
Each downloadable file includes variations of color and layout in approved formats and the below elements combined together:
- logomarks – the icon portion of a logo
- wordmarks – the name of the app (product) or property
- straplines or other secondary text.
Assets for isolated logomarks are also included.
Our iconic Atlassian logo
Our iconic company logo.
Include Atlassian as the alt-text for the logo in digital experiences.
Atlassian app strapline
The Atlassian logomark and wordmark can be coupled with a list of app (product) names under it. Follow the below guidance when using logos that contain straplines:
- Always centre the app names under the logo and don’t scale the logo below 280px wide.
- Write Atlassian and the app name in the alt-text in digital experiences.
Attribution logos
The attribution logos are a type of lockup that combine app (product) or property logomarks with the Atlassian strapline.
They create consistency in our portfolio, and help customers connect them with our overall Atlassian brand. Follow the below guidance when using attribution logos:
- 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 app (product) user interfaces.
- Never compose your own attribution logos or deconstruct the official assets.
- Write the name of the app (product)/property and Atlassian in the alt-text for in digital experiences.
Property logos
The Atlassian program and property logos are a lockup of the Atlassian logomark and wordmark and the name in Charlie Sans. Follow the below guidance when using property logos:
- 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.
- Write
Atlassianand the name of the property as the alt-text in digital experiences.
App (product) logos
With the Atlassian System of Work and collections framework our primary products, secondary products and plaftform features are now referred to as apps.
We’ve updated our logos to reflect this change, using marks that symbolize functionality, contained in a tile. An app’s glyph is chosen based on the apps functionality; its tile color refers to its collection.
The logomarks are contained by a tile shape, colored with their associated collection. Follow the below guidance when using App (product) logos:
- Use when the Atlassian context is clear.
- If you need to connect the app to Atlassian, use an attribution logo instead. For example, in a video or advertisement.
- Write the name of the apps in the alt-text in digital experiences.
Assets include both isolated logomarks and lockups with wordmarks.
Logomarks
A logomark is a symbol or icon shown without the app (product)/property name or brand workmark. For an app (product), this refers to the tile. Follow the below guidance when using logomarks:
- If you’re including the logomark in product experiences, use the icon variant of the logo component.
- Only use logomarks on their own when the context is very clear and where possible pair with descriptive text.
- Write
Atlassianor the app/property name in the alt-text in digital experiences.
Logomarks are paired with native text in top navigations.
Logomarks are suitable when rendering the app name natively in its environment is more legible and user-friendly.
Logomarks can be used when environmental restrictions do not allow for proper clearance guidelines to be followed for full logos.
Logomark shape and size
The logo component comes in specific sizes and the logomark has a pre-defined radius. These should not be altered.
The exception to this is when appearing on external sources such as Apple mobile apps and Google Marketplace where specific container shapes need to be used.
Logomarks should never be nested inside additional containers.
Do
Use the default radius values that are applied to the backgrounds of app logo icons.
Don’t
Don’t adjust the radius values of the backgrounds of product logo icons.
Do
Allow breathing room around product logo icons.
Don’t
Don’t add unnecessary containers around app logo icons.
Aligning logos
Align logomarks with other elements
- Middle align with the logo mark 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.
Aligning app (product) logos
Where app (product) logos are arranged in a vertical or horizontal list, use the height or weight of the logomark portion to align.
Logo clearance
When displaying logos outside of an app UI, surround them with clear space free of type, graphics, and other elements that might cause visual clutter.
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 — app (product) logo
Minimum clearance — app (product) logo
Use the height and width of the logo wordmark to find the minimum clearance around the logo.
Color options
Logos are available in three color options to suit different colored environments – Brand, inverse and neutral.
Don’t edit or place logos in ways that reduce the clarity and legibility of the image.
Don’t
Don’t use unapproved color combinations.
Don’t
Don’t use a drop shadow.
Don’t
Don’t use the logo on top of complex backgrounds.
Don’t
Don’t outline the logo.