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:
Background¶
| Token Name | Type | dark (default) | light | Description |
|---|---|---|---|---|
| 0 si.sys.color.background.0 | color | #000028 {si.ref.color.main.deep-blue.900} | #F5F5F5 {si.ref.color.main.sand.200} | The absolute bottom layer, the literal background of the application. |
| 1 si.sys.color.background.1 | color | #23233C {si.ref.color.main.deep-blue.800} | #FFFFFF {si.ref.color.main.brand.white} | The primary surface layer where most UI components sit. E.g., cards, side panels, containers that rest above background-0 |
| 2 si.sys.color.background.2 | color | #12122E {si.ref.color.main.deep-blue.875} | #F0F0EF {si.ref.color.main.sand.300} | For elements that are placed above background-1, implying a higher visual elevation. |
| 3 si.sys.color.background.3 | color | #2D2D45 {si.ref.color.main.deep-blue.775} | #FFFFFF {si.ref.color.main.brand.white} | Used for temporary UI layers that sit above all base surfaces and partially cover the interface below. Is usually paired with drop-shadows. E.g., toast notification, popovers, dropdowns, modals. |
| 4 si.sys.color.background.4 | color | #161632 {si.ref.color.main.deep-blue.850} | #FAFAFA {si.ref.color.main.sand.100} | Used to layer in any of the other bases, when a stronger distinction is needed, especially to highlight a container. |
| accent si.sys.color.background.accent | color | #00CCCC {si.ref.color.main.brand.interactive-coral} | #006B80 {si.ref.color.main.interactive-blue.700} | Background color for accent elements. |
| accent-active si.sys.color.background.accent-active | color | #00E5AA {si.ref.color.main.bold-green.500} | #004F60 {si.ref.color.main.interactive-blue.800} | Background color for active states on accent elements. |
| accent-hover si.sys.color.background.accent-hover | color | #00FFB9 {si.ref.color.main.bold-green.400} | #005159 {si.ref.color.main.brand.teal} | Background color for hover states on accent elements. |
| accent-secondary si.sys.color.background.accent-secondary | color | rgba(0, 204, 204, 0) rgba({si.ref.color.main.brand.interactive-coral}, 0) | rgba(0, 204, 204, 0) rgba({si.ref.color.main.brand.interactive-coral}, 0) | Background color for secondary accent elements. |
| accent-secondary-active si.sys.color.background.accent-secondary-active | color | #001F39 {si.ref.color.main.bold-green.900} | #C2FFEE {si.ref.color.main.bold-green.200} | Background color for active states on secondary accent elements. |
| accent-secondary-hover si.sys.color.background.accent-secondary-hover | color | #00333E {si.ref.color.main.interactive-blue.900} | #D1FFF2 {si.ref.color.main.bold-green.100} | Background color for hover states on secondary accent elements. |
| active si.sys.color.background.active | color | #40405E {si.ref.color.main.deep-blue.700} | #E0E0DE {si.ref.color.main.sand.500} | Background color for active states. |
| caution si.sys.color.background.caution | color | #FFD732 {si.ref.color.main.yellow.300} | #EDBF00 {si.ref.color.main.yellow.500} | Background color for emphasis on caution states. |
| caution-active si.sys.color.background.caution-active | color | #BA9600 {si.ref.color.main.yellow.600} | #FFD732 {si.ref.color.main.yellow.300} | Background color for active states on caution elements. |
| caution-hover si.sys.color.background.caution-hover | color | #EDBF00 {si.ref.color.main.yellow.500} | #FFD00F {si.ref.color.main.yellow.400} | Background color for hover states on caution elements. |
| caution-subtle si.sys.color.background.caution-subtle | color | #322501 {si.ref.color.main.yellow.900} | #FFF2BA {si.ref.color.main.yellow.100} | Background color for subtle caution states. |
| critical si.sys.color.background.critical | color | #A733BC {si.ref.color.data.orchid.500} | #A733BC {si.ref.color.data.orchid.500} | Background color for emphasis on critical states. |
| critical-active si.sys.color.background.critical-active | color | #52245C {si.ref.color.data.orchid.900} | #52245C {si.ref.color.data.orchid.900} | Background color for active states on critical elements. |
| critical-hover si.sys.color.background.critical-hover | color | #740089 {si.ref.color.data.orchid.700} | #740089 {si.ref.color.data.orchid.700} | Background color for hover states on critical elements. |
| critical-subtle si.sys.color.background.critical-subtle | color | #52245C {si.ref.color.data.orchid.900} | #EDD6F2 {si.ref.color.data.orchid.100} | Background color for subtle critical states. |
| danger si.sys.color.background.danger | color | #D72339 {si.ref.color.main.red.500} | #D72339 {si.ref.color.main.red.500} | Background color for emphasis on danger states. |
| danger-active si.sys.color.background.danger-active | color | #A60823 {si.ref.color.main.red.700} | #A60823 {si.ref.color.main.red.700} | Background color for active states on danger. |
| danger-hover si.sys.color.background.danger-hover | color | #BF162E {si.ref.color.main.red.600} | #BF162E {si.ref.color.main.red.600} | Background color for hover states on danger. |
| danger-secondary si.sys.color.background.danger-secondary | color | rgba(215, 35, 57, 0) rgba({si.ref.color.main.red.500}, 0) | rgba(215, 35, 57, 0) rgba({si.ref.color.main.red.500}, 0) | Background color for secondary states on danger. |
| danger-subtle si.sys.color.background.danger-subtle | color | #42000C {si.ref.color.main.red.900} | #FCCCD7 {si.ref.color.main.red.100} | Background color for subtle danger states. |
| disabled si.sys.color.background.disabled | color | #40405E {si.ref.color.main.deep-blue.700} | #B3B3BE {si.ref.color.main.deep-blue.300} | Background color for the disabled state for specific components, like buttons and other controls |
| hover si.sys.color.background.hover | color | #333353 {si.ref.color.main.deep-blue.750} | #EDEDED {si.ref.color.main.sand.400} | Background color for hover states. |
| information si.sys.color.background.information | color | #206ED9 {si.ref.color.main.blue.500} | #206ED9 {si.ref.color.main.blue.500} | Background color for emphasis on information states. |
| information-active si.sys.color.background.information-active | color | #1E5299 {si.ref.color.main.blue.700} | #1E5299 {si.ref.color.main.blue.700} | Background color for active states on information elements. |
| information-hover si.sys.color.background.information-hover | color | #1F60B9 {si.ref.color.main.blue.600} | #1F60B9 {si.ref.color.main.blue.600} | Background color for hover states on information elements. |
| information-subtle si.sys.color.background.information-subtle | color | #193966 {si.ref.color.main.blue.900} | #D2E2F7 {si.ref.color.main.blue.100} | Background color for subtle information states. |
| inverse si.sys.color.background.inverse | color | #FFFFFF {si.ref.color.main.brand.white} | #000028 {si.ref.color.main.deep-blue.900} | Background color for inverse states. |
| neutral si.sys.color.background.neutral | color | #B3B3BE {si.ref.color.main.deep-blue.300} | #66667E {si.ref.color.main.deep-blue.600} | Background color for neutral or unknown states. |
| neutral-active si.sys.color.background.neutral-active | color | #7D8099 {si.ref.color.main.deep-blue.500} | #40405E {si.ref.color.main.deep-blue.700} | Background color for active states on neutral or unknown states. |
| neutral-hover si.sys.color.background.neutral-hover | color | #9999A9 {si.ref.color.main.deep-blue.400} | #4C4C68 {si.ref.color.main.deep-blue.650} | Background color for hover states on neutral or unknown states. |
| success si.sys.color.background.success | color | #28BF66 {si.ref.color.main.green.500} | #1C703F {si.ref.color.main.green.700} | Background color for emphasis on success states. |
| success-active si.sys.color.background.success-active | color | #72E6A3 {si.ref.color.main.green.300} | #12331F {si.ref.color.main.green.900} | Background color for active states on success elements. |
| success-hover si.sys.color.background.success-hover | color | #4DD384 {si.ref.color.main.green.400} | #17522F {si.ref.color.main.green.800} | Background color for hover states on success elements. |
| success-subtle si.sys.color.background.success-subtle | color | #12331F {si.ref.color.main.green.900} | #C1F2D6 {si.ref.color.main.green.100} | Background color for subtle success states. |
| warning si.sys.color.background.warning | color | #FF9000 {si.ref.color.main.orange.400} | #C75300 {si.ref.color.main.orange.600} | Background color for emphasis on warning states. |
| warning-active si.sys.color.background.warning-active | color | #C75300 {si.ref.color.main.orange.600} | #8F3700 {si.ref.color.main.orange.800} | Background color for active states on warning. |
| warning-hover si.sys.color.background.warning-hover | color | #E37200 {si.ref.color.main.orange.500} | #A84100 {si.ref.color.main.orange.700} | Background color for hover states on warning. |
| warning-secondary si.sys.color.background.warning-secondary | color | rgba(199, 83, 0, 0) rgba({si.ref.color.main.orange.600}, 0) | rgba(199, 83, 0, 0) rgba({si.ref.color.main.orange.600}, 0) | Background color for active states on warning. |
| warning-subtle si.sys.color.background.warning-subtle | color | #421A00 {si.ref.color.main.orange.900} | #FEE1CC {si.ref.color.main.orange.100} | Background color for subtle warning states. |
Border¶
| Token Name | Type | dark (default) | light | Description |
|---|---|---|---|---|
| 1 si.sys.color.border.1 | color | #FFFFFF {si.ref.color.main.brand.white} | #000028 {si.ref.color.main.deep-blue.900} | Primary border color for high emphasis. |
| 2 si.sys.color.border.2 | color | #9999A9 {si.ref.color.main.deep-blue.400} | #66667E {si.ref.color.main.deep-blue.600} | Secondary border color for default borders. |
| 3 si.sys.color.border.3 | color | #66667E {si.ref.color.main.deep-blue.600} | #9999A9 {si.ref.color.main.deep-blue.400} | Tertiary border color for ghost buttons and chips borders. |
| 4 si.sys.color.border.4 | color | #4C4C68 {si.ref.color.main.deep-blue.650} | #E5E5E9 {si.ref.color.main.deep-blue.100} | Very subtle border color for dividers, input disabled, outline for cards, status toggle. |
| accent si.sys.color.border.accent | color | #00CCCC {si.ref.color.main.brand.interactive-coral} | #006B80 {si.ref.color.main.interactive-blue.700} | Border color for accent elements. |
| accent-active si.sys.color.border.accent-active | color | #00E5AA {si.ref.color.main.bold-green.500} | #004F60 {si.ref.color.main.interactive-blue.800} | Border color for active states for accent secondary. |
| accent-hover si.sys.color.border.accent-hover | color | #00FFB9 {si.ref.color.main.bold-green.400} | #005159 {si.ref.color.main.brand.teal} | Border color for hover states for accent secondary. |
| caution si.sys.color.border.caution | color | #FFD00F {si.ref.color.main.yellow.400} | #EDBF00 {si.ref.color.main.yellow.500} | Border color for caution states. |
| critical si.sys.color.border.critical | color | #A733BC {si.ref.color.data.orchid.500} | #A733BC {si.ref.color.data.orchid.500} | Border color for critical states. |
| danger si.sys.color.border.danger | color | #D72339 {si.ref.color.main.red.500} | #D72339 {si.ref.color.main.red.500} | Border color for danger states. |
| danger-secondary si.sys.color.border.danger-secondary | color | #FF8E9C {si.ref.color.main.red.300} | #BF162E {si.ref.color.main.red.600} | Border color for danger secondary states. |
| disabled si.sys.color.border.disabled | color | #40405E {si.ref.color.main.deep-blue.700} | #B3B3BE {si.ref.color.main.deep-blue.300} | Border color for disabled interactive controls, such as buttons and inputs. |
| information si.sys.color.border.information | color | #206ED9 {si.ref.color.main.blue.500} | #206ED9 {si.ref.color.main.blue.500} | Border color for information states. |
| inverse si.sys.color.border.inverse | color | #000028 {si.ref.color.main.deep-blue.900} | #F5F5F5 {si.ref.color.main.sand.200} | Border color for inverse elements. |
| neutral si.sys.color.border.neutral | color | #B3B3BE {si.ref.color.main.deep-blue.300} | #66667E {si.ref.color.main.deep-blue.600} | Border color for neutral borders. |
| success si.sys.color.border.success | color | #28BF66 {si.ref.color.main.green.500} | #1C703F {si.ref.color.main.green.700} | Border color for success states. |
| warning si.sys.color.border.warning | color | #FF9000 {si.ref.color.main.orange.400} | #C75300 {si.ref.color.main.orange.600} | Border color for warning states. |
| warning-secondary si.sys.color.border.warning-secondary | color | #FFA525 {si.ref.color.main.orange.300} | #A84100 {si.ref.color.main.orange.700} | Border color for warning secondary states. |
Text¶
| Token Name | Type | dark (default) | light | Description |
|---|---|---|---|---|
| accent si.sys.color.text.accent | color | #00CCCC {si.ref.color.main.brand.interactive-coral} | #006B80 {si.ref.color.main.interactive-blue.700} | Accent text color for interactive elements. |
| accent-active si.sys.color.text.accent-active | color | #00E5AA {si.ref.color.main.bold-green.500} | #004F60 {si.ref.color.main.interactive-blue.800} | Accent text color for active states on interactive elements. |
| accent-hover si.sys.color.text.accent-hover | color | #00FFB9 {si.ref.color.main.bold-green.400} | #005159 {si.ref.color.main.brand.teal} | Accent text color for hover states on interactive elements. |
| caution si.sys.color.text.caution | color | #FFD732 {si.ref.color.main.yellow.300} | #4D3901 {si.ref.color.main.yellow.800} | Text color for caution states. |
| critical si.sys.color.text.critical | color | #D59CDE {si.ref.color.data.orchid.200} | #740089 {si.ref.color.data.orchid.700} | Text color for critical states. |
| danger si.sys.color.text.danger | color | #FF8E9C {si.ref.color.main.red.300} | #A60823 {si.ref.color.main.red.700} | Text color for danger states. |
| disabled si.sys.color.text.disabled | color | #66667E {si.ref.color.main.deep-blue.600} | #9999A9 {si.ref.color.main.deep-blue.400} | Text color for disabled states. |
| information si.sys.color.text.information | color | #A9C7F1 {si.ref.color.main.blue.200} | #1E5299 {si.ref.color.main.blue.700} | Text color for information states. |
| inverse si.sys.color.text.inverse | color | #000028 {si.ref.color.main.deep-blue.900} | #FFFFFF {si.ref.color.main.brand.white} | Text color for use on dark backgrounds for contrast. |
| on-accent si.sys.color.text.on-accent | color | #000028 {si.ref.color.main.deep-blue.900} | #FFFFFF {si.ref.color.main.brand.white} | Text color for use on accent backgrounds. |
| on-accent-secondary si.sys.color.text.on-accent-secondary | color | #00CCCC {si.ref.color.main.brand.interactive-coral} | #006B80 {si.ref.color.main.interactive-blue.700} | Text color for use on accent secondary backgrounds. |
| on-accent-secondary-active si.sys.color.text.on-accent-secondary-active | color | #00E5AA {si.ref.color.main.bold-green.500} | #004F60 {si.ref.color.main.interactive-blue.800} | Text color for active states on secondary accent backgrounds. |
| on-accent-secondary-hover si.sys.color.text.on-accent-secondary-hover | color | #00FFB9 {si.ref.color.main.bold-green.400} | #005159 {si.ref.color.main.brand.teal} | Text color for hover states on secondary accent backgrounds. |
| on-caution si.sys.color.text.on-caution | color | #000028 {si.ref.color.main.deep-blue.900} | #000028 {si.ref.color.main.deep-blue.900} | Text color for use on caution backgrounds. |
| on-critical si.sys.color.text.on-critical | color | #FFFFFF {si.ref.color.main.brand.white} | #FFFFFF {si.ref.color.main.brand.white} | Text color for use on critical backgrounds. |
| on-danger si.sys.color.text.on-danger | color | #FFFFFF {si.ref.color.main.brand.white} | #FFFFFF {si.ref.color.main.brand.white} | Text color for use on danger backgrounds. |
| on-danger-secondary si.sys.color.text.on-danger-secondary | color | #FF8E9C {si.ref.color.main.red.300} | #BF162E {si.ref.color.main.red.600} | Text color for use on danger secondary backgrounds. |
| on-disabled si.sys.color.text.on-disabled | color | #000028 {si.ref.color.main.deep-blue.900} | #FFFFFF {si.ref.color.main.brand.white} | Text color for text on disabled backgrounds. |
| on-information si.sys.color.text.on-information | color | #FFFFFF {si.ref.color.main.brand.white} | #FFFFFF {si.ref.color.main.brand.white} | Text color for use on information backgrounds. |
| on-neutral si.sys.color.text.on-neutral | color | #000028 {si.ref.color.main.deep-blue.900} | #FFFFFF {si.ref.color.main.brand.white} | Text color for text on neutral backgrounds. |
| on-success si.sys.color.text.on-success | color | #000028 {si.ref.color.main.deep-blue.900} | #FFFFFF {si.ref.color.main.brand.white} | Text color for use on success backgrounds. |
| on-warning si.sys.color.text.on-warning | color | #000028 {si.ref.color.main.deep-blue.900} | #FFFFFF {si.ref.color.main.brand.white} | Text color for use on warning backgrounds. |
| on-warning-secondary si.sys.color.text.on-warning-secondary | color | #FFA525 {si.ref.color.main.orange.300} | #A84100 {si.ref.color.main.orange.700} | Text color for use on warning secondary backgrounds. |
| primary si.sys.color.text.primary | color | #FFFFFF {si.ref.color.main.brand.white} | #000028 {si.ref.color.main.deep-blue.900} | Primary text color for high emphasis text. |
| secondary si.sys.color.text.secondary | color | #B3B3BE {si.ref.color.main.deep-blue.300} | #4C4C68 {si.ref.color.main.deep-blue.650} | Secondary text color for medium emphasis text. |
| success si.sys.color.text.success | color | #72E6A3 {si.ref.color.main.green.300} | #1C703F {si.ref.color.main.green.700} | Text color for success states. |
| warning si.sys.color.text.warning | color | #FFA525 {si.ref.color.main.orange.300} | #A84100 {si.ref.color.main.orange.700} | Text color for warning states. |
Effects¶
| Token Name | Type | dark (default) | light | Description |
|---|---|---|---|---|
| backdrop si.sys.color.effects.backdrop | color | rgba(0, 0, 40, 0.65) rgba({si.ref.color.main.deep-blue.900}, 0.65) | rgba(0, 0, 0, 0.3) rgba({si.ref.color.main.brand.black}, 0.3) | - |
| disable-opacity si.sys.color.effects.disable-opacity | number | 0.5 | 0.5 | Opacity value to disable non-interactive content (images, badges, etc.) that can't use disabled color tokens. |
| focus si.sys.color.effects.focus | color | #199FFF {si.ref.color.main.brand.focus} | #008FF5 {si.ref.color.main.brand.focus-light} | Reserved for focus ring, for keyboard navigation. |
| logo si.sys.color.effects.logo | color | #FFFFFF {si.ref.color.main.brand.white} | #009999 {si.ref.color.main.brand.petrol} | - |
Code¶
| Token Name | Type | dark (default) | light | Description |
|---|---|---|---|---|
| 1 si.sys.color.code.1 | color | #E5E5E9 {si.ref.color.main.deep-blue.100} | #000028 {si.ref.color.main.deep-blue.900} | Code color default. |
| 2 si.sys.color.code.2 | color | #97C7FF {si.ref.color.data.royal-blue.200} | #1C4680 {si.ref.color.main.blue.800} | Code color for operators and keywords. |
| 3 si.sys.color.code.3 | color | #80DFED {si.ref.color.data.blue.200} | #00557C {si.ref.color.data.blue.900} | Code color for constant / boolean. |
| 4 si.sys.color.code.4 | color | #FFBC66 {si.ref.color.data.orange.200} | #A84100 {si.ref.color.main.orange.700} | Code color for variables. |
| 5 si.sys.color.code.5 | color | #FFE784 {si.ref.color.data.yellow.200} | #876D00 {si.ref.color.main.yellow.700} | Code color for functions. |
| 6 si.sys.color.code.6 | color | #80EBAC {si.ref.color.data.green.200} | #1C703F {si.ref.color.main.green.700} | Code color for strings. |
| 7 si.sys.color.code.7 | color | #D59CDE {si.ref.color.data.orchid.200} | #A733BC {si.ref.color.data.orchid.500} | Code colors for numbers. |
| 8 si.sys.color.code.8 | color | #AAAA96 {si.ref.color.data.sand.500} | #5E5E4A {si.ref.color.data.sand.900} | Code color for comments. |
| 9 si.sys.color.code.9 | color | #9999A9 {si.ref.color.data.deep-blue.400} | #4C4C68 {si.ref.color.data.deep-blue.700} | Code colors for punctuation. |
| 10 si.sys.color.code.10 | color | #A68DFF {si.ref.color.data.purple.400} | #553BA3 {si.ref.color.data.purple.900} | Code color for tags. |
| 11 si.sys.color.code.11 | color | #85E9D2 {si.ref.color.data.turquoise.100} | #1A747D {si.ref.color.data.turquoise.700} | Color for typescript. |
| 12 si.sys.color.code.12 | color | #FF8E9C {si.ref.color.main.red.300} | #A60823 {si.ref.color.main.red.700} | Code color for errors. |
UI (deprecated)¶
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 (deprecated)¶
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 (deprecated)¶
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 (deprecated)¶
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 (deprecated)¶
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 system color token (e.g. $si-sys-color-background-accent) or reference color token (e.g. $si-ref-color-main-interactive-blue-700). It is recommended to use system color tokens whenever possible to reduce the impact on an application if the color system is updated. Use reference color tokens if a design specification specifically requires a palette value.
Contextual colors¶
The contextual colors represent the primary colors of each specific use-case and are based on the system color tokens. They can be consumed directly using Element's color utility classes.
The color utility classes for background, text, and borders 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.$si-sys-color-background-0;
color: variables.$si-sys-color-text-warning;
...
Except where otherwise noted, content on this site is licensed under MIT License.