Vuexy is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
We use a subset of all colors to create a smaller color palette for generating color schemes as per bootstrap colors.
Vuexy also provide custom color (brand colors i.e facebook, twitter etc..) support by using
_colors.scss file.
Light neutrals are helpful for offsetting content in light layout for clear and efficient look and are therefore often used as a background/text color for web components.
|
Gray 25
|
HEX
#fcfcfc
|
|
Gray 50
|
HEX
#f3f2f3
|
|
Gray 75
|
HEX
#eeeeef
|
|
Gray 100
|
HEX
#eaeaec
|
|
Gray 200
|
HEX
#e6e6e8
|
|
Gray 300
|
HEX
#c1bfc5
|
|
Gray 400
|
HEX
#acaab1
|
|
Gray 500
|
HEX
#97959e
|
|
Gray 600
|
HEX
#82808b
|
|
Gray 700
|
HEX
#6d6b77
|
|
Gray 800
|
HEX
#595564
|
|
Gray 900
|
HEX
#444050
|
Dark neutrals are helpful for offsetting content in dark layout for clear and efficient look and are therefore often used as a background/text color for web components.
Use *-dark.scss file to Manage dark variables & styles.
|
Gray 25
|
HEX
#33374d
|
|
Gray 50
|
HEX
#3a3d53
|
|
Gray 75
|
HEX
#3d4157
|
|
Gray 100
|
HEX
#535876
|
|
Gray 200
|
HEX
#44485e
|
|
Gray 300
|
HEX
#64667d
|
|
Gray 400
|
HEX
#76778e
|
|
Gray 500
|
HEX
#9293ae
|
|
Gray 600
|
HEX
#9a9ab0
|
|
Gray 700
|
HEX
#acabc1
|
|
Gray 800
|
HEX
#bdbcd3
|
|
Gray 900
|
HEX
#cfcde4
|