Colors

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

Every color from Orbit is available directly as a token, such as paletteInkLight and paletteProductNormal.

If you need more detailed color guidelines, checkout the general Color page. See especially the guidelines for the additional shades.

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

White

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

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

Ink

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

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

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

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

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