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

Ink

You should use ink for headings (marketing), secondary actions, and denotes Premium.

Gray

You should use gray for text and backgrounds.

Secondary brand palette

Teal

You should use teal as an accent to reinforce the brand.

Plum

You should use plum as an accent to reinforce the brand.

Yellow

You should use yellow as an accent to reinforce the brand and in the product to communicate warning and caution.

Functional palette

Red

You should use red to communicate destruction and error.

Yellow

You should use yellow to communicate warning and caution.

Green

You should use green to communicate success.

Blue

You should use blue to communicate informational states.

Extended Palette

Raspberry

You should use raspberry to communicate code.

Clementine

You should use clementine as an additional accent color when needed.

Print

You should use these pantones for print materials.

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.

Last updated