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

Edit preferences

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 corporate colors that should be used the majority of the time in branded assets.

Green

$bc-green

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

$bc-blue

Use for: menu background and alternative link color.

500#0D2C40
100#B6C0C6
200#8696A0
300#566B79
400#314C5D
600#002038
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

$bc-cerulean

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

$bc-yellow

Use for: warning indication.

500#FFC107
100#FFECB5
200#FFE083
300#FFD451
400#FFCA2C
600#FFBB06
700#FFB305
800#FFAB04
900#FF9E02

Red

$bc-red

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

$bc-gray

Use for: default color for text and borders

500#969494
100#E0DFDF
200#CBCACA
300#B6B4B4
400#A6A4A4
600#8E8C8C
700#838181
800#797777
900#686565

Orange

$bc-orange

Use for: decoration and graphics.

500#F75C03
100#FDCEB3
200#FBAE81
300#F98D4F
400#F87429
600#F65403
700#F54A02
800#F34102
900#F13001

Violet

$bc-violet

Use for: decoration and graphics.

500#841781
100#DAB9D9
200#C28BC0
300#A95DA7
400#963A94
600#7C1479
700#71116E
800#670D64
900#540751

Monochromatic colors

The monochromatic palette is used to define text and background colors.

White

$bc-white

Use for: main background and text of colored backgrounds.

#FFFFFF

Black

$bc-black

Use for: text color when white fails.

#000000

Implementation and SASS example

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.

When defining color variables, use the variable names starting with bc- as prefix, which stands for "brand color". This will improve consistency across products. Or simply download the colors stylesheet from our repository.

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:

.btn-primary{
  background: $bc-green-500;
  border: 1px solid $bc-green-700;
}

Report an issue or share an idea