Developer mode
Opens components on the React tab by default.
Your bookmarks

Colors / Palette

Color is used to signal structure on a page, to highlight or emphasize important information or elements, and to display different states of an interface.

Every color from Orbit is available directly as token, e.g. paletteInkLight, paletteProductNormal, etc.

If you need more detailed color guidelines, check the general Color page.

Product

Product Light
paletteProductLight
#ECF8F7
rgb(236, 248, 247)
Product Light :hover
paletteProductLightHover
#D6F0EE
rgb(214, 240, 238)
Product Light :active
paletteProductLightActive
#C0E8E4
rgb(192, 232, 228)
Product Normal
paletteProductNormal
#00A991
rgb(0, 169, 145)
Product Normal :hover
paletteProductNormalHover
#009882
rgb(0, 152, 130)
Product Normal :active
paletteProductNormalActive
#008F7B
rgb(0, 143, 123)
Product Dark
paletteProductDark
#007F6D
rgb(0, 127, 109)
Product Dark :hover
paletteProductDarkHover
#007060
rgb(0, 112, 96)
Product Dark :active
paletteProductDarkActive
#006657
rgb(0, 102, 87)
Product Darker
paletteProductDarker
#005C4E
rgb(0, 92, 78)

White

White
paletteWhite
#FFFFFF
rgb(255, 255, 255)
White :hover
paletteWhiteHover
#F5F7F9
rgb(245, 247, 249)
White :active
paletteWhiteActive
#E5EAEF
rgb(229, 234, 239)

Ink

Ink Lighter
paletteInkLighter
#BAC7D5
rgb(186, 199, 213)
Ink Lighter :hover
paletteInkLighterHover
#A6B6C8
rgb(166, 182, 200)
Ink Lighter :active
paletteInkLighterActive
#94A8BE
rgb(148, 168, 190)
Ink Light
paletteInkLight
#5F738C
rgb(95, 115, 140)
Ink Light :hover
paletteInkLightHover
#52647A
rgb(82, 100, 122)
Ink Light :active
paletteInkLightActive
#465567
rgb(70, 85, 103)
Ink Normal
paletteInkNormal
#252A31
rgb(37, 42, 49)
Ink Normal :hover
paletteInkNormalHover
#181B20
rgb(24, 27, 32)
Ink Normal :active
paletteInkNormalActive
#0B0C0F
rgb(11, 12, 15)

Cloud

Cloud Light
paletteCloudLight
#F5F7F9
rgb(245, 247, 249)
Cloud Light :hover
paletteCloudLightHover
#E5EAEF
rgb(229, 234, 239)
Cloud Light :active
paletteCloudLightActive
#D6DEE6
rgb(214, 222, 230)
Cloud Normal
paletteCloudNormal
#EFF2F5
rgb(239, 242, 245)
Cloud Normal :hover
paletteCloudNormalHover
#DCE3E9
rgb(220, 227, 233)
Cloud Normal :active
paletteCloudNormalActive
#CAD4DE
rgb(202, 212, 222)
Cloud Dark
paletteCloudDark
#E8EDF1
rgb(232, 237, 241)

Green

Green Light
paletteGreenLight
#EBF4EC
rgb(235, 244, 236)
Green Light :hover
paletteGreenLightHover
#D7EAD9
rgb(215, 234, 217)
Green Light :active
paletteGreenLightActive
#C3DFC7
rgb(195, 223, 199)
Green Normal
paletteGreenNormal
#28A138
rgb(40, 161, 56)
Green Normal :hover
paletteGreenNormalHover
#238B31
rgb(35, 139, 49)
Green Normal :active
paletteGreenNormalActive
#1D7228
rgb(29, 114, 40)
Green Dark
paletteGreenDark
#2B7336
rgb(43, 115, 54)
Green Dark :hover
paletteGreenDarkHover
#25642F
rgb(37, 100, 47)
Green Dark :active
paletteGreenDarkActive
#1F5126
rgb(31, 81, 38)
Green Darker
paletteGreenDarker
#235C2B
rgb(35, 92, 43)

Orange

Orange Light
paletteOrangeLight
#FDF0E3
rgb(253, 240, 227)
Orange Light :hover
paletteOrangeLightHover
#FAE2C7
rgb(250, 226, 199)
Orange Light :active
paletteOrangeLightActive
#F8D3AB
rgb(248, 211, 171)
Orange Normal
paletteOrangeNormal
#E98305
rgb(233, 131, 5)
Orange Normal :hover
paletteOrangeNormalHover
#DC7C05
rgb(220, 124, 5)
Orange Normal :active
paletteOrangeNormalActive
#CD7304
rgb(205, 115, 4)
Orange Dark
paletteOrangeDark
#A25100
rgb(162, 81, 0)
Orange Dark :hover
paletteOrangeDarkHover
#8F4700
rgb(143, 71, 0)
Orange Dark :active
paletteOrangeDarkActive
#753A00
rgb(117, 58, 0)
Orange Darker
paletteOrangeDarker
#803F00
rgb(128, 63, 0)

Blue

Blue Light
paletteBlueLight
#E8F4FD
rgb(232, 244, 253)
Blue Light :hover
paletteBlueLightHover
#D0E9FB
rgb(208, 233, 251)
Blue Light :active
paletteBlueLightActive
#B4DBF8
rgb(180, 219, 248)
Blue Normal
paletteBlueNormal
#0172CB
rgb(1, 114, 203)
Blue Normal :hover
paletteBlueNormalHover
#0161AC
rgb(1, 97, 172)
Blue Normal :active
paletteBlueNormalActive
#01508E
rgb(1, 80, 142)
Blue Dark
paletteBlueDark
#005AA3
rgb(0, 90, 163)
Blue Dark :hover
paletteBlueDarkHover
#004F8F
rgb(0, 79, 143)
Blue Dark :active
paletteBlueDarkActive
#003E70
rgb(0, 62, 112)
Blue Darker
paletteBlueDarker
#004680
rgb(0, 70, 128)

Red

Red Light
paletteRedLight
#FAEAEA
rgb(250, 234, 234)
Red Light :hover
paletteRedLightHover
#F4D2D2
rgb(244, 210, 210)
Red Light :active
paletteRedLightActive
#EEB9B9
rgb(238, 185, 185)
Red Normal
paletteRedNormal
#D21C1C
rgb(210, 28, 28)
Red Normal :hover
paletteRedNormalHover
#B91919
rgb(185, 25, 25)
Red Normal :active
paletteRedNormalActive
#9D1515
rgb(157, 21, 21)
Red Dark
paletteRedDark
#970C0C
rgb(151, 12, 12)
Red Dark :hover
paletteRedDarkHover
#890B0B
rgb(137, 11, 11)
Red Dark :active
paletteRedDarkActive
#6D0909
rgb(109, 9, 9)
Red Darker
paletteRedDarker
#760909
rgb(118, 9, 9)