Primary

Primary

Primary

System/Grays

Neutrals/Grays are foundational colors that will be used your projects. They are used across various and most UI elements such as text, borders, backgrounds, input fields, states and much more.

900

#0F0F0F

800

#1C1C1C

700

#333333

600

#595959

500

#757575

400

#9E9E9E

300

#ADADAD

200

#CCCCCC

100

#E6E6E6

50

#F5F5F5

25

#FAFAFA

System/Reds

You can use red for error messages, notifications, states and badges to showcase urgency.

900

#9A1425

800

#B3172B

700

#CC1932

600

#E61B38

500

#FF0A0A

400

#FF5049

300

#FF7F78

200

#FFAAA6

100

#FFD5D3

50

#FFEAE8

25

#FFF5F4

System/Greens

You can use green for success messages, notifications, states and badges to showcase completion.

900

#2B9662

800

#2B9662

700

#33AB70

600

#38C17F

500

#3DD68C

400

#6FDFA3

300

#96E7BB

200

#BAEED1

100

#DDF7E8

50

#EFFBF4

25

#F7FDFA

System/Blues

You can use blue as your brand color as well as accent colors across your main buttons, CTAs, toggles, badges to create contrast and highlight the importance of these elements.

900

#1D3A93

800

#2243AB

700

#254DC4

600

#2A56DD

500

#2F60F5

400

#5A80F8

300

#85A0FB

200

#AEBFFC

100

#D6DFFE

50

#EAEFFE

25

#F5F7FF

System/Oranges

You can use orange for warning messages, notifications, states and badges to show urgency to take action.

900

#99400E

800

#B34B0E

700

#CC550F

600

#E5600C

500

#FF6A0D

400

#FF894E

300

#FFA77D

200

#FFC5A9

100

#FFE2D4

50

#FFF1E9

25

#FFF8F5

Secondary

Secondary

Secondary

Azure Radiance

#007AFF

950

#0e315d

900

#0d519b

800

#085dc5

700

#007aff

600

#068eff

500

#1eacff

400

#48cbff

300

#83dfff

200

#b5eaff

100

#d6f2ff

50

#edfaff

Dodger Blue

#4A95FF

950

#152256

900

#1a348e

800

#1a348e

700

#1744de

600

#1f5af1

500

#357afc

400

#4a95ff

300

#90c1ff

200

#bdd9ff

100

#dae9ff

50

#eef5ff

Cerulean Blue

#1C4DED

950

#162055

900

#1d308b

800

#1c33b1

700

#1b3eda

600

#1c4ded

500

#3972f8

400

#5e99fc

300

#92bdfe

200

#bed6ff

100

#dbe7fe

50

#eff5ff

Blue Marguerite

#6666E3

950

#231f47

900

#39357a

800

#423a99

700

#5145bd

600

#5e54d7

500

#6666e3

400

#8b92ee

300

#adb7f4

200

#ccd4f9

100

#e3e7fc

50

#eff3fe

Fuchsia Blue

#7155E0

950

#24175e

900

#3d278b

800

#492ea9

700

#5737ca

600

#7155e0

500

#7b69e9

400

#9c94f1

300

#bebbf7

200

#d9d9fb

100

#ebebfc

50

#f4f4fe

Amethyst

#A856F0

950

#3d0b60

900

#592083

800

#6d26a3

700

#8129c7

600

#963ae3

500

#a856f0

400

#c289f7

300

#d9b7fb

200

#ead7fd

100

#f3e9fe

50

#faf5ff

French Rose

#FF4083

950

#580015

900

#8f0c2e

800

#ad0732

700

#d1053d

600

#f01255

500

#ff4083

400

#ff63a1

300

#ff9fc7

200

#ffcae1

100

#fee5ef

50

#fef1f6

Red Ribbon

#F7004A

950

#57001b

900

#99023c

800

#b4003e

700

#d70040

600

#f7004a

500

#ff245e

400

#ff5d83

300

#ff97ad

200

#ffc6d3

100

#ffe0e5

50

#ffeff1

Cinnabar

#EB171E

950

#4a0507

900

#871519

800

#a31116

700

#c60f15

600

#eb171e

500

#fd363d

400

#ff666b

300

#ff9ea1

200

#ffc6c8

100

#ffe0e1

50

#fff1f1

Bamboo

#D66202

950

#461d04

900

#823d0c

800

#a2490a

700

#d66202

600

#f67c00

500

#ff9909

400

#ffb231

300

#ffd26c

200

#ffe6a5

100

#fff4d3

50

#fffaec

Sun

#ffb030

950

#461302

900

#7a290d

800

#94310c

700

#b74106

600

#dd6102

500

#f98607

400

#ffb030

300

#ffc24a

200

#ffdb88

100

#ffeec6

50

#fff9eb

Amber

#fdc007

950

#7c420b

900

#7c420b

800

#96500a

700

#ba6903

600

#e09400

500

#fdc007

400

#ffde1d

300

#ffed47

200

#fff786

100

#fffbc5

50

#fffeea

Puerto Rico

#42cfb1

950

#062d29

900

#164b42

800

#155a50

700

#147162

600

#148d78

500

#1cb093

400

#42cfb1

300

#65e3c4

200

#9ef1da

100

#cef9ec

50

#f1fcf9

Breaker Bay

#57a099

950

#102223

900

#233e3d

800

#264947

700

#2b5a57

600

#326f6b

500

#418b85

400

#57a099

300

#85c3bb

200

#b3dcd5

100

#d9eeeb

50

#f4f9f8