linkColor 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.
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.
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.
These are our primary brand colors that should be used the majority of the time in branded assets.
$eos-bc-green-500
Use for: primary color, CTA, and active status.
$eos-bc-pine-500
Use for: menu background.
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.
$eos-bc-cerulean-900
Use for: default link color and info status.
$eos-bc-yellow-500
Use for: warning indication.
$eos-bc-red-500
Use for: error or danger indication.
$eos-bc-gray-1000
Use for: default color for text
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;
}
Share your rebranded product to inspire other SUSE developers.
Tell us your name and your products' so that we can get in touch with you:
Thank you for for sharing your product success story with us.
Thank you for helping us improve EOS.