Foundations
Color
We use colors purposefully to communicate how things function in the interface, how they relate to other elements, and their level of prominence.
Technically we have 81 color palettes for many purposes. But with regards to TDS component usages, we only use 14 palettes.
Neutral
N800
HEX
#303135
RGB
48, 49, 53
N700
HEX
#4D4F56
RGB
77, 79, 86
N600
HEX
#71747D
RGB
113, 116, 125
N400
HEX
#AEB2BE
RGB
174, 178, 190
N200
HEX
#D8DCE8
RGB
216, 220, 232
N100
HEX
#F4F7FE
RGB
244, 247, 254
N0
HEX
#FFFFFF
RGB
255, 255, 255
Brand Blue
Blue is primary Interactive color. You’ll find blue in primary buttons, tabs, file uploader, and chips.
B400
HEX
#007CFF
RGB
0, 124, 255
B300
HEX
#5BAAFF
RGB
91,170, 255
B200
HEX
#A3CFFF
RGB
163, 207, 255
B100
HEX
#E7F2FF
RGB
231, 242, 255
Green
G500
HEX
#0BAE54
RGB
11, 174, 84
G100
HEX
#E2FBED
RGB
226, 251, 237
Yellow
Y100
HEX
#FEF8D0
RGB
254, 248, 208
Red
R400
HEX
#F15C59
RGB
241, 92, 89
R100
HEX
#FFDFDF
RGB
255, 223, 223
Icon color alias
Visual
Token
Values
IconHighEmphasis
N700
IconLowEmphasis
N400
IconDisabled
N200
IconActivity
B400
IconAlert
R400
IconAnalytic
O400
IconPositive
G500
IconUniqueSellingPoint
T500
IconInvert
N0
Text color alias
Token
Token
Values
High Emphasis Text
TextHighEmphasis
N800
Low Emphasis Text
TextLowEmphasis
N600
Disabled Text
TextDisabled
N400
Activity Text
TextActivity
B400
Alert Text
TextAlert
R400
Analytic Text
TextAnalytic
O500
Positive Text
TextPositive
G500
USP Text
TextUniquesSellingPoint
T500
Invert Text
TextInvert
N0
Technically we have 81 color palettes for many purposes. But with regards to TDS component usages, we only use 14 palettes.
Neutral
N800
HEX
#303135
RGB
48, 49, 53
N700
HEX
#4D4F56
RGB
77, 79, 86
N600
HEX
#71747D
RGB
113, 116, 125
N400
HEX
#AEB2BE
RGB
174, 178, 190
N200
HEX
#D8DCE8
RGB
216, 220, 232
N100
HEX
#F4F7FE
RGB
244, 247, 254
N0
HEX
#FFFFFF
RGB
255, 255, 255
Brand Blue
Blue is primary Interactive color. You’ll find blue in primary buttons, tabs, file uploader, and chips.
B400
HEX
#007CFF
RGB
0, 124, 255
B300
HEX
#5BAAFF
RGB
91,170, 255
B200
HEX
#A3CFFF
RGB
163, 207, 255
B100
HEX
#E7F2FF
RGB
231, 242, 255
Green
G500
HEX
#0BAE54
RGB
11, 174, 84
G100
HEX
#E2FBED
RGB
226, 251, 237
Yellow
Y100
HEX
#FEF8D0
RGB
254, 248, 208
Red
R400
HEX
#F15C59
RGB
241, 92, 89
R100
HEX
#FFDFDF
RGB
255, 223, 223
Icon color alias
Visual
Token
Values
IconHighEmphasis
N700
IconLowEmphasis
N400
IconDisabled
N200
IconActivity
B400
IconAlert
R400
IconAnalytic
O400
IconPositive
G500
IconUniqueSellingPoint
T500
IconInvert
N0
Text color alias
Token
Token
Values
High Emphasis Text
TextHighEmphasis
N800
Low Emphasis Text
TextLowEmphasis
N600
Disabled Text
TextDisabled
N400
Activity Text
TextActivity
B400
Alert Text
TextAlert
R400
Analytic Text
TextAnalytic
O500
Positive Text
TextPositive
G500
USP Text
TextUniquesSellingPoint
T500
Invert Text
TextInvert
N0
Technically we have 81 color palettes for many purposes. But with regards to TDS component usages, we only use 14 palettes.
Neutral
N800
HEX
#303135
RGB
48, 49, 53
N700
HEX
#4D4F56
RGB
77, 79, 86
N600
HEX
#71747D
RGB
113, 116, 125
N400
HEX
#AEB2BE
RGB
174, 178, 190
N200
HEX
#D8DCE8
RGB
216, 220, 232
N100
HEX
#F4F7FE
RGB
244, 247, 254
N0
HEX
#FFFFFF
RGB
255, 255, 255
Brand Blue
Blue is primary Interactive color. You’ll find blue in primary buttons, tabs, file uploader, and chips.
B400
HEX
#007CFF
RGB
0, 124, 255
B300
HEX
#5BAAFF
RGB
91,170, 255
B200
HEX
#A3CFFF
RGB
163, 207, 255
B100
HEX
#E7F2FF
RGB
231, 242, 255
Green
G500
HEX
#0BAE54
RGB
11, 174, 84
G100
HEX
#E2FBED
RGB
226, 251, 237
Yellow
Y100
HEX
#FEF8D0
RGB
254, 248, 208
Red
R400
HEX
#F15C59
RGB
241, 92, 89
R100
HEX
#FFDFDF
RGB
255, 223, 223
Icon color alias
Visual
Token
Values
IconHighEmphasis
N700
IconLowEmphasis
N400
IconDisabled
N200
IconActivity
B400
IconAlert
R400
IconAnalytic
O400
IconPositive
G500
IconUniqueSellingPoint
T500
IconInvert
N0
Text color alias
Token
Token
Values
High Emphasis Text
TextHighEmphasis
N800
Low Emphasis Text
TextLowEmphasis
N600
Disabled Text
TextDisabled
N400
Activity Text
TextActivity
B400
Alert Text
TextAlert
R400
Analytic Text
TextAnalytic
O500
Positive Text
TextPositive
G500
USP Text
TextUniquesSellingPoint
T500
Invert Text
TextInvert
N0
