Color Usage

Following the August 2020 update to the Rocket Orbit color palette, it’s important to review this guide carefully so you can apply color correctly.

Our objective is to achieve human-centered design in everything we do and having a consistent and WCAG AA accessible color palette is just one of the foundations in creating this unified user experience.

Table of Contents

Our Color Story

We designed the Orbit palette to be modern and approachable, while fitting our brand character and highlighting color psychology attributes.

One of our designers said, "[The color palette] reminded me of when Felix Baumgartner jumped from the edge of space. The thing I remember most when watching it, as he ascended and the curvature of the earth became more pronounced, it created this beautiful tapestry of color as he moved through the atmospheres and how the light would reflect and your perspective changed."

How to Apply Color

When using color in any application, it’s important to be mindful of proportions. Using not just the right color, but the right amount of that color, creates a consistent balance in a user experience.

Scale showing correct balance and proportions when using color.

Rocket Red

As our primary color, use Rocket Red for primary actions, like buttons and key elements in illustrations. Take care to not overuse any shades of red.

Do
Webpage with a Rocket Red primary button that is paired with a Orbit Purple secondary button.

When using Rocket Red to indicate primary actions, always balance colors by including a secondary or tertiary option.

Don't
Webpage with two Rocket Red primary buttons next to each other.

Don’t overuse Rocket Red, especially in buttons.

Orbit Purple

As our secondary color, use Purple to highlight secondary actions, like buttons, in-page links and active form fields. Use for highlighting important information and followed links.

Do
Webpage with an Orbit Purple field input to indicate interaction.

Use Orbit Purple to call attention to interactive elements.

Don't
Webpage with Purple text and an Orbit Purple background.

Don’t overuse Purple.

Neutral Colors

Often used for text, borders, and system icons.

For example: always use shades of grey when working with text, where different color types should not be mixed.

Do
Webpage with headline text in Black, and body copy in corresponding shades of grey to indicate hierarchy.

Use shades of grey when necessary to create additional content hierarchy.

Don't
Webpage with headline and body copy text shown in several different semantic and brand colors.

Don’t mix brand or semantic colors in text.

Semantic Colors

Semantic colors should be used to communicate the status of messages.

  • Green: Success
  • Blue: Informational
  • Pink: Error, Urgent or Attention Needed
  • Yellow: Warning

Do not use semantic colors for large accents.

For example: Use the Error semantic color to present negative information instead of using Rocket Red, which is reserved for positive brand interactions.

Do
Webpage with a Rocket Red colored alert window, indicating an urgent message.

Use appropriate semantic colors for indicate the status of messages, like an urgent alert.

Don't
Webpage with a Semantic Warning color background.

Don’t use semantic colors as accents or outside their intended use.

Floods of Color

Floods of color indicate areas of focus in the interface, but content should mainly be on white backgrounds.

Orbit Purple Screen that fills majority of space, paired with a step-by-step navigation bar and blank iPhone screen.

Floods of color should be reserved for the below colors only:

Dark

Light

Charts and Graphs

Charts and graphs use shades of purple to represent the correct information hierarchy.

When presenting something negative to the user, pink – or the semantic Error color – should be used.

While semantic colors can be used to display both positive and negative information, we strongly recommend not mixing multiple semantic colors within one chart. These colors should only be used as accents on the Purple gradient palette.

Orbit Purple Screen that fills majority of space, paired with a step-by-step navigation bar and blank iPhone screen.
Orbit Purple Screen that fills majority of space, paired with a step-by-step navigation bar and blank iPhone screen.
Next: Color Codes