Color shading system
Each color has its own shading between 100-900. The 500 color is the main and default color to use in elements/assets. The remaining shades must be used as accent colors.
Colors
This color palette comprises the primary and accent colors to be used in all SUSE applications. They’ve been designed to work harmoniously with each other.
Primary colors
These are our primary brand colors that should be used the majority of the time in branded assets.
Green
$eos-bc-green-500
Use for: primary color, CTA, and active status.
100
#E4F6EE
500
#30BA78
900
#139448
Pine
$eos-bc-pine-500
Use for: menu background.
500
#0C322C
Secondary colors
The secondary colors are used to complement the primary colors. They should be used in conjunction with the primary colors, but should not overpower or distort the color perception of the brand — which is Green.
Cerulean
$eos-bc-cerulean-900
Use for: default link color and info status.
100
#B3E8F6
500
#00B2E2
900
#008ACF
Yellow
$eos-bc-yellow-500
Use for: warning indication.
100
#FFECB5
500
#FFC107
900
#FF9E02
Red
$eos-bc-red-500
Use for: error or danger indication.
100
#F5C2C7
500
#DC3545
900
#C5161F
Gray
$eos-bc-gray-1000
Use for: default color for text
500
#969494
300
#B6B4B4
100
#E0DFDF
50
#F2F2F2
700
#797777
900
#686565
1000
#141823
Implementation and SASS example
Example of usage:
Let's say we are creating a new primary element that requires darker borders. We should use the 500 shade of the "Green" color for the background, and the shade 900 of the same color for the borders:
.my-class {
background: $eos-bc-green-500;
border: 1px solid $eos-bc-green-900;
}
