The openSUSE Design System 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 openSUSE 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

$bc-green

Use for: primary color, CTA, and active status.

500#73ba25
100#b9e787
200#a8e169
300#97db4b
400#85d52d
600#69aa22
700#5f991f
800#54881b
900#4a7718

Blue

$bc-blue

Use for: menu background and alternative link color.

500#173f4f
100#257eb7
200#1f6999
300#19557b
400#13405e
600#0a2333
700#081b27
800#05121a
900#03090d

Turquoise

$bc-turquoise

Use for: decoration and graphics.

500#35b9ab
100#9be2db
200#7fdad1
300#63d2c7
400#47cabc
600#2d9d91
700#258278
800#1d665e
900#154a44

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#21A4DF
100#9ed7f1
200#7fcaec
300#5fbee8
400#40b1e3
600#1c8dc1
700#1776a1
800#136082
900#0e4963

Yellow

$bc-yellow

Use for: warning indication.

500#ffc107
100#ffe596
200#ffdc72
300#ffd34e
400#ffca2b
600#fcaf17
700#eea320
800#ec9126
900#ea8024

Red

$bc-red

Use for: error or danger indication.

500#dc3545
100#f1afb5
200#ec9099
300#e7727d
400#e15361
600#ca2333
700#ac1e2b
800#8d1924
900#6f131c

Gray

$bc-gray

Use for: default color for text and borders

500#868e96
100#d2d5d8
200#bfc4c8
300#acb2b7
400#99a0a7
600#737c85
700#636a72
800#52585f
900#42474c

Orange

$bc-orange

Use for: decoration and graphics.

500#fe7f2d
100#ffd6bb
200#ffc098
300#feaa74
400#fe9551
600#fe6909
700#e35a01
800#bf4b01
900#9b3d01

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;
}