Skip to main content

Color System

Modifying the project's default color scheme

Color System is a set of colors that represents a specific visual spectrum.

Default Color Palette

BLUE
Copy to clipboard
BLUE100
#D2E8FA
Copy to clipboard
BLUE200
#A8CFF5
Copy to clipboard
BLUE300
#77A9E2
Copy to clipboard
BLUE400
#5183C5
Copy to clipboard
BLUE500
#22539F
Copy to clipboard
BLUE600
#184088
Copy to clipboard
BLUE700
#112F72
Copy to clipboard
BLUE800
#0A215C
Copy to clipboard
BLUE900
#06164C
GREEN
Copy to clipboard
GREEN100
#E6FBE4
Copy to clipboard
GREEN200
#CAF8CA
Copy to clipboard
GREEN300
#A9EBAF
Copy to clipboard
GREEN400
#8CD79A
Copy to clipboard
GREEN500
#65BD7E
Copy to clipboard
GREEN600
#49A26B
Copy to clipboard
GREEN700
#32885B
Copy to clipboard
GREEN800
#206D4C
Copy to clipboard
GREEN900
#135A43
RED
Copy to clipboard
RED100
#FDE8DA
Copy to clipboard
RED200
#FCCBB6
Copy to clipboard
RED300
#F7A690
Copy to clipboard
RED400
#F08372
Copy to clipboard
RED500
#E74E46
Copy to clipboard
RED600
#C63338
Copy to clipboard
RED700
#A62332
Copy to clipboard
RED800
#85162C
Copy to clipboard
RED900
#6E0D29
YELLOW
Copy to clipboard
YELLOW100
#FEF4CB
Copy to clipboard
YELLOW200
#FDE699
Copy to clipboard
YELLOW300
#FAD365
Copy to clipboard
YELLOW400
#F5BF3F
Copy to clipboard
YELLOW500
#EFA103
Copy to clipboard
YELLOW600
#CD8302
Copy to clipboard
YELLOW700
#AC6801
Copy to clipboard
YELLOW800
#8A4F00
Copy to clipboard
YELLOW900
#723D00
GREY
Copy to clipboard
GREY100
#F7F7F7
Copy to clipboard
GREY200
#EFEFEF
Copy to clipboard
GREY300
#D1D1D1
Copy to clipboard
GREY400
#A3A3A3
Copy to clipboard
GREY500
#676767
Copy to clipboard
GREY600
#584B4C
Copy to clipboard
GREY700
#4A3337
Copy to clipboard
GREY800
#3B2027
Copy to clipboard
GREY900
#31131E

Example

Docusaurus green and Facebook blue are my favorite colors.

I can write Markdown alongside my JSX!