Color Overview

Use color intentionally. It’s not decoration. Color is functional. It’s used to signal structure on a page, to highlight or emphasize important information or elements, and to display different states of an interface.

If you need full color guidelines, check Color page.

Product Light
#ECF8F7
Product Light :hover
#D6F0EE
Product Light :active
#C0E8E4
Product Normal
#00A991
Product Normal :hover
#009882
Product Normal :active
#008F7B
Product Dark
#007F6D
Product Dark :hover
#007060
Product Dark :active
#006657
Product Darker
#005C4E
White
#FFFFFF
White :hover
#F1F4F7
White :active
#E7ECF1
Cloud Light
#F5F7F9
Cloud Light :hover
#E5EAEF
Cloud Light :active
#D6DEE6
Cloud Normal
#E8EDF1
Cloud Normal :hover
#D9E1E8
Cloud Normal :active
#CAD5DF
Ink Lighter
#BAC7D5
Ink Lighter :hover
#A6B6C8
Ink Ligter :active
#94A8BE
Ink Light
#5F738C
Ink Light :hover
#52647A
Ink Light :active
#465567
Ink Normal
#252A31
Ink Normal :hover
#181B20
Ink Normal :active
#0B0C0F
Green Light
#EBF4EC
Green Light :hover
#D7EAD9
Green Light :active
#C3DFC7
Green Normal
#28A138
Green Normal :hover
#238B31
Green Normal :active
#1D7228
Green Dark
#235C2B
Green Dark :hover
#1B4621
Green Dark :active
#123016
Orange Light
#FDF0E3
Orange Light :hover
#FAE2C7
Orange Light :active
#F8D3AB
Orange Normal
#F9971E
Orange Normal :hover
#F38906
Orange Normal :active
#D67906
Orange Dark
#8E2A06
Orange Dark :hover
#712105
Orange Dark :active
#531904
Red Light
#FAEAEA
Red Light :hover
#F4D2D2
Red Light :active
#EEB9B9
Red Normal
#D21C1C
Red Normal :hover
#B91919
Red Normal :active
#9D1515
Red Dark
#760909
Red Dark :hover
#5A0707
Red Dark :active
#3E0505
Blue Light
#E5F7FF
Blue Light :hover
#C7EEFF
Blue Light :active
#A8E5FF
Blue Normal
#0172CB
Blue Normal :hover
#0161AC
Blue Normal :active
#01508E
Blue Dark
#004680
Blue Dark :hover
#003561
Blue Dark :active
#002442
Facebook
#3B5998
Facebook :hover
#385490
Facebook :active
#354F88