Color Schemes
Main Color Scheme
- Primary
#1e99eb - Grey
#6d818e - Success
#85b257 - Warning
#c99b40 - Danger
#c46345
Primary Brand Color Spectrum
- #020c13
- #052438
- #083c5e
- #0b5383
- #1077bc
- #1e99eb
- #56b3f0
- #7cc4f4
- #8eccf5
- #c7e6fa
- #ecf7fd
Notice:
The base color is #1e99eb
. Naming convention should be $primary-color
, $primary-color-dark-[percentage]
and $primary-color-light-[percentage]
Grey Color Spectrum
- #08090b
- #181d21
- #293137
- #38444c
- #51626d
- #6d818e
- #91a0aa
- #a9b5bd
- #b5bfc6
- #dadfe3
- #f2f4f5
Notice:
The base color is #6d818e
. Naming convention should be $grey
, $grey-dark-[percentage]
and $grey-light-[percentage]
Success Color Spectrum
- #1f2a13
- #334620
- #47622d
- #5c7e3a
- #709a47
- #85b257
- #99bf73
- #adcc8f
- #c2d8ab
- #d6e5c7
- #ebf2e3
Notice:
The base color is #85b257
. Naming convention should be $success-color
, $success-color-dark-[percentage]
and $success-color-light-[percentage]
Warning Color Spectrum
- #30240d
- #503d16
- #6f551f
- #8f6d28
- #af8531
- #c99b40
- #d2ac60
- #dbbd80
- #e4cda0
- #eddebf
- #f6eedf
Notice:
The base color is #c99b40
. Naming convention should be $warning-color
, $warning-color-dark-[percentage]
and $warning-color-light-[percentage]
Danger Color Spectrum
- #2f160f
- #4e2518
- #6d3422
- #8c422c
- #ab5136
- #c46345
- #cd7b62
- #d89783
- #e2b1a2
- #ebcbc1
- #f5e5e0
Notice:
The base color is #c46345
. Naming convention should be $danger-color
, $danger-color-dark-[percentage]
and $danger-color-light-[percentage]