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
- How To Apply Color
- Charts and Graphs
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.
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.
When using Rocket Red to indicate primary actions, always balance colors by including a secondary or tertiary option.
Don’t overuse Rocket Red, especially in buttons.
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.
Use Orbit Purple to call attention to interactive elements.
Don’t overuse Purple.
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.
Use shades of grey when necessary to create additional content hierarchy.
Don’t mix brand or semantic colors in text.
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.
Use appropriate semantic colors for indicate the status of messages, like an urgent alert.
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.
Floods of color should be reserved for the below colors only:
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.