Illustrations and infographics

Our illustrations complement the visual identity and add depth to the brand’s overall look and feel. They are used when there is a need to visually communicate a specific topic or concept. The illustration style also allows for the creation of various infographics.

Illustrations are primarily used in digital materials, such as social media content, apps, and websites. They can also be adapted for other formats, including technical brochures and animations.

The illustration system is divided into three levels of complexity, each with its own guidelines for size, color, and level of detail. Level 1 and Level 2 are designed to be visually engaging for web and social media, prioritizing simplicity and impact. Level 3 illustrations can be more informative and do not need to be as decorative.

Illustrations are largely based on geometric shapes, aiming for clarity and simplicity in expression. Decorative elements are allowed but should never distract from the core message.

To maintain a cohesive style, use solid shapes to ensure clarity and consistency. Gradients can be applied to create subtle shadows and depth, particularly when illustrating people. Outlines are unnecessary, even in cases where an arm overlaps with the torso or one leg overlaps with another. Gradients can effectively separate the colour areas and create a multidimensional feel. 

The number of colours used is tied to the complexity of the illustration. Mini-illustrations (Level 1) use the most limited colour palette, while technical illustrations (Level 3) utilise the widest range. All illustration colours are included in the extended Design System colour palette. Adjust the colours to suit the background colour.

Mini-illustrations are decorative and consumer-friendly. They are intended for use on the web and social media, with a focus on simplicity and visual impact. The default size for mini-illustrations is 240x240px. The size can be reduced to 80x80px without losing detail.

Level 2 illustrations feature a higher level of detail, allowing for background graphics such as furniture, clouds, or other contextual elements, as well as simple cast shadows. The style remains decorative and consumer-friendly.

These illustrations use a broader range of colours compared to Level 1. In addition to green and purple tones, Dusk Orange and shades of Balancing Beige can be used for skin tones and hair colours in characters. Other colours may be used as exceptions if required by the technicality of the image, such as blue for water.

The default size for Level 2 illustrations is 520x520px.

Level 3 includes technical and other large-scale informative illustrations. These illustrations feature the highest level of detail. Graphs can also be produced in this style.

The focus is on the monochromatic primary colours, but the entire extended Design System web palette can be used if additional colours improve the understanding of the subject matter.

See the example of a technical illustration

See examples of different illustrations