Colors

Follow these guidelines when using color in our product. Questions? Talk to Richard at richard@customer.io.

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).

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

Color Composition

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.

PreviousAnimations NextContent

Last updated 1 year ago