Color
Color does more than decorate: it signals action, emotion, and accessibility.
Base Blue is our anchor: an RGB native hue optimized for every screen. New primaries inject warmth or urgency; cool neutrals balance layouts and meet contrast requirements.
Think rhythm, not rainbow: lead with monochrome and spotlight one accent. Keep color tokens locked, verify AA contrast in both themes, and remember that restraint breeds recognition: if every element shouts, none of them will be heard.
Our Palette
Core palette: Base Blue, Black, White, Gray ramp. Secondary palette: A rich spectrum of Cerulean, Tan, Red, Yellow, Pink, Green and Lime.
Base Blue
Base Blue is screen native RGB 0 0 255. In print convert to PMS 286. Base Blue on white (or vice versa) passes AA contrast.Blue#0000ff
R 0G 0B 255PMS286C 100M 72Y 0K 0
Color Values → HEX, RGB
Provide hex and RGB for every swatch. Keep values locked. Do not interpolate between shades without brand team approval.If you need to use the full spectrum of grayscale, refer to the product palette on page 42.Blue#0000ff
R 0G 0B 255
Cerulean#3c8aff
R 60G 138B 255
Gray 0#ffffff
R 255G 255B 255
Gray 10#eef0f3
R 238G 240B 243
Tan#b8a581
R 184G 165B 129
Yellow#ffd12f
R 255G 209B 47
Gray 15#dee1e7
R 222G 225B 231
Gray 30#b1b7c3
R 177G 183B 195
Green#66c800
R 102G 200B 0
Lime Green#b6f569
R 182G 245B 105
Gray 50#717886
R 113G 120B 134
Gray 60#5b616e
R 91G 97B 110
Red#fc401f
R 252G 64B 31
Pink#fea8cd
R 254G 168B 205
Gray 80#32353d
R 50G 53B 61
Gray 100#0a0b0d
R 10G 11B 13
Color Values → Pantone, CMYK
Provide Pantone and CMYK for every swatch. Keep values locked. Do not interpolate between shades without brand team approval.Blue#0033a0
R 0G 51B 160
Cerulean#0090de
R 0G 144B 222
Gray 0#ffffff
R 255G 255B 255
Gray 10#eef0f3
R 238G 240B 243
Tan#d3bc8d
R 211G 188B 141
Yellow#ffd700
R 255G 215B 0
Gray 15#dee1e7
R 222G 225B 231
Gray 30#b1b7c3
R 177G 183B 195
Green#5bc500
R 91G 197B 0
Lime Green#8edd65
R 142G 221B 101
Gray 50#717886
R 113G 120B 134
Gray 60#5b616e
R 91G 97B 110
Red#ee2737
R 238G 39B 55
Pink#fc9bb3
R 252G 155B 179
Gray 80#32353d
R 50G 53B 61
Gray 100#0a0b0d
R 10G 11B 13
Using Color
The core color combination is grayscale and blue. The secondary palette can then be used to enrich marketing and social content, but it should never overshadow the primary colors. For campaigns or special novelty projects, colors outside the brand palette may be used to keep the brand from feeling stagnant.core
marketing, social
novelty
Using Secondary Color
When using the secondary palette, it should only be applied to supplementary elements — always after black, white, and blue have been used. Avoid using more than 3 vibrant colors — always pair with one muted color.1 Color
2 Colors
3 Colors - Analogous
Multicolor
Using Color on Web
Without careful execution, our palette can feel very saturated and too poppy. To avoid it, we want to be thoughtful about selecting colors in application.Always reserve the use of Base Blue to the most effective element and avoid over using it.
Our grayscale and negative space should outweigh Base Blue in terms of color hierarchy.
We love surprising with color and expression in unexpected moments.
The design stays mostly grayscale, but uses bursts of vibrant color in key interactions to add expression and impact.
Color Interaction and Legibility
Consider aesthetics and legibility when combining foreground and background colors. Aim to use a limited and logical color palette, and avoid jarring combinations or overly low contrast.When using color on websites or digital screens, aim to meet WCAG AA Large accessibility standard. This ensures sufficient contrast and legibility for a wide range of users, maintaining both clarity and inclusivity in our visual communication.
Product
The product uses a palette optimized for accessibility, which differs slightly from the brand palette. For guidance on using the full spectrum or product-specific colors, please consult the product team.
Misuse
Do not lead with gradients in core comms. Avoid opacity, layering and other visual effects. Never hero a color other than Blue, Black, White, or Gray.Do not use gradients
Do not lead with secondary color
Do not make the brand feel too elementary
Do not over use Base Blue on product or web
In Use
Here are a few examples of how to apply our color palette across different contexts:- Out-of-home marketing — Use our signature blue as the dominant color to maximize brand recognition in large-scale, public-facing media.
- Image treatment — Apply color overlays or texture effects to photographs to create a cohesive and recognizable brand aesthetic.
- Illustration & Infographics — Integrate brand colors into illustrations to maintain consistency while adding visual character. Use a structured combination of core and secondary colors to clearly differentiate data and guide the viewer's understanding.
- Social — Use the full palette to scale and expand the brand identity.
