Colors

Grays

Default palette for texts, backgrounds and borders

gray-50

--color-gray-50

#FDFCFA

gray-100

--color-gray-100

#FAF8F6

gray-150

--color-gray-150

#F5F2F0

gray-200

--color-gray-200

#EFEBE8

gray-250

--color-gray-250

#E8E3DF

gray-300

--color-gray-300

#DFD9D5

gray-350

--color-gray-350

#D4CEC9

gray-400

--color-gray-400

#C8C1BC

gray-450

--color-gray-450

#BBB4AE

gray-500

--color-gray-500

#ADA59E

gray-550

--color-gray-550

#9D958D

gray-600

--color-gray-600

#8C837C

gray-650

--color-gray-650

#7B7169

gray-700

--color-gray-700

#685E56

gray-750

--color-gray-750

#554B42

gray-800

--color-gray-800

#41372E

gray-850

--color-gray-850

#2D231B

gray-900

--color-gray-900

#191007

gray-950

--color-gray-950

#060200

Accents

For informational situations. Do not use it as only indicator

accent-red

--color-accent-red

#E12B2B

accent-orange

--color-accent-orange

#FA9248

accent-yellow

--color-accent-yellow

#FFDE75

accent-green

--color-accent-green

#4DA764

accent-blue

--color-accent-blue

#2B71DB

accent-light-red

--color-accent-light-red

#FFF0F0

accent-light-orange

--color-accent-light-orange

#FFEADB

accent-light-yellow

--color-accent-light-yellow

#FFF5D3

accent-light-green

--color-accent-light-green

#E1FBE7

accent-light-blue

--color-accent-light-blue

#EDF4FF

accent-dark-red

--color-accent-dark-red

#8A1717

accent-dark-orange

--color-accent-dark-orange

#673001

accent-dark-yellow

--color-accent-dark-yellow

#514517

accent-dark-green

--color-accent-dark-green

#05621E

accent-dark-blue

--color-accent-dark-blue

#143D7B

Brand

For branding related topics. Do not use it for "warning" purpose

brand-1

--color-brand-1

#FFEEDD

brand-2

--color-brand-2

#FFD9B3

brand-3

--color-brand-3

#FFB366

brand-4

--color-brand-4

#FF9124

brand-5

--color-brand-5

#E57300

brand-6

--color-brand-6

#8A4500

brand-7

--color-brand-7

#572B00