Color

Our color palettes all derive from the Primer library, but are bumped up in saturation for extra vibrancy. All palettes are presented with a Primary, Secondary, Accent 1 and Accent 2 ratio of colors that should be followed to maintain visual cohesiveness throughout all the collaterals.

Content pillars

We have separate color palettes made for five content pillars, to help distinguish them from one another. Below you will find their full palettes, along with pre-approved typography pairings and gradient suggestions for your ease of use.

Security palette

Below are some approved typography color pairings and gradient suggestions for Security. Typically for type, we prefer to work with straight black or white for text layout for legibility purposes as they are ADA compliant (AA).

linear-gradient(
  90deg,
  #096BDE 20%
  #150FFF 40%
  #2FD9D1 60%
  #9EE800 80%
)

linear-gradient(
  90deg,
  #FFF 20%
  #150FFF 56.6%
  #006DE6 89.58%
  #2FD9D1 100%
)

linear-gradient(
  90deg,
  #150FFF 20%
  #006DE6 40%
  #2FD9D1 60%
)

Security visual example

Below is a Security keyart from our library to help demonstrate the color palette in practice, in a more abstract format.

Collaboration palette

Below are some approved typography color pairings and gradient suggestions for Collaboration. Typically for type, we prefer to work with straight black or white for text layout for legibility purposes as they are ADA compliant (AA).

linear-gradient(
  90deg,
  #FF3978 20%
  #FFA8DC 40%
  #9942FF 60%
  #FF461A 80%
)

linear-gradient(
  90deg,
  #FFF 20%
  #FFA8DC 49.79%
  #9942FF 86.1%
)

linear-gradient(
  90deg,
  #FF3978 0%
  #9942FF 40%
  #FFA8DC 90.33%
)

Collaboration visual example

Below is a Collaboration keyart from our library to help demonstrate the color palette in practice, in a more abstract format.

Productivity palette

Below are some approved typography color pairings and gradient suggestions for Productivity. Typically for type, we prefer to work with straight black or white for text layout for legibility purposes as they are ADA compliant (AA).

linear-gradient(
  90deg,
  #00A742 20%
  #00FF18 40%
  #7E72FF 60%
  #F8E044 80%
)

linear-gradient(
  90deg,
  #000 20%
  #7E72FF 56.6%
  #00FF18 89.58%
)

linear-gradient(
  90deg,
  #00FF18 20%
  #7E72FF 77.76%
)

Productivity visual example

Below is a Productivity keyart from our library to help demonstrate the color palette in practice, in a more abstract format.

AI palette

Below are some approved typography color pairings and gradient suggestions for AI. Typically for type, we prefer to work with straight black or white for text layout for legibility purposes as they are ADA compliant (AA).

linear-gradient(
  90deg,
  #8A4DE7 20%
  #150FFF 40%
  #006DE6 60%
  #00FF18 80%
)

linear-gradient(
  90deg,
  #000 20%
  #150FFF 56.6%
  #9942FF 100%
)

linear-gradient(
  90deg,
  #000AFF 20%
  #006DE6 40%
  #9942FF 66.91%
)

AI visual example

Below is an AI keyart from our library to help demonstrate the color palette in practice, in a more abstract format.

Enterprise palette

Below are some approved typography color pairings and gradient suggestions for AI. Typically for type, we prefer to work with straight black or white for text layout for legibility purposes as they are ADA compliant (AA).

linear-gradient(
  90deg,
  #000AFF 20%
  #6900FF 40%
  #9942FF 60%
  #F8E044 80%
)

linear-gradient(
  90deg,
  #000 20%
  #6900FF 56.6%
  #9942FF 89.58%
  #9942FF 100%
)

linear-gradient(
  90deg,
  #000AFF 20%
  #6900FF 40%
  #9942FF 60%
)

Enterprise visual example

Below is an Enterprise keyart from our library to help demonstrate the color palette in practice, in a more abstract format.