# Colors

Our color palette is varied and offers many accent colors to use when producing content for our brand. A white or light-colored background is favored, with small splashes of color in the form of type accentuation, images, or small elements that display our brand tones.

A dark background can also be used, but the white type and accenting elements are best for contrast.

### Primary

Red is a primary color along with blue, and both should be prioritized in their usage above secondary and supporting colors. Red is the color of our logo and plays a significant role in our branding. Blue was also adopted as a primary color for its positive connotations in the tech space. These colors should only be used on white or corresponding light backgrounds (see supporting colors section). Transparency on these colors may be altered if used on elements but not on backgrounds and typography. The typography that sits atop these colors should be white.

![](https://2853711081-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhHYdqf09DtGwAq3Pa3FU%2Fuploads%2Fgit-blob-854ee49503305a267e0530ccce2af33d84345a01%2Fimage%20\(304\).png?alt=media)

Their respective color codes are:

* Red: <mark style="color:red;">`#F5455C`</mark>
* Blue: <mark style="color:blue;">`#1D74F5`</mark>

### Secondary

The following first two colors serve as taste breakers from the usual red and blue and can be used in iconography, illustrations, typography, and other assets to bring variety to our visual identity. These can also be used to highlight certain keywords in a title or subtitle but shouldn’t be used as the background color. Our black and white shades also bring versatility to our brand image, offering more possibilities for typographical styling and backgrounds.

![](https://2853711081-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhHYdqf09DtGwAq3Pa3FU%2Fuploads%2Fgit-blob-244f44e1f883f6d66ecd08b9d6f6e09def8bf5ec%2Fimage%20\(556\).png?alt=media)

Their respective color codes are:

* Dark Purple: `#9F22C7`
* Light Purple: `#CA71E7`
* Light Green: `#2DEDA5`
* Dark Green: `#148660`
* White: `#F7F8FA`
* Black: `#2F343D`

### Supporting Colors

These lighter shades of our brand colors serve as options for backgrounds, iconography, and other elements such as images and illustrations. These lighter shades of our brand colors serve as options for backgrounds, iconography, and other elements such as images and illustrations.

![](https://2853711081-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhHYdqf09DtGwAq3Pa3FU%2Fuploads%2Fgit-blob-d75d8d8c2d89167319c044508b0583b9e3d97a0f%2Fimage%20\(66\).png?alt=media)

Their respective color codes are:

* Red for backgrounds: `#FEECEF`
* Blue for backgrounds: `#E8F1FE`
* Purple for backgrounds: `#F5E9F9`
* Green for backgrounds: `#EAFCF6`

### Highlight Shades

These gradients are a gradient version of the supporting colors and should only be used as the fill for the highlighting shape, as exemplified on our homepage, behind the second sentence in the subtitle.

![](https://2853711081-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhHYdqf09DtGwAq3Pa3FU%2Fuploads%2Fgit-blob-b2f7891bb9b79c34e03cc579592dd8cac3743f89%2Fimage%20\(2\)%20\(1\)%20\(1\).png?alt=media)

![Their respective color codes are:](https://2853711081-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhHYdqf09DtGwAq3Pa3FU%2Fuploads%2Fgit-blob-f501a0bd4189f757011ad2bb4afb7d4db84b55ca%2Fimage%20\(1143\).png?alt=media)

* Light red highlight: `#FEECEF` to`#FFFFFF`
* Light blue highlight: `#E8F1FE` to`#FFFFFF`
* Light purple highlight: `#F5E9F9` to`#FFFFFF`
* Light green highlight: `#EAFCF6` to`#FFFFFF`
