Color
Guidelines
Last updated: January 2018
Product specific
Typography
-
- Headings
- Navy
- Hex #1F375B
- RGB 31, 55, 91
-
- Copy
- Grey darken 4
- Hex #445058
- RGB 68, 80, 88
-
- Link
- Blue
- Hex #1493FF
- RGB 20, 147, 255
-
- Link hover
- Blue darken 2
- Hex #0D7FE1
- RGB 13, 127, 225
-
- Link on dark bg
- Blue lighten 2
- Hex #4CADFF
- RGB 76, 173, 255
-
- Link hover on dark bg
- Blue
- Hex #1493FF
- RGB 20, 147, 255
UI
-
- Screen background
- Grey lighten 4
- Hex #F0F3F8
- RGB 217, 3, 97
-
- Card highlight
- Grey lighten 5
- Hex #F5F8FC
- RGB 245, 248, 252
-
- Border
- Grey
- Hex #B9C4CB
- RGB 185, 196, 203
-
- Internal Border
- Grey lighten 2
- Hex #CFD6DB
- RGB 207, 214, 219
Example

Primary
Grey
-
- White
- Hex #FFFFFF
- RGB 255, 255, 255
-
- Grey lighten 5
- Hex #F5F8FC
- RGB 245, 248, 252
-
- Grey lighten 4
- Hex #F0F3F8
- RGB 240, 243, 248
-
- Grey lighten 3
- Hex #E4E8EE
- RGB 228, 232, 238
-
- Grey lighten 2
- Hex #CFD6DB
- RGB 207, 214, 219
-
- Grey lighten 1
- Hex #C2CBD1
- RGB 194, 203, 209
-
- Grey
- Hex #B9C4CB
- RGB 185, 196, 203
-
- Grey darken 1
- Hex #AFBBC2
- RGB 175, 187, 194
-
- Grey darken 2
- Hex #99A8B1
- RGB 153, 168, 177
-
- Grey darken 3
- Hex #818E95
- RGB 129, 142, 149
-
- Copy
- Grey darken 4
- Hex #445058
- RGB 68, 80, 88
Navy
-
- Navy lighten 2
- Hex #294B75
- RGB 41, 75, 117
-
- Navy lighten 1
- Hex #224168
- RGB 34, 65, 104
-
- Navy
- Hex #1F375B
- RGB 31, 55, 91
-
- Navy darken 1
- Hex #162C4D
- RGB 22, 44, 77
-
- Navy darken 2
- Hex #152A47
- RGB 21, 42, 71
Blue
-
- Blue lighten 2
- Hex #4CADFF
- RGB 76, 173, 255
-
- Blue lighten 1
- Hex #31A0FD
- RGB 49, 160, 253
-
- Blue
- Hex #1493FF
- RGB 20, 147, 255
-
- Blue darken 1
- Hex #0F89F1
- RGB 15, 137, 241
-
- Blue darken 2
- Hex #0D7FE1
- RGB 13, 127, 225
Secondary
Green
-
- Green lighten 2
- Hex #41E878
- RGB 65, 232, 120
-
- Green lighten 1
- Hex #3DD96F
- RGB 61, 217, 111
-
- Green
- Hex #36C565
- RGB 54, 197, 101
-
- Green darken 1
- Hex #2CB459
- RGB 44, 180, 89
-
- Green darken 2
- Hex #219848
- RGB 33, 152, 72
Yellow
-
- Yellow lighten 2
- Hex #FFD87A
- RGB 255, 216, 122
-
- Yellow lighten 1
- Hex #FFCF5B
- RGB 255, 207, 91
-
- Yellow
- Hex #FFCB4D
- RGB 255, 203, 77
-
- Yellow darken 1
- Hex #F4C041
- RGB 244, 192, 65
-
- Yellow darken 2
- Hex #E8B436
- RGB 232, 180, 54
Orange
-
- Orange lighten 2
- Hex #FFB773
- RGB 255, 183, 115
-
- Orange lighten 1
- Hex #FFA958
- RGB 255, 169, 88
-
- Orange
- Hex #F99F4A
- RGB 249, 159, 74
-
- Orange darken 1
- Hex #EA913C
- RGB 234, 145, 60
-
- Orange darken 2
- Hex #DA812D
- RGB 218, 129, 45
Red
-
- Red lighten 2
- Hex #FF4F4F
- RGB 255, 79, 79
-
- Red lighten 1
- Hex #F14747
- RGB 241, 71, 71
-
- Red
- Hex #E44242
- RGB 228, 66, 66
-
- Red darken 1
- Hex #DB3F3F
- RGB 219, 63, 63
-
- Red darken 2
- Hex #BF2D2D
- RGB 191, 45, 45
Purple
-
- Purple lighten 2
- Hex #988CF6
- RGB 152, 140, 246
-
- Purple lighten 1
- Hex #9285F6
- RGB 146, 133, 246
-
- Purple
- Hex #887AEF
- RGB 136, 122, 239
-
- Purple darken 1
- Hex #7B6EDD
- RGB 123, 110, 221
-
- Purple darken 2
- Hex #695CC8
- RGB 105, 92, 200
Illustration specific
-
- Illustration Teal
- Hex #45C0DD
- RGB 123, 123, 123
-
- Illustration Navy
- Hex #253E4F
- RGB 123, 123, 123
-
- Illustration Navy Lighten
- Hex #3F5A6B
- RGB 123, 123, 123
-
- Illustration Blue
- Hex #3075A3
- RGB 123, 123, 123
-
- Illustration Grey
- Hex #CFD5DB
- RGB 123, 123, 123
-
- Illustration Beige
- Hex #EDC1B2
- RGB 123, 123, 123
-
- Illustration Brown
- Hex #896C58
- RGB 123, 123, 123
-
- Illustration Brown 2
- Hex #ab7643
- RGB 123, 123, 123