Hopin brand guidelines

v1.0 — 08.2017


find out more

App icon

The icon designed for use in the HOPIN app is composed of the letter “H” from the logo and lines symbolising transport. The icon is also used in communication directly connected with the application (e.g. on billboards).




Exclusion zone and minimum size of the app icon

  • The exclusion zone ensures legibility and visual impact of the icon. The minimum exclusion zone around the icon is defined as half of its width on all sides.
  • The minimum size makes sure that the icon is legible. Always keep the pre-set dimensions and never display the icon smaller than 30x30 pixels.

download:

HOPIN-icon-devices.zip
HOPIN-logo-app-icon.zip

Hopin yellow logo

Colours

The basic identifying colour of the HOPIN brand is still yellow. It will serve as the dominant colour in all visuals and will be complemented by functional colours that can be used on the website and in communication for accentuating information.


HOPIN blue - CTA
HOPIN black - primary
HOPIN red - special offer
HOPIN purple - news

HOPIN yellow

Typography

The primary typeface for the HOPIN brand is Setup Grotesk with the Regular, Bold and Black variants.
By following these rules, your words will always look good.



Basic typography rules

  • Do not use CAPS LOCK
  • Maintain the proportions and spacing
  • Optimal character count per line: 65/75
  • Use Tracking: Opticaloptical tracking
  • Setup Grotesk Black is used in CTAs and posts with no other text

    • Note: The OpenSans Regular font is only to be used on the website and in the app. Always use Setup Grotesk in communication to make it recognisable.

Aa Zz



SetupGrotesk-Bold.otf

Aa Zz



SetupGrotesk-Black.otf

Aa Zz



SetupGrotesk-Regular.otf

Aa Zz

download:

OpenSans-Regular.ttf

Graphic elements

Except for colours and fonts, basic graphic elements include icons and the concept of a broken or solid line which symbolises traffic.



Dash line

  • The construction of the dash line is based on the letter “H” in the HOPIN logo. Its width and the space between its individual parts is defined by the negative space of the letter
  • Use the concept in visuals according to a specific output – we recommend using it as the main identifying element of the brand on a yellow background (see an example of a citylight below) or as a building block of illustrations.


Iconography

  • Icon construction is based on the icons used in the app. Icons designed to be used in communication (mainly on the website) are illustrated and with added colour
  • For the HOPIN LIMO and HOPIN MHD sub-brands, replace the yellow colour in icons with the colour assigned to the product
  • Never fill in the whole shape of an icon with black.

download:

HOPIN_icons.ai.zip

Business cards

Recommended printing paper type: matte, 300 g, non-textured paper



download:

HOPIN-business-card.zip

Car labelling

To ensure consistency, the construction of the current magnets (icon + app name) has been retained.



download:

HOPIN-car-label.zip

Citylights and ooh

For CLV and outdoor advertising, a strong typography and an illustration of a road or movement through lines and moving text will be used.



For newsletters, we have proposed two basic rules, so that they look good on all devices – the top banner with a fixed height of up to 300 px to communicate the brand or the campaign visual and centred content with one primary CTA.



download:

HOPIN_newsletter.psd

The identity on social media will be based on strong typography, yellow colour, and playing with the road pattern, or connecting different parts of visuals with the use of lines.



download:

HOPIN-fb-assets.zip

Design assets

Mockups of devices and button styles for online and offline use.



download:

HOPIN-mockups.zip
HOPIN-buttons.psd

E-mail signature

For Marketing, Sales and Support



download:

HOPIN-mockups.zip