Colors

Use color intentionally. It’s not decoration. Color is supposed to be functional.

General guidelines

We have different shades for every defined color in Orbit. For most of our colors*, the following points should apply:

• Every color has specific guidelines for meaning. We honor these guidelines in order to maintain consistency across the product.
• It’s usually safe to combine Light and Dark shades of any color. Text in Dark shade should be readable on a Light shade background of its related color.
• Dark shade of any color shouldn’t be used as a background.
• Every non-dark color has two additional shades defined – :active and :hover. These additional shades should only be used for very specific cases.
• All of our colors are also defined as design tokens, so non-Orbit components can use Orbit colors directly and they don’t need to define colors again in their local codebase.

*Colors in the Shades category are an exception because shades are usually used for general use cases like texts, headings, and borders.

Background & Foreground colors

We use two main colors for backgrounds:

• White
• Cloud / Light

And four colors to create status backgrounds:

• Blue / Light
• Green / Light
• Orange / Light
• Red / Light

These are used most of the time for backgrounds for any elevation level or component. These colors are accessible with dark foreground colors, so we recommended using Light shades for backgrounds and Dark shades for foregrounds. You can also use complementary and minor colors from our palette, which should help you have enough colors to work with.

Interactive colors

Interactive colors are used in components with some indication of the state that do not move you forward in the flow or redirect you to another page. All of these elements should be colored in Blue / Normal. The majority of these interactive elements cover hover, focus, select, active, press, and drag states.

Actionable colors

Actionable colors are used in components that include an action (such as moving you forward in the flow). That means the Button, ButtonLink, and TextLink components. For the actionable color, we are use our main Product / Normal. Elements that are not actionable should not be in this color.

Orbit palette

The color palette contains every one of the colors we use in our designs. These colors are also used by default in white label solutions for our partners and can be modified to their brand colors.

Guidelines

  # Use Product Normal for primary actions

When used only for primary actions on buttons or text links, they tend to stand out from the interface and brings the brand into the interface.

  # Don’t use Product color for highlighting information

Because of using Product colors for actions, it may cause confusion when used on something like highlighting some information or text.

The bigger font size, font weight helps to highlight something. Or blue color, when you really need to make something to stand out.

  # Don’t use any Product color for the focus state of form elements

When your Product color is green-ish or red-ish, it may be easily confused with the success or error states of input.

Orbit Blue color was designed exactly for this, use it instead.

  # Don’t use Product colors for backgrounds

It can interfere with the visual priorities on the page and draw attention to non-action elements. Generally, buttons should be the only elements with dark backgrounds. Nothing on the page should draw attention away from them.

We try to keep our UI light as possible, so we use only Cloud colors or Light shades for backgrounds.

Shades

Guidelines

  # Use White as background color for content sections

It allows important information to appear on the page without interference.

  # Use White as background color for inputs

However, there is one exception for native mobile applications where we follow native best practices and use gray color for inputs backgrounds.

Guidelines

Cloud color is generally used for backgrounds or borders.

  # Use Cloud Light as page background

The page doesn’t blind users with bright white and it works well with white Cards and sections.

  # Don’t use Cloud Normal as a border color for inputs

“If an input is used on a non-white background, then the border won’t be visible.

Use $colorInputBorder token instead.

Exceptions

• It’s possible to use Cloud colors as backgrounds for inputs in the iOS application. It’s a common pattern on mobile phones.

For more information about usage, visit the Typography and Icons.

Guidelines

Ink color is generally used for typography or icons.

  # Use Ink Normal as the main text color

Even better, rely on the value of colorTextPrimary token as it will support theming correctly.

  # Don’t use any Ink color for backgrounds

We like our interface light and this would really mess with visual priorities.

Status colors

Guidelines

  # Use the Green color to communicate success

We have several components in Orbit that can help you – Alert, Badge or Text with success type.

  # Don’t use Green color for next buttons

You should use Buttons with primary type for every important action on the page, or secondary if the action isn’t primary.

Succcess buttons should be use only if you need following actions in Success Alert.

Exceptions

• We currently use the Brand color for communicating good prices on the map or calendar.

Guidelines

  # Use the Orange for warning states

We have several components in Orbit that can help you – Alert, Badge or Text with warning type. Be sure that you explain clearly what you are warning a user about.

Guidelines

  # Use the Red color palette for critical states

It’s great for error states, showing negative information or informing user about critical state of their actions.

  # Use Red for destructive buttons

It communicates that something important and negative will happen when triggered.

Guidelines

  # Use Blue Normal for focus in forms

Orbit uses Blue for focus states of inputs, buttons, and other form elements.

  # Use Blue Normal for active or selected states

We use it in all selected states for checkboxes, radios, active tabs, and components like ChoiceTile that allow users to pick something.

  # Don’t use Blue for links or primary buttons

Even that blue color on links is quite common across the internet, we decided to use Product color on our active elements. We also use sometimes use Blue for highlighting elements.

Social color palette

Guidelines

  # Use Facebook color only for Facebook-related content

That basically means that we use Facebook color only on the Facebook login button.

Google

We don’t have specific colors for Google, we just use the colored version of their logo and we use colorTextPrimary for text.