Color

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