Eye-Catchers

The clear and simple use of colors and shapes is also reflected in the design of eye-catcher. To not overload the layout, the use of the eye-catcher is reduced.

Eye-Catcher variations

We want to keep all layouts clean, structured and not overcrowded. To highlight the key product benefit and the launch of a new product you can make use of an eye catcher. There are two types of eye catchers available. Only ever one of each type can be used, however both types can appear in combination.
Three examples of three different eye-catcher graphics (colorful circles with text in them).
Standard eye-catcher

To highlight one single-minded key product benefit it's possible to integrate a single eye-catcher, which is placed on the packshot. The eye-catchers have a fixed form and a pre-defined use of colors and types.

A small red box with the word "NEW" in it. It is to be used when launching new products.
"NEW" eye-catcher

Use this eye-catcher to indicate a new product (launch)

  • Rectangular shape with rounded corners
  • Color is always HARTMANN Red
  • The eye-catcher is always placed in front of the product or packshot

Colors & fonts

Eight secondary colors HARTMANN: Four color circles in Yellow, Red, Green and Cyan. Four crossed-out color circles in Pink, Violet, Orange and Turquoise.

Color usage

The colors for the eye-catchers can be selected from the secondary color palette.

  • The “NEW” eye-catcher is always HARTMANN Red.
  • The standard eye-catcher appears in Yellow or Cyan if in combination with the “NEW” eye-catcher. If there is no “NEW” eye-catcher, the standard eye-catcher can appear in Red.
  • Green is only used for sustainability-related topics.
  • Text is in HARTMANN Dark Blue or White

More on Colors

Eight secondary colors HARTMANN: Three color circles in Yellow, Red and Green. Five crossed-out color circles in Cyan, Pink, Violet, Orange and Turquoise.

Color usage within the Plus design

Since Plus designs always use Cyan as their background color, Cyan is not available for eye-catchers appearing in this context.

More about The Plus

Gray colored area with "Aa" in large letters and the words Panton bold, Panton semibold and Panton Regular

Fonts in eye-catchers

  • Use Panton Bold and/or Panton Semibold and/or Panton Regular
  • Different font styles and sizes can be combined
  • Keep text to a minimum
  • Ensure there is enough ‘whitespace’ around the text

More on Typography

Important

Please note, if it’s not necessary to highlight the key product benefit, or the launch of a new product, please do not integrate any eye-catcher and keep the layout simple and not overcrowded.

Examples

It is possible to combine several eye-catchers with each other.
Example of how text should be placed when the eye-catcher graphic is placed centrally on the packshots (left). Example of how text should be placed when the eye-catcher graphic is placed left of the packshots (middle). Example of how text should be placed when the eye-catcher graphic is placed right of the packshots (right).

See also

For further information get in touch