Data visualization is a powerful tool to communicate complex content and large amounts of information clearly and comprehensively.
Our flexible layout makes customized communication possible at all touchpoints. The design system is scalable and can be used flexibly. From the graphically reduced, information-heavy visualization to the visually expressive presentation of content, it can be individually adapted depending on the context.
Types
Please find more information about the extended color codes in the color section.
Our expressive typeface supports brand-building communication and ensures instant brand recognition.
Typography for standardized communication
We use the system font Segoe UI for all other standardized communication and touchpoints or in the event of technical restrictions.
To allow for a consistent drawing of tables, they are based on the following parameters of typography, line widths, structure, and the use of highlights.
Line thickness
Two different line widths are available for structuring the content of our tables. The thick outline (1/1) marks the beginning and end of the table. The thin outline (1/3) provides structure within the graphic. The line widths are freely selectable, but the ratio between thin and thick lines should always be 1 to 3.
Line colors
Our three main colors for lines in tables are Henkel red, white and warm grey. In the case of expressive layouts, all welcoming and progressive colors can be used in the respective combination. The need for sufficient contrast is to be observed at all times.
Cell colors
In order to keep track of complex graphics and tables in particular, the table rows can be labeled alternately in white and the background color of the respective basic color. In expressive layouts, the table rows can be stored alternately in the color combinations.
Cell highlights
Contents of exceptional cells can be highlighted with a color. In the case of expressive layouts, cells can be highlighted in the color combinations.
To allow for a consistent drawing of charts, they are based on the following parameters of typography, line widths, structure, and the use of highlights.
Background colors
Depending on the expressiveness of the graphic and the color scheme, you can choose between three options for your background color.
Axes and grid anatomy
The line widths are freely selectable, but the ratio between the axes and the grid should always be 1 to 3.
Axes and grid colors
The color of the axis and grid is always either white or warm grey depending on the background color.
Diagram styles
From the graphically reduced, information-heavy visualization to the visually expressive presentation of content, it can be individually adapted depending on the context.
Don’ts