Watermarks

Usage

The HERE watermark is a representation of our logo and helps viewers identify the HERE brand and product. Our watermark is on all map products, and it’s placed according to context.

There are several sizes available for the watermark: S, M, L and XL. If your designs require an exception, you can calculate the size according to our recommendations.

Principles

The viewer sees it last.

Place watermarks at the last position of a reading direction, ideally in a corner.

Stay out of the user’s way.

Be aware of usage and experience; don’t block interactive UI elements.

Design for readability.

The watermark should be clearly visible but not distracting.

Keep it down.

The preferred placement is at the bottom of a map in the following order:

• Bottom left
• Bottom center

Keep it visible

The HERE watermark should always be visible, especially with third party partners. Placement should be adjusted so that it follows our principles as much as possible.

Exception: For cases of products, the watermark is not visible during guidance to free up UI space for a better user experience. Once guidance stops, the watermark reappears.

Examples

Based on the above principles, watermarks should be easy to see but not distracting as listed in the preferred order according context as seen in the images below.

1. B & C preferred placement web
2. A & C preferred placement mobile

Size

Desktop and mobile

The HERE Design System recommends choosing from four sizes (S, M, L, XL). The most used size is large.

1. Desktop large grid breakpoint - Extra Large: 120 px including the bounding box
2. Desktop medium grid breakpoint - Large: 90 px including the bounding box
3. Tablet grid breakpoint - Large: 90 px including the bounding box
4. Mobile grid breakpoint - Medium: 60 px including the bounding box
5. Mobile small grid breakpoint - Small: 45 px including the bounding box (only web and mobile)

Automotive

The size of the watermark is M – 80 px including the bounding box based on the most common screens and the most common 160 dpi.

Note: If both sizes of the map have less than 250 pixels, don’t use a watermark. A smartwatch is the exception to this rule.

Variants

The HERE watermark comes in default (full color) or subtle (monochrome) that should be selected depending on which is most readable on a map:

• Default on light
• Default on dark
• Subtle on light
• Subtle on dark

Default

Full color watermarks are default as they stand out more against the map.

1. Default on light
2. Default on dark

In use

1. Default on light (light map style)
2. Default on dark (satellite map style)
3. Default on dark (dark map style)

Subtle

Monochrome watermarks are more subtle. Use this version if the logo appears too prominent for your design and use the watermark size recommended.

1. Subtle on light
2. Subtle on dark

In use

1. Subtle on light (light map style)
2. Subtle on dark (satellite map style)
3. Subtle on dark (dark map style)

Context

The watermark position should always respect and follow UI margins and paddings. Watermarks should follow the recommended sizes and placement; however, there are exceptions. If all four corners have important interactive elements or in cases where there aren’t any corners, the watermark can be placed in the bottom center position.

Placement

• Automotive UI: Bottom left
• Web: Bottom left
• Mobile: Bottom left (for R-L languages, bottom right)
• Smartwatches: Bottom center

Examples

1. Web
2. Mobile

1. Web
2. Mobile

Localization

For right-to-left languages, the watermark generally flips to the other side. This follows the principle of the viewer reading it last.

The HERE brand and product names are not translated.