The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

info
Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.
close
SUSE product brand logotype

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.


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.

linkPrimary 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

linkSecondary 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

linkImplementation 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: