Color

Notes

Here is the Figma file with these colors and their styles. You can also find the styles in the "Color Scheme" library in any file in the Catylist team on Figma.

Color Scales

These are the foundational colors of our interfaces.

Gray

gray-50

#FAFAFA

gray-100

#F4F4F5

gray-200

#E4E4E7

gray-300

#D4D4D8

gray-400

#A1A1AA

gray-500

#71717A

gray-600

#52525B

gray-700

#3F3F46

gray-800

#27272A

gray-900

#18181B

Blue

blue-50

#EBF5FF

blue-100

#C5E5FF

blue-200

#97CEFF

blue-300

#6AB7FF

blue-400

#409FFF

blue-500

#1D89FC

blue-600

#096AD9

blue-700

#0051B3

blue-800

#003584

blue-900

#001D4C

Green

green-50

#F2FFF0

green-100

#E0F5DC

green-200

#B2E8AC

green-300

#85DB7F

green-400

#5BCF57

green-500

#33C33F

green-600

#219C25

green-700

#137519

green-800

#094F10

green-900

#042909

Red

red-50

#FFF4F0

red-100

#FFDACC

red-200

#FFB9A3

red-300

#FF957A

red-400

#FA6C50

red-500

#ED4127

red-600

#C72816

red-700

#A1140A

red-800

#7A0501

red-900

#540000

Purple

purple-50

#F9F1FF

purple-100

#EFDBFF

purple-200

#D3ADF7

purple-300

#B380EA

purple-400

#9356DE

purple-500

#7431D2

purple-600

#541EAC

purple-700

#3B1187

purple-800

#240862

purple-900

#13033C

Yellow

yellow-50

#FFFDE6

yellow-100

#FFF7B8

yellow-200

#FFF08F

yellow-300

#FFE666

yellow-400

#FFDB3D

yellow-500

#FAC814

yellow-600

#D4A006

yellow-700

#AD7900

yellow-800

#875A00

yellow-900

#613C00

Orange

orange-50

#FFF6E6

orange-100

#FFE3BA

orange-200

#FFCF91

orange-300

#FFB969

orange-400

#FF9F40

orange-500

#FA8016

orange-600

#D46108

orange-700

#AD4500

orange-800

#873200

orange-900

#612000