UI colors¶
Note: The documented colors are part of the Siemens branding and cannot be used for none Siemens applications. The color definitions are not part of the OSS package. Element comes with a default theme that is not part of the Siemens branding. The default theme is not documented.
Colors are a foundational aspect of any user interface. Maintaining consistent and engaging UIs requires specific color usage guidelines. To address this challenge, our system uses a combination of semantic naming and a layer of abstraction in both our designs and code.
Application of the color palette brings a unified and consistent experience to our products and interfaces. The theme includes a variety of solid colors and gradients to ensure that a consistent look is carried through any application. For example, action, base, and status colors are all strategically used to communicate different actions and content throughout the experience.
Element supports two modes: light and dark. Color variables use the same
semantic naming in both modes.
For a detailed explanation on how dark mode is implemented and how to implement dark mode for applications and custom components, see here.
Tokens¶
Color tokens describe the semantic usage of primitives in a given context. More specifically, semantic colors act as an intermediary level of specificity, between the raw value of colors in the base palette and the usage of those colors in specific components. There can be various levels of semantic hierarchies, although we should strive to keep these as simple as possible.
Naming colors semantically has two benefits:
- It helps designers and developers decide what color to use.
- It makes our color system more efficient and flexible.
The following categories are defined in our system:
UI¶
UI colors are used on structural properties and icons and provide good contrast when used over any background.
| Value light | Value dark | Token | Use | Associated color - light | Associated color - dark |
|---|---|---|---|---|---|
$element-ui-0 |
Logo, selected (active) elements | $si-ref-color-main-interactive-blue-700 |
$si-ref-color-main-brand-interactive-coral |
||
$element-ui-0-hover |
Selected/active (ui-0) + hover | $si-ref-color-main-brand-teal |
$si-ref-color-main-bold-green-400 |
||
$element-ui-1 |
Primary icons | $si-ref-color-main-deep-blue-900 |
$si-ref-color-main-brand-white |
||
$element-ui-2 |
Secondary icons | $si-ref-color-main-deep-blue-600 |
$si-ref-color-main-deep-blue-400 |
||
$element-ui-3 |
Disabled | $si-ref-color-main-deep-blue-400 |
$si-ref-color-main-deep-blue-600 |
||
$element-ui-4 |
Borders | $si-ref-color-main-deep-blue-100 |
$si-ref-color-main-deep-blue-650 |
||
$element-ui-5 |
Inverse | $si-ref-color-main-brand-white |
$si-ref-color-main-deep-blue-800 |
||
$element-ui-6 |
Shadows | $si-ref-color-main-brand-black |
$si-ref-color-main-brand-black |
Base¶
Base colors are used as backgrounds of containers.
| Value light | Value dark | Token | Use | Associated color - light | Associated color - dark |
|---|---|---|---|---|---|
$element-base-0 |
Page background | $si-ref-color-main-sand-200 |
$si-ref-color-main-deep-blue-900 |
||
$element-base-1 |
Header, navigation, card, table, tree, menu background | $si-ref-color-main-brand-white |
$si-ref-color-main-deep-blue-800 |
||
$element-base-1-hover |
Hover on base-1 backgrounds, like table, tree, or menu | $si-ref-color-main-sand-400 |
$si-ref-color-main-deep-blue-750 |
||
$element-base-1-selected |
Selected on base-1 backgrounds, like table, tree, or menu | $si-ref-color-main-sand-500 |
$si-ref-color-main-deep-blue-700 |
||
$element-base-2 |
Page background with higher contrast pages in dark mode | $si-ref-color-main-brand-white |
$si-ref-color-main-deep-blue-900 |
||
$element-base-3 |
Background that works on base-0 and base-1 with elevation | $si-ref-color-main-brand-white |
$si-ref-color-main-deep-blue-775 |
||
$element-base-4 |
Elements placed above base-1, implying a higher elevation | $si-ref-color-main-sand-300 |
$si-ref-color-main-deep-blue-875 |
||
$element-base-information |
Informational component background for e.g. badges | $si-ref-color-main-blue-100 |
$si-ref-color-main-blue-900 |
||
$element-base-success |
Success component background for e.g. badges | $si-ref-color-main-green-100 |
$si-ref-color-main-green-900 |
||
$element-base-caution |
Caution component background for e.g. badges | $si-ref-color-main-yellow-100 |
$si-ref-color-main-yellow-900 |
||
$element-base-warning |
Warning component background for e.g. badges | $si-ref-color-main-orange-100 |
$si-ref-color-main-orange-900 |
||
$element-base-danger |
Danger component background for e.g. badges | $si-ref-color-main-red-100 |
$si-ref-color-main-red-900 |
||
$element-base-critical |
Critical component background for e.g. status | $si-ref-color-data-orchid-100 |
$si-ref-color-data-orchid-900 |
||
$element-base-translucent-1 |
Translucent, e.g. backdrop | rgba($si-ref-color-main-brand-black, 0.3) |
rgba($si-ref-color-main-brand-black, 0.7) |
||
$element-base-translucent-2 |
Slightly translucent background, e.g. toasts | rgba($si-ref-color-main-deep-blue-900, 0.88) |
rgba($si-ref-color-main-brand-white, 0.88) |
Actions¶
Action colors are used to indicate actions that users can perform.
| Value light | Value dark | Token | Use | Associated color - light | Associated color - dark |
|---|---|---|---|---|---|
$element-action-primary |
Primary interaction | $si-ref-color-main-interactive-blue-700 |
$si-ref-color-main-brand-interactive-coral |
||
$element-action-primary-hover |
Primary action on hover | $si-ref-color-main-brand-teal |
$si-ref-color-main-bold-green-400 |
||
$element-action-primary-text |
Primary text color | $si-ref-color-main-brand-white |
$si-ref-color-main-deep-blue-900 |
||
$element-action-secondary |
Secondary interaction | transparent |
transparent |
||
$element-action-secondary-hover |
Secondary interaction on hover | $si-ref-color-main-bold-green-100 |
$si-ref-color-main-interactive-blue-900 |
||
$element-action-secondary-text |
Secondary text color | $si-ref-color-main-interactive-blue-700 |
$si-ref-color-main-brand-interactive-coral |
||
$element-action-secondary-text-hover |
Secondary text hover color | $si-ref-color-main-brand-teal-90 |
$si-ref-color-main-bold-green-400 |
||
$element-action-secondary-border |
Secondary border color | $si-ref-color-main-interactive-blue-700 |
$si-ref-color-main-brand-interactive-coral |
||
$element-action-secondary-border-hover |
Secondary border hover color | $si-ref-color-main-brand-teal-90 |
$si-ref-color-main-bold-green-400 |
||
$element-action-secondary-warning |
Secondary warning text/border | $si-ref-color-main-orange-700 |
$si-ref-color-main-orange-300 |
||
$element-action-secondary-danger |
Secondary danger text/border | $si-ref-color-main-red-500 |
$si-ref-color-main-red-300 |
||
$element-action-warning |
Warning | $si-ref-color-main-orange-600 |
$si-ref-color-main-orange-400 |
||
$element-action-warning-hover |
Warning action on hover | $si-ref-color-main-orange-700 |
$si-ref-color-main-orange-500 |
||
$element-action-warning-text |
Warning text color | $si-ref-color-main-brand-white |
$si-ref-color-main-deep-blue-900 |
||
$element-action-danger |
Danger | $si-ref-color-main-red-500 |
$si-ref-color-main-red-500 |
||
$element-action-danger-hover |
Danger action on hover | $si-ref-color-main-red-600 |
$si-ref-color-main-red-600 |
||
$element-action-danger-text |
Danger text color | $si-ref-color-main-brand-white |
$si-ref-color-main-brand-white |
||
$element-focus-default |
Default focus shadow color | $si-ref-color-main-brand-focus |
$si-ref-color-main-brand-focus |
Text¶
Similarly, categories for typography colors are also defined in this system.
| Value light | Value dark | Token | Use | Associated color - light | Associated color - dark |
|---|---|---|---|---|---|
$element-text-primary |
Primary | $si-ref-color-main-deep-blue-900 |
$si-ref-color-main-brand-white |
||
$element-text-secondary |
Secondary | $si-ref-color-main-deep-blue-650 |
$si-ref-color-main-deep-blue-300 |
||
$element-text-disabled |
Disabled | $si-ref-color-main-deep-blue-500 |
$si-ref-color-main-deep-blue-600 |
||
$element-text-inverse |
Inverse | $si-ref-color-main-brand-white |
$si-ref-color-main-deep-blue-900 |
||
$element-text-active |
Active | $si-ref-color-main-interactive-blue-700 |
$si-ref-color-main-brand-interactive-coral |
||
$element-text-information |
Informational | $si-ref-color-main-blue-700 |
$si-ref-color-main-blue-200 |
||
$element-text-success |
Success | $si-ref-color-main-green-700 |
$si-ref-color-main-green-300 |
||
$element-text-caution |
Caution | $si-ref-color-main-yellow-700 |
$si-ref-color-main-yellow-300 |
||
$element-text-warning |
Warning | $si-ref-color-main-orange-700 |
$si-ref-color-main-orange-300 |
||
$element-text-danger |
Danger | $si-ref-color-main-red-700 |
$si-ref-color-main-red-300 |
||
$element-text-critical |
Critical | $si-ref-color-data-orchid-500 |
$si-ref-color-data-orchid-100 |
Status¶
Status colors are used to describe and/or report on the status of different things.
| Value light | Value dark | Token | Use | Associated color - light | Associated color - dark |
|---|---|---|---|---|---|
$element-status-information |
Informational | $si-ref-color-main-blue-500 |
$si-ref-color-main-blue-500 |
||
$element-status-information-contrast |
Information contrast for e.g. composite icons | $si-ref-color-main-brand-white |
$si-ref-color-main-brand-white |
||
$element-status-success |
Success | $si-ref-color-main-green-700 |
$si-ref-color-main-green-500 |
||
$element-status-success-contrast |
Success contrast for e.g. composite icons | $si-ref-color-main-brand-white |
$si-ref-color-main-deep-blue-900 |
||
$element-status-caution |
Caution | $si-ref-color-main-yellow-500 |
$si-ref-color-main-yellow-300 |
||
$element-status-caution-contrast |
Caution contrast for e.g. composite icons | $si-ref-color-main-deep-blue-900 |
$si-ref-color-main-deep-blue-900 |
||
$element-status-warning |
Warning | $si-ref-color-main-orange-600 |
$si-ref-color-main-orange-400 |
||
$element-status-warning-contrast |
Warning contrast for e.g. composite icons | $si-ref-color-main-brand-white |
$si-ref-color-main-deep-blue-900 |
||
$element-status-danger |
Danger | $si-ref-color-main-red-500 |
$si-ref-color-main-red-500 |
||
$element-status-danger-contrast |
Danger contrast for e.g. composite icons | $si-ref-color-main-brand-white |
$si-ref-color-main-brand-white |
||
$element-status-critical |
Critical | $si-ref-color-data-orchid-500 |
$si-ref-color-data-orchid-500 |
||
$element-status-critical-contrast |
Critical contrast for e.g. composite icons | $si-ref-color-main-brand-white |
$si-ref-color-main-brand-white |
Code¶
Colors can be consumed within applications either by semantic color
(e.g. $element-ui-0) or design system color (e.g. $siemens-interactive-blue-500). It is
recommended to use semantic colors whenever possible to reduce the impact on
an application if the color system is getting updated. Use design system colors
if a design specification specifically demands it.
Contextual colors¶
The contextual colors represent the primary colors of each specific use-case and are defined by Bootstrap. They can be consumed directly using Bootstraps color utility classes.
Element extends the Bootstrap color utils with additional classes for Element specific colors. These classes are defined in the _utilities file.
Using contextual colors within SASS stylesheets is also possible by importing the Element Theme variables.
@use '@siemens/element-theme/src/styles/variables';
background-color: variables.$element-base-0;
color: variables.$element-text-warning;
...
Except where otherwise noted, content on this site is licensed under MIT License.