Eyecatcher Stable New in 3.1 Dark theme

The eye catcher is a component used on pictures to highlight something new or special.

General guidance

The Eyecatcher, is as it‘s name implies, a flag to catch visual attention by design. It‘s designed to grab attention for a product or topic that is either new or something in a similar fashion.

Placement

Structure

The Eyecatcher comes in two different variations in terms of it‘s structure. They differ in size of the font. One is restricted to one row of text and 3 letters. The other one leaves space up to 7 letters each of the 3 rows.

1. 1 row up to 3 letters
2. 3 rows up to 7 letters

Types

These are the basic color options used on different backgrounds. There is no orange version. We don‘t want to compete with interaction patterns, that often use orange as primary color for interaction. For reference see Interaction

Examples

Dos and don’ts

• Our design is reduced and excessive use of eye-catchers should be avoided.
• Avoid long words.
• Make sure to communicate all information by using a headline, subhead, or body text.
• Only use eye-catchers in exceptional cases, for example, product announcements, events, and awards.
• Don’t capitalize words.
• There is no Healthy-Orange version. We don‘t want to compete with interaction patterns.
• Don’t allow the eye-catcher to compete with the logo.
• Don’t use more than one eye-catcher in one component.
• Don’t cover the faces on key-visuals with the eye-catcher.