---
title: "Brand Redesign Guidelines"
path: https://www.eonshowroom.eon.com/en/brand-redesign/brand-redesign-guidelines.html
lastModified: 2025-02-14T12:40:42.911Z
---

# Brand Redesign Guidelines

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_3-19%3A2-1?fmt=webp-alpha)

## Brand Redesign Editor Guidelines

General guidelines on how to implement the new E.ON Brand into content pages

## Overview

The overall color schemes have been drastically reduced which results in much cleaner websites for the users, a more logical visual content hierarchy and better transparency for the editors resulting in more consistent pages overall.

## Color schemes

#### Color ratios and overall look & feel

The main page background color should be White. Grey 100 can be used as a separation color when needed and Red 500 backgrounds should only be used for the highlighting of important content (an additional gradient can be added for further highlighting). This will result in an overall cleaner and more user friendly website experience.

The Red color scheme is the main focus that communicates the E.ON brand and is used as Branding color in Hero components and pageheaders and as a highlight background color in teasers and as a section background.

In addition there is a new Red background with Purple gradient option that can be used for top level highlighting.

- White should be the predominant background color.
- Use Grey 100 as background to separate sections.
- Use Red 500 only in the Pageheader and for highlighting key contents of a page.

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/base-colors-2?fmt=webp)

#### Highlight colors

For content highlighting, there is a set of highlight colors that can be used within the Eyecatcher and Promoflag. Those highlighting options are available in different components like the Pageheader, Product Card etc.

- Use for Eyecatcher and Promoflag configuration

##### Example

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/eyecatcher%20small-2?fmt=webp)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/highlight%20colors%202-2?fmt=webp)

#### Functional colors

In addition to the basic Brand color set, some additional functional colors have been added outside of the main color palette.

Those colors are used mainly for notifications and focus highlighting when navigating through the page via keyboard as well as for different states within form components.

These color schemes are automatically applied when selecting the specific components and don't need to be configured by content editors.

- Used for notifications (success, warnings and error states)
- Used for focus highlighting of interactive elements
- Used in different states of form components

##### Example

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/notifications-2?fmt=webp)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/dropdown-2?fmt=webp)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/system-colors-2?fmt=webp)

### Layout and Grid

The E-ON UI Kit uses a flexible 12-column grid is a versatile framework commonly used in web and app design, and it offers several notable benefits.

##### Flexible Layout Options

Easily divide layouts into halves, thirds, and more for versatile design choices.

##### Responsive Across Devices

Columns adapt seamlessly from desktop to mobile for a smooth user experience.

##### Consistent and Aligned

Provides a clean structure, guiding users’ attention across the page.

##### Developer- and Designer-Friendly

Standard grid used in popular frameworks, speeding up design and development.

#### Assure a proper text length for better readability

Having the **right amount of characters** on each line is key to the readability of your text. As result, users faced with overly long lines of text are more likely to **avoid reading the text.**

Consequently, as readability drops more users will **fail to fully understand** a product’s or service’s benefits, and thus decide that a particular product or service won’t meet their needs.

Use a maximum of 6 columns for longer text paragraphs.

3

6

3

##### Example headline

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. 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. 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. 

 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

2

8

2

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/OVERARCHING_KEY_VISUAL_Sideshots_1313_WF05_RGB-1%3A2-1?fmt=webp-alpha)

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 

 Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer

#### Multi column layout

For shorter text paragraphs you can also use a multi column layout to ensure the maxiumum text length is kept intact.

6

6

##### Subheadline

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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.

##### Subheadline

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. 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.

### Brand Hero Section

The Brand Hero Section is a new component that will incorporate the newly created E.ON Head font and is used to highlight the key message of a page. It should only be used once within the content area of a page.

There are different layout and design options available for this component to ensure flexibility. As this component is supposed to be used for highlighting the key content, it is limited to a mandatory headline using the E.ON Head font, an optional subheadline and an option Button CTA.

The headline text length should be kept **very short** (ideally not more than 6 words). While the subheadline can use longer texts, it still should be limited to one key message / sentence.

