Colors

General guidelines

  • 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

WhiteCloudLight
BlueLightGreenLightOrangeLightRedLight

Interactive colors

Actionable colors

Orbit palette

The reasoning behind the additional shades

Product

Product Light
#E1F4F3
rgba(225, 244, 243, 1)
paletteProductLight
Product Normal
#00A58E
rgba(0, 165, 142, 1)
paletteProductNormal
Product Dark
#007A69
rgba(0, 122, 105, 1)
paletteProductDark
Product Darker
#005C4E
rgba(0, 92, 78, 1)
paletteProductDarker

Product guidelines

White

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

White guidelines

Cloud

Cloud Light
#F5F7F9
rgba(245, 247, 249, 1)
paletteCloudLight
Cloud Normal
#E8EDF1
rgba(232, 237, 241, 1)
paletteCloudNormal
Cloud Dark
#BAC7D5
rgba(186, 199, 213, 1)
paletteCloudDark

Cloud guidelines

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
#697D95
rgba(105, 125, 149, 1)
paletteInkLight
Ink Normal
#4F5E71
rgba(79, 94, 113, 1)
paletteInkNormal
Ink Dark
#252A31
rgba(37, 42, 49, 1)
paletteInkDark

Ink guidelines

Status colors

Green

Green Light
#EAF5EA
rgba(234, 245, 234, 1)
paletteGreenLight
Green Normal
#28A138
rgba(40, 161, 56, 1)
paletteGreenNormal
Green Dark
#2D7738
rgba(45, 119, 56, 1)
paletteGreenDark
Green guidelines

Orange

Orange Light
#FEF2E6
rgba(254, 242, 230, 1)
paletteOrangeLight
Orange Normal
#DF7B00
rgba(223, 123, 0, 1)
paletteOrangeNormal
Orange Dark
#AD5700
rgba(173, 87, 0, 1)
paletteOrangeDark
Orange guidelines

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

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

Social color palette

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

Social guidelines

Google

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