Search…
Colors
Follow these guidelines when using color in our product. Questions? Talk to Richard at [email protected]

Introduction

Our goal with color is to bring elements of human, compassionate, friendly and kind to our technical product and user base. Our palette reflects the joy and triumph represented in our logo.
Color is purposeful. We use color to communicate, from reinforcing our brand to representing functional states in our product. You should not rely on color alone to communicate.
Accessibility is not optional. Empathy and Responsibility are two of our core values. We are committed to building a product that is accessible for a majority of users. You should not use inaccessible color combinations.

Primary brand palette

Purple

You should use purple for primary actions and inputs (focus, select highlight, checkbox, radio, toggle).
Palette
Accessible Combinations
purple-900
#331673
$color-purple-900
purple-700
#5721CC
$color-purple-700
purple-500
#7131FF
$color-purple-500
purple-300
#BA9CFF
$color-purple-300
purple-200
#D6C2FF
$color-purple-200
purple-100
#F1EAFF
$color-purple-100

Ink

You should use ink for headings (marketing), secondary actions, and denotes Premium.
Palette
Accessible Combinations
Colors
Name
Hex
SCSS
ink-900
#2F326A
$color-ink-900
ink-700
#484B7D
$color-ink-700
ink-500
#6D6E97
$color-ink-500
ink-300
#DFDFF2
$color-ink-300
ink-200
#EBEBFC
$color-ink-200
ink-100
#F2F2FF
$color-ink-100

Gray

You should use gray for text and backgrounds.
Palette
Accesible Combinations
Color
Name
Hex
SCSS
gray-900
#343446
$color-gray-900
gray-700
#4B4B60
$color-gray-700
gray-500
#6F7488
$color-gray-500
gray-400
#A1A2B2
$color-gray-400
gray-300
#C7C7D4
$color-gray-300
gray-200
#EBECF2
$color-gray-200
gray-100
#F7F8FA
$color-gray-100
white
#FFFFFF
$color-white

Secondary brand palette

Teal

You should use teal as an accent to reinforce the brand.
Palette
Accessible Combinations
Color
Name
Hex
SCSS
teal-900
#007069
$color-teal-900
teal-700
#00AB9A
$color-teal-700
teal-500
#00ECBB
$color-teal-500
teal-300
#80FCDF
$color-teal-300
teal-200
#B5FFEF
$color-teal-200
teal-100
#E5FEF9
$color-teal-100

Plum

You should use plum as an accent to reinforce the brand.
Palette
Accessible Combinations
Color
Name
Hex
SCSS
plum-900
#5C1E8F
$color-plum-900
plum-700
#843CC7
$color-plum-700
plum-500
#AF64FF
$color-plum-500
plum-300
#E1C9FF
$color-plum-300
plum-200
#E9DBFF
$color-plum-200
plum-100
#F5F0FF
$color-plum-100

Yellow

You should use yellow as an accent to reinforce the brand and in the product to communicate warning and caution.
Palette
Accessible Combinations
Color
Name
Hex
SCSS
yellow-900
#8C6E00
$color-yellow-900
yellow-700
#C79F00
$color-yellow-700
yellow-500
#FFCD00
$color-yellow-500
yellow-300
#FFEB99
$color-yellow-300
yellow-200
#FFF3BF
$color-yellow-200
yellow-100
#FFFAE5
$color-yellow-100

Functional palette

Red

You should use red to communicate destruction and error.
Palette
Accessible Combinations
Color
Name
Hex
SCSS
red-900
#69002C
$color-red-900
red-700
#AB0937
$color-red-700
red-500
#DB234B
$color-red-500
red-300
#FF9CAE
$color-red-300
red-200
#FFC4CF
$color-red-200
red-100
#FFEDF0
$color-red-100

Yellow

You should use yellow to communicate warning and caution.
Palette
Accessible Combinations
Color
Name
Hex
SCSS
yellow-900
#8C6E00
$color-yellow-900
yellow-700
#C79F00
$color-yellow-700
yellow-500
#FFCD00
$color-yellow-500
yellow-300
#FFEB99
$color-yellow-300
yellow-200
#FFF3BF
$color-yellow-200
yellow-100
#FFFAE5
$color-yellow-100

Green

You should use green to communicate success.
Palette
Accesible Combinations
Color
Name
Hex
SCSS
green-900
#156352
$color-green-900
green-700
#1E9E7C
$color-green-700
green-500
#21C496
$color-green-500
green-300
#99F0D4
$color-green-300
green-200
#BFF5E2
$color-green-200
green-100
#E6FAF3
$color-green-100

Blue

You should use blue to communicate informational states.
Palette
Accesible Combinations
Color
Name
Hex
SCSS
blue-900
#055666
$color-blue-900
blue-700
#0597AD
$color-blue-700
blue-500
#00D9F5
$color-blue-500
blue-300
#80ECFA
$color-blue-300
blue-200
#B1F4FC
$color-blue-200
blue-100
#E5FBFE
$color-blue-100

Extended Palette

Raspberry

You should use raspberry to communicate code.
Palette
Accesible Combinations
Color
Name
Hex
SCSS
raspberry-900
#87004D
$color-raspberry-900
raspberry-700
#B80062
$color-raspberry-700
raspberry-500
#EB0075
$color-raspberry-500
raspberry-300
#FFB5CC
$color-raspberry-300
raspberry-200
#FFCFE0
$color-raspberry-200
raspberry-100
#FFF2F8
$color-raspberry-100

Clementine

You should use clementine as an additional accent color when needed.
Palette
Accesible Combinations
Color
Name
Hex
SCSS
clementine-900
#914201
$color-clementine-900
clementine-700
#C45C0C
$color-clementine-700
clementine-500
#F7751E
$color-clementine-500
clementine-300
#FFC48C
$color-clementine-300
clementine-200
#FFD8BA
$color-clementine-200
clementine-100
#FFF0E8
$color-clementine-100

Print

You should use these pantones for print materials.
Color
Name
Pantone (Coated)
Pantone (Uncoated)
CMYK
yellow-500
1235 C
teal-500
333 C
purple-700
2089 C
plum-500
7441 C

Color Usage

Accessibility

We maintain a 4.5:1 contrast ratio for all text. We maintain a 3:1 contrast ratio for non-text items key to understanding the UI (e.g. icon within a button). You can check out WebAIM for additional information.

Reserved Colors

Actions
Selected, Active, Focused
Error
Success
Warning
Informational
Code

Color Composition

Icon & Text
You should reduce the shade of the icon when combined with text. When icons and text use the same color, the visual weight of the icon can draw a disproportionate amount of attention.
Copy link
On this page
Introduction
Primary brand palette
Purple
Ink
Gray
Secondary brand palette
Teal
Plum
Yellow
Functional palette
Red
Yellow
Green
Blue
Extended Palette
Raspberry
Clementine
Print
Color Usage
Accessibility
Reserved Colors
Color Composition