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 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