Skip to main content

Color palette

The color palette in our design system provides a comprehensive guide to the use of colors, ensuring consistency and accessibility across all components, from background and text colors to chart series and status indicators.

All colors are provided as custom properties. To access them the var() CSS function can be called with the color's name:

.some-example {
  background-color: var(--theme-color-primary);
}

Background colors​

Use “background colors” on non-interactive backgrounds like screen areas. Background colors are solid without opacity. The color-0 is an exception, it is transparent.

Component interaction colors​

Component & interaction colors are used on interactive elements that often come with hover, active and selected states like buttons, toggle buttons, switches, cards, etc. Primary color is equal to brand color, often used for primary buttons or selected elements. “alt” means alternative and is used rarely, e.g. in date picker component to distinguish between selection start/end and the days in the range between.

“color-component-1” are used on interactive elements with a visible fill like cards. They are semi-transparent to work on most background colors.

Following ghost colors are used on elements with an invisible background but visible hover, active and selected states. “...-ghost-alt...” colors are used on alternating table grid patterns. These colors a semi-transparent and therefore work on most background colors.

Following colors are widely solid, without opacity and are therefore used only on a specific background color or are used in combination with a border (e.g. outline button, input fields)

Following colors are only used in very specific components like date picker calendar

Status color​

Status color are made to represent the different statuses. We support the following states:

  • Alarm (error, invalid, danger)
  • Critical (status between alarm and warning)
  • Warning
  • Success (valid, ok, good)
  • Info (information)
  • Neutral All colors are available for interaction states “hover” and “active”, each status color has a matching “contrast” color for placing text and icons on such a colored background. Each status color has furthermore a semi-transparent color that can be used on more subtle colored backgrounds.
info

Please note: Don’t use status colors for texts as they would not meet the minimum required contrast in some constellations. Use the color for icons or on status indictors or backgrounds instead. There is a special alarm text color that can be used for texts, see “text colors”.

Text colors​

Text colors are used on text and icons.

  • “color-contrast-text” is the darkest/lightest possible color and should be used in situations where the background color is hard to control (e.g. on custom colors)
  • “color-std-text” is used as default for texts and icons
  • “color-soft-text” text is used for secondary texts, sub titles, labels, hints or placeholder texts
  • “color-weak-text” is used for disabled texts
  • “color-alarm-text” is used for alarm, error, danger texts
  • The “color-inv...” texts are rarely used. They are used in “inverted” situations e.g. text on light background in dark mode.

Border colors​

  • color-contrast-bdr is the darkest/lightest possible color and should be used in situations where the background color is hard to control (e.g. on custom colors)
  • color-hard-bdr is used whenever the border should be a solid, non-transparent color
  • color-std-bdr has a strong appearance and is used e.g. on input components
  • color-soft-bdr is more subtle and used on cards and similar components or as separators
  • color-weak-bdr is even more subtle and used for subtle separations of e.g. entire screen areas
  • color-x-weak-bdr can be used for very subtle separations or content structuring

Effect colors​

Effect colors are used for shadows, lightbox effects or gradients.

  • color-lightbox can be used for lightbox effects behind modals in combination with a background blur effect
  • color-backdrop is used for overlays in combination with background blur effect to provide a very subtle ranslucent effect
  • The gradient colors are used for brand gradient effects like in the big numbers of the html error pages

Chart infrastructure colors​

Following colors can be used to color the infrastructural elements in charting components

  • axes = x and y axis lines
  • ticks = small separations line with value labels
  • grid-lines = horizontal/vertical lines behind the chart
  • grid-fill = background of charting area
  • tooltip = background for chart tooltip
  • tooltip-bdr = border for chart tooltip

Chart data colors​

Use the following colors for data inside of charts. The colors are only proposals and not mandatory to use. Each color has a related ...-40 color, which means 40% opacity. You can use these colors for comparisons like current year vs. last year, or actual value vs. benchmark value.

Color series for charts​

For easily distinguishable data series, we recommend the following color sequence.