![Brand Hero Section on Red 500 background with gradient](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/Hero%20Section%20on%20Gradient%3A2-1?fmt=webp-alpha)

**Development in progress**

The new component is not available in AEM yet and will be presented in one of the next Sprints.

The text alignment can be either left or center aligned, while the content wrapper can be vertically top, center or bottom aligned.

The available color schemes are Red 500 and the Red 500 gradient.

![Brand Hero Section on background pattern](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/Hero%20Section%20on%20Pattern%3A2-1?fmt=webp-alpha)

Omitting the optional subheadline puts more focus on the headline.

Using a Brand approved background pattern will ensure color contrasts and legibility. You can find all Brand approved pattern in the download section of the E.ON Brand space.

[E.ON Brand space background patterns](https://brand.eon.com/document/325/collection/909)

![Brand Hero Section on Image](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/Hero%20Section%20on%20Image%3A2-1?fmt=webp-alpha)

The subheadline can optionally be placed above the headline.

When using background images, please be very mindful to ensure color contrast and avoid imagery with light colored highlights. The darken image option should be left checked per default. Use only Brand approved images from the Brand space whenever possible.

[E.ON Brand space image library](https://brand.eon.com/document/325)

#### Brand support team

When using custome images, please always check with the Brand team for an approval and to ensure consistency with the Brand guidelines.

[Get in touch with the Brand team](https://brand.eon.com/document/319#/help-support/get-in-touch)

### Checklist for creating websites

Building an effective website requires attention to detail and a focus on user experience, content clarity, and strong branding. This checklist provides essential guidelines to ensure your website is intuitive, engaging, and aligned with your brand identity.

#### User Experience & Navigation

- Logical and intuitive navigation structure
- Links to and from related pages for easy exploration
- Clear and engaging calls to action (CTAs)
- Designed for intuitive usage, even for first-time visitors
- Fully responsive and optimized for all devices

#### Content & Language

- Headlines, sublines, quotes, and highlights convey core messages at a glance
- anguage is active, simple, concise, empathetic, and ambitious (aligned with the desired tone of voice)
- Text blocks are kept short and engaging

#### Design & Branding

- Balanced use of text and visuals for a cohesive layout
- Images, illustrations, and icons complement and enhance the content
- Consistent branding ensures every viewport reflects the E.ON identity
- High-quality design elements, including resolution-optimized visuals

### Dos and Dont's

When using different content elements on a page the top priority should be user centricity. This means ensuring a consistent, readable and easy to understand content structure. Avoid visual clutter by using many differently structured elements.

#### Teasers

When multiple teasers are used in one section, they should be constistent in content and visual appearance. Please also make sure to use imagery that provokes a coherent look & feel.

![Don't Example for Teaser usage](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/teasers-donts%3A2-1?qlt=90&fmt=webp-alpha)

**Don't** use different teaser formats within the same section / grid control. Avoid different content elements and text lengths.

![Do Example for Teaser usage](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/teasers-dos%3A2-1?qlt=90&fmt=webp-alpha)

**Do** use a unified format for teasers in the same section / grid control and make sure that content elements and text lengths are aligned.

#### Content depth

To structure user-friendly content on a page, start by organizing information in a **hierarchical, easily scannable layout**. Highlights key takeaways. Use **subheadings** to break down content into sections, making it easy for users to locate information quickly.

In terms of depth, structure content with a **shallow-to-deep hierarchy**. Reduce the content of a page to the most critical information, and allow users to explore deeper content through expandable sections, links, or “read more” options. This approach lets readers engage at their preferred depth—getting an overview quickly, but also diving deeper if they’re interested—without overloading the page.

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/content-depth-donts-2%3A2-1?fmt=webp-alpha)

**Don't** exceed the content depth and paragraph lenghts to a level where it is overwhelming for the reader. Try avoiding to structure content into components that hide complete parts of the content.

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/content-depth-dos%3A2-1?fmt=webp-alpha)

**Do** structure content in a way that is easily graspable and offer the option to dive deeper into specific areas on dedicated subpages. Try to break up content using fitting imagery, illustrations and pictograms.