Color

Typography

Use the following for all typography across digital products.

#595959

Grey-12

Secondary text

Token Name

Global Color Grey-12

#0f1a38

Brand-10

Primary text

Token Name

Color.Brand.10

Actions

#295cad

Token Name

brand-60

Neutrals

#ffffff

White

#FFFFFF

Token Name

Global Color White

#f8f8f8

Grey-90

#E6E6E6

Token Name

Global Color Grey-90

#f2f3f3

Grey-80

#CCCCCC

Token Name

Global Color Grey-80

#e4e7e7

Grey-70

#B3B3B3

Token Name

Global Color Grey-70

#cacece

Grey-60

#999999

Token Name

Global Color Grey-60

#afb6b6

Grey-50

#808080

Token Name

Global Color Grey-50

#959d9d

Grey-40

#666666

Token Name

Global Color Grey-40

#788383

Grey-30

#4D4D4D

Token Name

Global Color Grey-30

#626a6a

Grey-20

#333333

Token Name

Global Color Grey-20

#595959

Grey-12

Secondary text

Token Name

Global Color Grey-12

#3a3a3a

Grey-10

#1A1A1A

Token Name

Global Color Grey-10

#2c2c2c

Grey-8

#141414

Token Name

Global Color Grey-8

#111111

Grey-6

#0F0F0F

Token Name

Global Color Grey-6

#000000

Black

#000000

Token Name

Global Color Black

Feedback / Semantic

These colors are chosen to convey information or intent, making it easier for end users to understand meaning in the visual language of a product.

#0a7f00

Success 10

Token Name

success-10

Use

Success text / icon

#8dc881

Success 20

Token Name

success-20

Use

#e2f5e0

Success 30

Token Name

success-30

Use

Success background

#c9601c

Warning 10

Token Name

warning-10

Use

Warning text / icon

#f0a371

Warning 20

Token Name

warning-20

Use

#fbeee6

Warning 30

Token Name

warning-30

Use

Warning background

#ad0000

Danger 10

Token Name

danger-10

Use

Error text / icon

#dd9090

Danger 20

Token Name

danger-20

Use

#fcdfdf

Danger 30

Token Name

danger-30

Use

Error background

#007e73

Generic 10

Token Name

generic-10

Use

Information text / icon

#8ad0ca

Generic 20

Token Name

generic-20

Use

#e8f8f7

Generic 30

Token Name

generic-30

Use

Information background

Data Visualization

Color plays a pivotal role in data visualization, as it can convey information, emphasize patterns, and create visual hierarchy. Careful selection and application of colors can enhance the clarity and impact of data representations, making complex information more accessible and engaging to the audience.

🔗 View Data Viz Colors