Colors

Color tokens help communicate the hierarchy, and highlight or emphasize the importance of the content.

Color pallete

The theme.colors palette consists of values from 100 to 900, eg: primary-600.

Base

blue-100

#ECFCFD

blue-200

#B7EEF5

blue-300

#84DBEB

blue-400

#54C4DE

blue-500

#25A8D0

blue-600

#2282A8

blue-700

#1E5F82

blue-800

#18415D

blue-900

#102739

gray-100

#EEEEF0

gray-200

#D3D2D6

gray-300

#BAB6BC

gray-400

#A19BA2

gray-500

#887F87

gray-600

#6F676C

gray-700

#554F52

gray-800

#3C3738

gray-900

#222020

green-100

#EAF3E2

green-200

#CBE3B5

green-300

#ADD585

green-400

#91C854

green-500

#78BE20

green-600

#41A017

green-700

#158110

green-800

#0A601B

green-900

#053E1F

orange-100

#FFF5EB

orange-200

#FFDAB2

orange-300

#FFC170

orange-400

#FFAB48

orange-500

#FC961E

orange-600

#C86F21

orange-700

#974F20

orange-800

#6A351C

orange-900

#401F15

purple-100

#E9D0FF

purple-200

#C48FF3

purple-300

#AD63F0

purple-400

#9040E6

purple-500

#7808CF

purple-600

#6C0CAE

purple-700

#570887

purple-800

#480870

purple-900

#350C52

red-100

#FEEDEE

red-200

#FAB9BC

red-300

#F38789

red-400

#EA5D58

red-500

#DF382B

red-600

#B42A27

red-700

#8B2226

red-800

#641B21

red-900

#3E1219

teal-100

#DBEDEA

teal-200

#A5D1CB

teal-300

#6EB4AD

teal-400

#379590

teal-500

#007574

teal-600

#035F64

teal-700

#044C53

teal-800

#063A44

teal-900

#062B35

violet-100

#FBE9FF

violet-200

#FADCFF

violet-300

#F6BDFF

violet-400

#D078DA

violet-500

#B92ECB

violet-600

#9A21AA

violet-700

#791186

violet-800

#4E1155

violet-900

#350D3A

yellow-100

#FFF8E2

yellow-200

#FFEBAF

yellow-300

#FEE07D

yellow-400

#FCD64C

yellow-500

#F8CC1C

yellow-600

#C9A21B

yellow-700

#9C7B18

yellow-800

#705613

yellow-900

#46350D

Semantic

primary-100

#EAF3E2

primary-200

#CBE3B5

primary-300

#ADD585

primary-600

#41A017

primary-700

#158110

primary-800

#0A601B

primary-900

#053E1F

secondary-100

#DBEDEA

secondary-200

#A5D1CB

secondary-300

#6EB4AD

secondary-600

#035F64

secondary-700

#044C53

secondary-800

#063A44

secondary-900

#062B35

tertiary-100

#E9D0FF

tertiary-200

#C48FF3

tertiary-300

#AD63F0

tertiary-600

#6C0CAE

tertiary-700

#570887

tertiary-800

#480870

tertiary-900

#350C52

critical-100

#FEEDEE

critical-200

#FAB9BC

critical-300

#F38789

critical-600

#B42A27

critical-700

#8B2226

critical-800

#641B21

critical-900

#3E1219

info-100

#ECFCFD

info-200

#B7EEF5

info-300

#84DBEB

info-600

#2282A8

info-700

#1E5F82

info-800

#18415D

info-900

#102739

warning-100

#FFF8E2

warning-200

#FFEBAF

warning-300

#FEE07D

warning-500

#F8CC1C

warning-600

#C9A21B

warning-700

#9C7B18

warning-800

#705613

neutral-100

#EEEEF0

neutral-200

#D3D2D6

neutral-300

#BAB6BC

neutral-700

#554F52

neutral-800

#3C3738

neutral-900

#222020

Product

product-facebook

#3C5A96

product-google

#D92929

product-linkedin

#1178B3

product-pinterest

#BB0F23

product-twitter

#2AA3EF

product-youtube

#FC0D1B

Alphas

black-alpha-100

rgba(0, 0, 0, 0.04)

black-alpha-200

rgba(0, 0, 0, 0.08)

black-alpha-300

rgba(0, 0, 0, 0.16)

black-alpha-400

rgba(0, 0, 0, 0.32)

black-alpha-500

rgba(0, 0, 0, 0.40)

black-alpha-600

rgba(0, 0, 0, 0.56)

black-alpha-700

rgba(0, 0, 0, 0.64)

black-alpha-800

rgba(0, 0, 0, 0.72)

black-alpha-900

rgba(0, 0, 0, 0.80)

next Typography