Colors

The UI MarCom color palette is based on the Siemens Healthineers brand design.

The color system includes all brand, neutral and additional colors that are available for user interface elements. The branded look of a user interface is mainly shaped by the primary and neutral colors. For assets like charts, which may require more diversity, there are additional colors to use. Finally, three functional colors are available for status indication.

Backgrounds

Neutral colored backgrounds are used in components and can be set in layout sections to separate these areas from standard content. The predominant background color is white. It can be altered with a light gray to highlight content. Black background creates a large contrast and is only used to present key visuals, clinical image content or in special cases, for example, a call-to-action section.

Primary colors

There are two brand colors that should be used sparingly and discreetly. The more striking Healthy Orange is used for primary actions, active states and eye-catching content. The second brand color petrol adds color to minor elements. Both colors are available in different tints. You should only use the tinted colors if there is a need for them. Both brand colors are supplemented by an accessible version to meet the WCAG standard.

Neutral colors

The interface is dominated by the neutral colors white and black and the gradations between. The tints and shades should be used wisely to create appropriate contrasts in the user interface. SH Black(90) is applied to the standard text. Attenuated elements like muted text or graduated icons use SH Black(60) on light and SH Black(40) on dark background.

Additional colors

Additional colors are only used in exceptional cases when special requirements make it necessary to differentiate from primary colors. Assets like charts may require more color diversity since elements in primary colors can be confused as interaction elements. The colors have two gradations for differentiation.

Functional colors

The functional colors are used for indication to represent states (error, success, confirmation) and provide feedback to the user. If possible, they mainly serve as background color for icons that can be supplemented by a neutral colored information text. They will never be tinted. An accessible version of red and green can be used to meet the WCAG standard.

Dos and don’ts

• Only use white and light gray on dark backgrounds.
• Do use colors according to their role and not to achieve the perfect color ratio.
• Only use the tinted colors if there is a need for them.
• Do not use accent colors excessively. Use them discreetly and consciously.