Colours

Colours convey brand values, but they also organise content and guide the user. A good colour scheme distinguishes between primary colours (brand colours), secondary colours (complementary accents) and colours used for interactions and confirmations, such as for buttons, error messages or success messages. Consistent use ensures clarity in user guidance and a strong visual identity.

Primary Colours

The deliberate interplay of the primary colours creates a distinctive colour scheme that clearly defines our visual communication. Depending on the combination, they establish a clear association with the brand at the colour level alone. In conjunction with other design elements, they play a decisive role in shaping the characteristic look and feel of our brand identity.

Secondary Colours

The secondary colours are used specifically in the design of infographics, diagrams and illustrations. In other areas of brand communication, their use is deliberately avoided.

Neutral Colours

The neutral colours provide a calm backdrop to the design. They are used for text, backgrounds and solid areas.

Interaction & Validation Colours

Colours used for interactions such as hover, click or focus, as well as for validation states (e.g. success, error, warning), help users to navigate and provide feedback. They ensure intuitive operation and improve accessibility. Your application follows set rules to ensure consistency and recognisability in the digital space.

Typography

The main typeface forms the typographical backbone of the – brand identity; it ensures consistency, legibility and recognisability across all media. It is complemented by an accent typeface, which is used specifically for particular content, such as quotations. The font hierarchy organises content in a clear and visually intuitive way: it distinguishes between headings, body text, subheadings, etc. – and guides users intuitively through the content.

4Topline H4 – Roboto Condensed Demi Bold 13 px/2 em 1.2 px

Headline H1 – Roboto Condensed Medium
63 px/1.0 em

Headline H2 – Roboto Condensed Medium
39 px/1.4 em

Headline H3 – Roboto Condensed Medium
24 px/1.4 em

Cross-heading H5 – Roboto Condensed Bold
16 px / 1.6 em

Caption H6 – Roboto Condensed Regular 14 px/2 em

Copy – Roboto Condensed Regular 16 px/1.8 em Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor Hyperlink. Even if the mountains were to give birth, with the aid of their companions, their ancestral spirits and the great gods, a ridiculous mouse would be born. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

Quote – Georgia 24 px/1.4 em Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Imagery

Images, product photos, illustrations and videos are used strategically to enhance content visually. In image galleries or video sliders, they serve to evoke an emotional response and convey information. Product photographs, for example, can be visually emphasised through the use of shadows. General images, on the other hand, remain shadowless but can be accentuated by decorative elements such as frames – a principle that also applies to illustrations.

Icons & Pictograms

Icons aid navigation, simplify use and provide clear guidance – for example, in menus or on social media. Pictograms convey information in a concise way and make content easier to grasp. A consistent style enhances recognition and reinforces the brand’s impact.

Buttons & Links

Primary buttons represent key actions, whilst secondary buttons represent supporting actions. Their colour scheme follows a clear hierarchy and ensures clarity and consistency within the interface. Simple Text links (reference links) blend into the body text but are still clearly recognisable. Navigation links that are not designed as buttons use colour, position and typography to be perceived as clickable elements, without taking on the visual prominence of a button.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et Hyperlink And just two pains and that matter. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Accordions/Toggles/Tabs

Tabs organise content into clear sections, ideal when users need to switch between topics quickly. Toggles are simple switches that allow individual pieces of information to be shown or hidden as required. Accordions group together several expandable sections, perfect for long lists or FAQs. In short: tabs help with parallel content, whilst toggles and accordions create space and clarity when dealing with lots of details.

Forms

Forms are the direct link to the user for collecting data or triggering actions. A clear, intuitive design ensures high conversion rates and prevents users from abandoning the process. The search function is also a form – the more precise and clearly structured it is, the better the user experience. It is important that forms and search functions are designed consistently and uniformly to avoid confusion and improve usability.

Diagrams & Tables

Charts visualise figures and trends at a glance and make complex information easy to grasp. They are particularly well suited to clearly illustrating comparisons or trends. Tables organise data in a clear and detailed manner, making them ideal for precise information that users wish to search through or compare in a targeted manner. Both elements should be designed in a clear and consistent manner to ensure readability and user-friendliness.

Testimonials & People

People modules introduce team members, authors or points of contact. They make brands more tangible and strengthen personal connections. A clear, consistent design conveys professionalism and ensures brand recognition. Testimonials showcase genuine feedback from satisfied customers. They are a powerful trust-building element in web design and help to demonstrate credibility and social proof.

Sliders

Sliders are ideal for displaying multiple pieces of visual content in a space-saving and appealing way. Sliders are well suited to eye-catching highlights, e.g. on homepages or for campaigns. They create a sense of dynamism, but must be easy to use and not overloaded with content.