Visual look

Graphic instructions

These instructions have primarily been compiled for HSY staff. Even though the principles of the look are the same in all activities, more demanding implementations are always designed in cooperation with communications.

Colours

Clarity is one of the cornerstones of HSY’s look. Therefore, try to use a single dominant colour. If you need supporting colours for graphs, maps or highlights, keep them in a clearly smaller role compared to the main colour.

HSY’s main colour is turquoise. More specifically, three shades of bluish-green have been specified: light, medium, and dark. If necessary, so-called “tints” of these can also be used, i.e. the colours can be lightened by percentage.

Black and white, as well as their “tints”, i.e. pure shades of grey, are also used by HSY as main colours.

Fonts

Efforts have been made to have font types ready in the templates. So, whether you are using web-based services, the intranet or Office software, the paragraph styles and fonts have been pre-installed – just use the tools as instructed. NB! Please always use the ready-made styles (heading, subheading, body text, caption, etc.), as this supports the accessibility of the materials.

Why use different fonts?

The Interstate font family specified for HSY from the outset requires a user-specific licence, so this font is not installed on every workstation. The HSY.fi website uses Interstate covered by the licence. Interstate is also used in access signs, brochures and other materials, regarding which you can contact the communications unit.

Primary fonts

• Interstate (and Interstate Plus): professional graphic design use and HSY.fi
• Adobe Source Sans Pro: web services, excluding HSY.fi
• Arial and Calibri: Office software

These fonts cover 99% of HSY’s needs. In addition, typography and fonts are used more freely in campaigns, etc. run by communications, if necessary.

Guidelines for design

All HSY materials, whether electronic or physical, have the same design principles. In line with the legacy of Scandinavian minimalism, the goal is strong and clear visual communication. The new accessibility requirements further support this policy.

Using elements, colours and pictures

• use only two colours whenever possible: for example, white text on a dark-coloured background
• use supporting colours, such as for graphs, carefully and in a clearly subordinate role to the chosen dominant colour
• add more life with (colour) photos
• in graphics, aim for simple shapes: no overly fine details
  exclude frames whenever possible
  forego shading, bulging and other effects

Utilising fonts

• as few different text sizes as possible
• only a few variants (italics, bold, CAPITALISATION, etc.)
• with bold text, skip one weight if the font allows it (regular, bold, black)
• clear background for text: no body text on top of a picture
• use a covering white or coloured box if you want to add some text on top of a large picture