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
#E1F5F2
Product Light :hover
#bde9e2
Product Light :active
#9addd3
Product Normal
#00a991
Product Normal :hover
#009882
Product Normal :active
#008f7b
Product Dark
#00826f
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
#7f91a8
Ink Light :hover
#6d819c
Ink Light :active
#5f738c
Ink Normal
#46515e
Ink Normal :hover
#3f4854
Ink Normal :active
#38404b
Ink Dark
#171b1e
Green Light
#e7f3e8
Green Light :hover
#d7ebd8
Green Light :active
#c7e3c9
Green Normal
#46B655
Green Normal :hover
#42ac50
Green Normal :active
#3fa34c
Green Dark
#065d12
Orange Light
#fcf1cd
Orange Light :hover
#faeab7
Orange Light :active
#f9e4a1
Orange Normal
#f9971e
Orange Normal :hover
#f48a06
Orange Normal :active
#e68206
Orange Dark
#a93610
Red Light
#fae8e8
Red Light :hover
#f5d4d4
Red Light :active
#f1c0c0
Red Normal
#d21c1c
Red Normal :hover
#bd1919
Red Normal :active
#b21717
Red Dark
#650808
Blue Light
#e0f6ff
Blue Light :hover
#c8effe
Blue Light :active
#b0e8fe
Blue Normal
#0176D2
Blue Normal :hover
#006abd
Blue Normal :active
#0064b2
Blue Dark
#003A69
Facebook
#3b5998
Facebook :hover
#385490
Facebook :active
#354f88