Colors

Use color to signal structure, highlight or emphasize important information or elements, and display different states.

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 colorsnote, 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 the Light and Dark shades of any color. Text in the Dark shade should be readable on the Light background of its color.
  • No Dark shade should 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.

Background & foreground colors

We use two main colors for backgrounds:

WhiteCloudLight

And four colors to create status backgrounds:

BlueLightGreenLightOrangeLightRedLight

These are mostly used 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 give you enough colors to work with.

Interactive colors

Interactive colors are used in components with some indication of state that do not move you forward in the flow or redirect you to another page. All of these elements should be colored in BlueNormal. This mostly means 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). This means the Button, ButtonLink, and TextLink components. For the actionable color, we use our main ProductNormal. Elements that aren’t actionable shouldn’t 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 (see more about theming).

The reasoning behind the additional shades

As you might have noticed, our basic color palette is quite simple—just a few shades. If you need multiple layers for the UI, you can use the additional shades. Using just the basic shades would make the UI heavy. Use the additional shades to make the UI more layered and subtle. They’re also useful for specific interaction states, such as hovering and focusing. Do not use these addition shades alone. Use the basic shade as the primary color and only use the additional shades when needed to create more depth or interactions.

Product

Product Light
#ECF8F7
rgba(236, 248, 247, 1)
paletteProductLight
Product Normal
#00A991
rgba(0, 169, 145, 1)
paletteProductNormal
Product Dark
#007F6D
rgba(0, 127, 109, 1)
paletteProductDark
Product Darker
#005C4E
rgba(0, 92, 78, 1)
paletteProductDarker

We’re aware of a slight contrast issue with our Product Normal color and the issues when using it for Primary buttons. We’re exploring possible solutions. We highly recommend against using it for text and we recommend using darker shades when possible.

Product guidelines

Use Product Normal for primary actions

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

A button in primary normal stands out from text

Don't use Product color to highlight information

Bigger font sizes and heavier font weights help highlight. See typography for more.

Information in product color in the middle of text seems like an action

Don't use Product colors for backgrounds

To try to keep the UI light as possible, use only Cloud colors or Light shades for backgrounds.

Dark backgrounds draw a lot of attention

White

White
#FFFFFF
rgba(255, 255, 255, 1)
paletteWhite

White guidelines

Use White as the background for content

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

A white background gives space for text

Use White as the background for inputs

But make an exception for mobile apps. There, follow best practices and use gray for input backgrounds.

White backgrounds make it clear where something should be input

Cloud

Cloud Light
#F5F7F9
rgba(245, 247, 249, 1)
paletteCloudLight
Cloud Normal
#EFF2F5
rgba(239, 242, 245, 1)
paletteCloudNormal
Cloud Dark
#E8EDF1
rgba(232, 237, 241, 1)
paletteCloudDark

Cloud guidelines

Cloud colors are generally used for backgrounds or borders.

Use Cloud Light for the page background

Then the page doesn’t blind users with bright white and it works well with white Cards and sections for content.

A darker page highlights the content on white backgrounds

Cloud exceptions

  • It’s possible to use Cloud colors as backgrounds for inputs in mobile apps, where it’s a common pattern.

Ink

Ink Light
#4F5E71
rgba(79, 94, 113, 1)
paletteInkLight
Ink Normal
#252A31
rgba(37, 42, 49, 1)
paletteInkNormal

For more information about usage, see Typography and Icons.

Ink guidelines

Ink colors are generally used for typography and icons.

Use Ink Normal as the main text color

Even better, rely on the value of colorTextPrimary as it properly supports theming.

Ink text can be seen clearly

Don't use any Ink color for backgrounds

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

Ink backgrounds are very heavy and attention-grabbing

Status colors

Green

Green Light
#EBF4EC
rgba(235, 244, 236, 1)
paletteGreenLight
Green Normal
#28A138
rgba(40, 161, 56, 1)
paletteGreenNormal
Green Dark
#2B7336
rgba(43, 115, 54, 1)
paletteGreenDark
Green guidelines

Use Green to communicate success

We have several components in Orbit that do this—Alert, Badge, and Text all have a success type.

Green shows success without drawing too much attention

Don't use Green for next buttons

Only use success buttons if you need actions in a success alert.

Green for buttons is too confusing with the primary color

Orange

Orange Light
#FDF0E3
rgba(253, 240, 227, 1)
paletteOrangeLight
Orange Normal
#E98305
rgba(233, 131, 5, 1)
paletteOrangeNormal
Orange Dark
#AE5700
rgba(174, 87, 0, 1)
paletteOrangeDark
Orange guidelines

Use Orange for warning states

We have several components in Orbit that do this—Alert, Badge, and Text all have a warning type. Be sure that you explain clearly what you’re warning users about.

Orange draws enough attention to the warning without being overwhelming

Don't use Orange to highlight information

If you really need to highlight something with color, use Blue.

Red

Red Light
#FAEAEA
rgba(250, 234, 234, 1)
paletteRedLight
Red Normal
#D21C1C
rgba(210, 28, 28, 1)
paletteRedNormal
Red Dark
#970C0C
rgba(151, 12, 12, 1)
paletteRedDark
Red guidelines

Use Red for critical states

It’s great for error states, showing negative information, and informing users about critical states of their actions.

Red draws attention and makes it clear something has gone wrong

Use Red for destructive actions

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

Red makes users stop and think about the consequences of an action

Blue

Blue Light
#E8F4FD
rgba(232, 244, 253, 1)
paletteBlueLight
Blue Normal
#0172CB
rgba(1, 114, 203, 1)
paletteBlueNormal
Blue Dark
#005AA3
rgba(0, 90, 163, 1)
paletteBlueDark
Blue guidelines

Use Blue Normal for focus in forms

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

Blue draws attention to the element with focus

Use Blue Normal for active or selected states

Orbit uses Blue in all selected states for checkboxes and radios, active tabs, and components like ChoiceTile that allow users to pick something.

Blue highlights what the user has chosen

Social color palette

Social Facebook
#3B5998
rgba(59, 89, 152, 1)
paletteSocialFacebook

Social guidelines

Google

There aren’t any specific colors for Google. We just use the colored version of their logo and colorTextPrimary for text.


  1. Shades are an exception because they’re usually used for general use cases like texts, headings, and borders.