Colors

The color palette is a cornerstone of the ADG, giving our products an immediate sense of belonging to a family, enabling them to be harmonious, one of our five design principles. The color palette leverages Atlassian's brand heritage, and builds on its sense of strength, intelligence and confidence. It adds warmth and a human touch.

Where appropriate, we enable users to introduce their own color palettes. Our products adapt intelligently and flexibly to cater for the user's preference.

Atlassian is committed to complying with AA standard contrast ratios for all text that is not "incidental". The color combinations in this guide comply with the AA standard. Make sure you don't rely on color alone to convey state or meaning.

Primary palette

The primary palette includes colors used in the main interface chrome, interaction elements and states. Don't use any shades, tints and other derivatives of these colors.

Secondary palette

The secondary palette includes colors used in content areas and some interaction elements and states, as well as highlight colors used for communicators like icons and status lozenges. You can use derivatives of these colors where appropriate. See further below for guidance on derivative colors.

Derivative colors

Color variations are derived from the secondary palette, for example, when solid background colors are required. You can create derivatives by lowering the saturation, brightness or alpha values of the secondary color palette.

Name Color HEX value Main usage
Pale blue derivative
#ccd9ea
  • The border of selected items that use the pale blue background color #ebf2f9
Bright blue derivative
#1a8cff
  • Lines and dots in charts and layout tools
Dark brown
#594300

Subtle hovers

When there is the need for a more subtle hover treatment than the main treatment in dropdown menus #3572b0, the secondary ("subtle") hover can be used. This uses rgba (0,0,0,0.11) color to achieve a mostly transparent background color that is visually identical to light gray #f5f5f5 when used on a white background.

This subtle hover can be used on tabs, table rows, vertical navigation and horizontal navigation. Use the fallback of light gray #f5f5f5 for browsers that don't support RGBA color.