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 (100, 200, etc.) 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.
500#00C081
100#E0F7F0
200#B3ECD9
300#4DD3A7
400#26C994
600#00BA79
700#00B26E
800#00AA64
900#009C51
Blue
$eos-bc-blue-500
Use for: menu background.
500#0D2C40
100#B6C0C6
200#8696A0
300#566B79
400#314C5D
600#0B273A
700#092132
800#071B2A
900#03101C
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.
500#00B2E2
100#B3E8F6
200#80D9F1
300#4DC9EB
400#26BEE6
600#00ABDF
700#00A2DA
800#0099D6
900#008ACF
Yellow
$eos-bc-yellow-500
Use for: warning indication.
500#FFC107
100#FFECB5
200#FFE083
300#FFD451
400#FFCA2C
600#FFBB06
700#FFB305
800#FFAB04
900#FF9E02
Red
$eos-bc-red-500
Use for: error or danger indication.
500#DC3545
100#F5C2C7
200#EE9AA2
300#E7727D
400#E15361
600#D8303E
700#D32836
800#CE222E
900#C5161F
Gray
$eos-bc-gray-900
Use for: default color for text
500#969494
50#EDEFF0
100#E0DFDF
200#CBCACA
300#B6B4B4
400#A6A4A4
600#8E8C8C
700#838181
800#797777
900#686565
1000#141823
Orange
$eos-bc-orange-500
Use for: decoration and graphics.
500#F75C03
100#FDCEB3
200#FBAE81
300#F98D4F
400#F87429
600#F65403
700#F54A02
800#F34102
900#F13001
Violet
$eos-bc-violet-500
Use for: decoration and graphics.
500#841781
100#DAB9D9
200#C28BC0
300#A95DA7
400#963A94
600#7C1479
700#71116E
800#670D64
900#540751
Implementation and SASS example
Example of usage:
Let's say we are creating a new primary button that requires darker borders. We should use the 500 shade of the "Green" color for the background, and the shade 700 of the same color for the borders:
.my-class{
background: $eos-bc-green-500;
border: 1px solid $eos-bc-green-700;
}
