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
#E6F6F4
rgba(230, 246, 244, 1)
paletteProductLight
Product Normal
#00A58E
rgba(0, 165, 142, 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
Cloud Darker
#BAC7D5
rgba(186, 199, 213, 1)
paletteCloudDarker
Ink
Ink Lighter
#697D95
rgba(105, 125, 149, 1)
paletteInkLighter
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
#2D7738
rgba(45, 119, 56, 1)
paletteGreenDark
Orange
Orange Light
#FCF2E6
rgba(252, 242, 230, 1)
paletteOrangeLight
Orange Normal
#DF7B00
rgba(223, 123, 0, 1)
paletteOrangeNormal
Orange Dark
#BA5D00
rgba(186, 93, 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