Introduction
The HERE colors are inspired by the world around us
HERE aqua takes its inspiration from the energy and vibrancy of open water, while urban gray provides a solid foundation. Together these two colors comprise our primary color palette. Vivid gradients and secondary colors create a bright, positive and versatile extension to our color palette. Combined, the HERE colors ensure a balanced and energetic color system.
Primary colors
The brand colors are HERE Aqua and HERE Gray in combination with white.
The aqua and gray can also be used in a range of tints, or in dark versions for optimal contrast across our three brand modes.
HERE Aqua
Inspired by the energy and freedom of open water.
HERE Gray
Inspired by urban environments, it provides a solid foundation to build upon.
Whitespace
Vibrant colors, photography and layouts need space to breathe – whitespace ensures that.
Gradients and tints
Gradients
The HERE gradient represents flowing data. It’s a highlight element that brings additional color and energy to the brand, and is ideal for text boxes, highlight graphics and illustrations.
Every brand mode has a single primary gradient as well as additional secondary gradients for variety.
Gradient principles
Avoid overuse of the gradient
Gradients are used as a highlight element only. They should occupy a maximum of around 30% of the total space of a touchpoint. Remember that the HERE design language is more than just our gradients – every page, PPT slide or merchandise design doesn’t have to have the gradient!
Only use pre-made gradients
Never generate new gradients and always ensure the gradient set is from the correct brand mode. Once placed into the layout, gradients should always go from one corner to the other, moving in a diagonal direction.
Slight opacity
Gradient layers use an opacity of 90–95% to allow a subtle show-through. Busier images typically use a slightly stronger opacity.
Tints
Flat tints are paired with the gradients for emphasis and support. They help to balance a layout, create calm areas and create additional depth when layered.
Tint principles
Use together with the gradient
Where possible, try to use tints in combination with the gradient. You can use them more prominently in environments that have a lot of whitespace, like social media platforms.
Always in the background
Where tints are used they are always the background layer of a layout – they build the foundation.
Livening up content
For certain cases such as social media posts, tints are ideal for placing content or headlines.
Single color scheme
If you’re designing a single touchpoint stick to one color scheme (e.g. yellow to aqua).
Multiple color schemes
A series of touchpoints can use more than one color scheme to create vibrancy and variety (e.g. use of multiple gradients in series).
Combining gradients with photography
The gradient color system is designed to be user-friendly and flexible so that all gradients can be used freely on photos. However, in best practice, we recommend choosing the gradient color that best suits the image color climate (e.g. if the image has a lot of orange, choose a color which does not clash with orange).
Core mode palette
The core mode has a pre-made set of 5 vibrant gradients. The yellow to aqua gradient is the primary gradient and considered the default choice.
Each gradient is accompanied by its own tint that corresponds to the color of the gradient.
Core mode tint values
Developer mode palette
The developer mode has a pre-made set of 3 vibrant gradients. The vivid purple to aqua gradient is the primary gradient and considered the default choice.
As this mode is set in a darker, more technical environment, either HERE Gray or HERE should be used as the accompanying tint or background layer.
People mode palette
The people mode has a pre-made set of 5 vibrant gradients. The orange to pink gradient is the primary gradient and considered the default choice. The other gradients are secondary.
To create a more vibrant and colorful impression, the gradient is placed as the background layer in this mode. The flowing data layer and text container is then white.
Remember
When designing content-heavy material like presentations and e-books, use gradients and tints more subtly. Use more whitespace and use gray areas to divide your content.
Accent colors
Our accent colors are vivid, creating a bright, positive feature colors for use across a multitude of touchpoints. Accent colors are not mode-specific and can be used across all three modes.
When to use
The HERE accent colors provide a vibrant set of tones. Use them for highlights in illustrations or to draw attention to important data in charts, tables, and data overlays.
Accent palette
Red
Pink
Orange
Yellow
Dark Green
Light Green
Dark Blue
Light Blue
Purple
