Color
This page includes color swatches for our brand colors. The colors are denoted with a p for primary, and s for secondary. Default to the following applications when using primary and secondary colors:
- Backgrounds can use gradients or select solid colors: white, Charcoal, or purple
- Graphical elements should default to colors in the primary palette; the colors in the secondary palette can be used as additional accents.
- Headlines and body copy should use white or charcoal.
- Calls to action (CTAs) and buttons should use white or charcoal.
- Colors other than white or Charcoal should not be applied in sentences or large bodies of copy.
- Hyperlinks commonly use Purple 01p on dark backgrounds or Purple 02p on light backgrounds.
- Other text, such as small titles or data points, can have color applied sparingly and with discretion for accessibility with a contrast minimum of 1.4.3 (Level AA) according to WCAG 2.1.
Primary colors
The primary palette features colors from our core logo and signature purple. These colors are most frequently used and associated with our brand.
Primary color palette
| Swatch | HEX | RGB | CMYK | PMS |
|---|---|---|---|---|
White | #FFFFFF | 255, 255, 255 | 0, 0, 0, 0 | White |
Charcoal | #171321 | 23, 19, 33 | 90, 68, 41, 90 | 433 C / 4280 U |
Orange 01p | #FCA326 | 252, 161, 33 | 0, 40, 80, 5 | 143 C / 1365 U |
Orange 02p | #FC6D26 | 252, 109, 38 | 0, 60, 80, 5 | 716 C / 144 U |
Orange 03p | #E24329 | 226, 67, 41 | 0, 75, 80, 10 | 7417 C / 1665 U |
Purple 01p | #A989F5 | 169, 137, 245 | 53, 55, 0, 0 | 2655 C / 2645 CU |
Purple 02p | #7759C2 | 119, 89, 194 | 64, 70, 0, 0 | 2665 C / 2593 U |
Secondary colors
The secondary palette expands upon our oranges and purples to provide more color varieties. These additional hues can be used to highlight various elements and add visual depth where needed. Adhere to the guidelines below regarding the colors in this palette:
- The teals carry a positive connotation, especially when used to reference product features.
- The pink is reserved exclusively for gradients.
- The cool grays offer neutral color options to be used for differentiating information and/or establishing hierarchy.
Secondary color palette
| Swatch | HEX | RGB | CMYK | PMS |
|---|---|---|---|---|
Purple 01s | #CEB3EF | 206, 179, 239 | 24, 29, 0, 0 | 2635 C |
Purple 02s | #5943B6 | 89, 67, 182 | 77, 82, 0, 0 | 2097 C |
Purple 03s | #2F2A6B | 47, 42, 107 | 98, 98, 27, 15 | 273 C |
Purple 04s | #232150 | 35, 33, 80 | 85, 82, 42, 38 | 275 C |
Orange 01s | #FDF1DD | 253, 241, 221 | 1, 4, 12, 0 | 7506 C |
Pink 01s | #FFB9C9 | 255, 185, 201 | 0, 33, 10, 0 | 1767 C / 1767 U |
Teal 01s | #C5F4EC | 197, 244, 236 | 20, 0, 11, 0 | 317 C |
Teal 02s | #6FDAC9 | 111, 218, 201 | 51, 0, 29, 0 | 3242 C |
Teal 03s | #10B1B1 | 16, 177, 177 | 75, 5, 35, 0 | 7710 C |
Gray 01 | #D1D0D3 | 209, 208, 211 | 8, 5, 7, 16 | Cool Gray 3 C / Cool Gray 2 U |
Gray 02 | #A2A1A6 | 162, 161, 166 | 19, 12, 13, 34 | 422 C / 422 U |
Gray 03 | #74717A | 116, 113, 122 | 30, 20, 19, 58 | 424 C / 425 U |
Gray 04 | #45424D | 69, 66, 77 | 41, 28, 22, 70 | 7540 C / 419 U |
Gray 05 | #2B2838 | 43, 40, 56 | 94, 77, 53, 94 | 426 C / Black 6 U |
Gradients
The main gradient for our core brand consists of Orange 02p, Purple 01p, and Pink 01s with a white base fill. In some cases, custom gradients can be created for a more curated aesthetic to differentiate an asset from general-branded designs. Follow the parameters below to ensure visual consistency across all gradients:
- All gradients should feel organic and not distract from other elements on the design.
- All gradients should be generated using the freeform gradient feature in Illustrator, or by creating layered radial gradients in Figma.
- Gradients should be limited to no more than 3 colors, not including the base fill.
- Colors should feel soft and gently blur into one another; in most cases, keeping opacities below 30% achieves this look.
- Purple should always be included as one of the gradient’s colors.
- Charcoal and gray should not be used.
- Light-mode gradients should use white as the base fill.
- Dark-mode gradients should use Purple 04s as the base fill.
- When adding text or our logo, ensure that they are placed on a part of the gradient that provides adequate contrast.
Contrast and accessibility
Using color combinations that have sufficient contrast benefits everyone and preserves readability. A contrast ratio of 4.5:1 or higher is preferred for text and UI elements, but 3:1 can be used for larger text. Illustrations are an exception and will use a larger range of the palette, although even the key elements should still be legible. Color accessibility enables people with visual impairments or color vision deficiencies to interact with digital experiences in the same way as their non-visually-impaired counterparts. For more information about color contrast in a digital context, view the WCAG Success Criterion 1.4.3 Contrast (Minimum) guidelines.
Terminology
Digital
Digital colors refer to colors that will be produced digitally. For instance, the colors on this webpage use HEX codes to generate the colors. If you are working with any digital asset, you can input either the HEX or RGB color codes, as detailed in the tables above. More digital use cases include: digital ads, digital billboards, video and animation, slide decks, and Canva.
- HEX: HEX codes are based on the hexadecimal system in computing. HEX and RGB codes provide the same information, but in different formats. The HEX code includes a hashtag followed by six characters.
- Example:
#FC6D26
- Example:
- RGB: RGB is an acronym for Red, Green, and Blue. All digital colors are generated using percentages of these three colors. As mentioned, RGB is interchangeable with HEX.
- Example:
rgb(255, 255, 255)
- Example:
Print colors refer to colors that will be generated in printed assets. Generally speaking, digital screens saturate colors more deeply than printed materials do, so print-specific colors codes are used to create more visual consistency between the two formats. Some print use cases include: pop up banners, swag and merchandise, stickers, print billboards, and booth designs.
- CMYK: CMYK is an acronym for Cyan, Magenta, Yellow, and Key. If an asset is a 'full-color' print, then CMYK is used. CMYK is usually the default for general printing and can be found in personal and commercial printers alike.
- Example: C:90, M:68, Y:41, K:90
- PMS: PMS is an acronym for Pantone Matching System. Whereas CMYK colors are generated by ink values, PMS colors are pre-mixed, universal colors established by Pantone. This technique provides the most consistent color across materials. PMS is used for spot color prints (examples include embroidery and screen printing) and for more advanced print jobs to ensure quality and accuracy; vendors will usually specify when PMS is required. PMS colors have either a name or a code, which consists of a set of numbers followed by either a 'C' for coated or a 'U' for uncoated. Coated and uncoated refer to the paper; coated indicates gloss and uncoated refers to no coating/gloss (ie: matte paper).
- Example: 433 C / 4280 U
Last updated at:Â