Color
There are 12 accent color variables and 7 basic color variables that includes
5 gray gradient. The color variables can be modified at _variable.scss or one
can customize the color variables.
Color for text and background
1. Accent Color
| Color |
#HEX |
SASS variable |
.text-[color] |
.bkgd-[color] |
|
#580C2D |
$accent,beet |
.text-beet |
.bkgd-beet
|
|
#B43D76 |
$accent,acai |
.text-acai |
.bkgd-rose
|
|
#F098A4 |
$accent,rose |
.text-rose |
.bkgd-rose
|
|
#617C2D |
$accent,kale |
.text-kale |
.bkgd-kale
|
|
#89924F |
$accent,avocado |
.text-avocado |
.bkgd-avocado
|
|
#c8dcb7 |
$accent,lettuce |
.text-lettuce |
.bkgd-lettuce
|
|
#EC5B2C |
$accent,tomatoe |
.text-tomatoe |
.bkgd-tomatoe
|
|
#EF993A |
$accent,orange |
.text-orange |
.bkgd-orange
|
|
#f9e753 |
$accent,lemon |
.text-lemon |
.bkgd-lemon
|
|
#2B547B |
$accent,deepwater |
.text-deepwater |
.bkgd-deepwater
|
|
#6CB0DA |
$accent,hydrangea |
.text-hydrangea |
.bkgd-hydrangea
|
|
#C1CFD9 |
$accent,wave |
.text-wave |
.bkgd-wave
|
2. Basic Color
| Color |
#HEX |
SASS variable |
.text-[color] |
.bkgd-[color] |
|
#1E1C1B |
$basic,dark |
.text-dark |
.bkgd-dark
|
|
#F9F7EF |
$basic,mute |
.text-mute |
.bkgd-mute
|
|
#D5D4CF |
$basic,main-gray |
|
.bkgd-gray
|
|
#E7E6E0 |
$light-gray |
|
|
|
#858482 |
$dark-gray |
|
|
|
#414040 |
$extra-dark-gray |
|
|
|
#F8E9D9 |
$peach |
|
|