Digital Guidelines – Basics
Download the Jotun logo in the file format that suits your project – SVG, PNG, EPS and PDF. Carefully read the guidelines for the recommended sizes and distances from the logo to surrounding design elements (clear space). Jotun primary and secondary colours are presented with RGB and HEX values. Use our preferred digital typefaces and/or systems fonts whenever possible. An icon set for social platforms, apps / digital applications is also provided.
Digital file formats
The Jotun logo – optimised for web and digital use
The Jotun logo is the key component of our identity, and appears on all our materials and communications – including our digital communication.
Use the links below to download the Jotun logo optimised for web and digital use.
The logo must be used in the form downloaded and cannot be altered in any way.
PNG – 5KB – 300x87px – RGB
PNG – 9KB – 600x174px – RGB
PNG – 19KB – 1200x349px – RGB
EPS - 1.1MB – 1200x349px – RGB
PDF – 64KB – 1200x349px – RGB
Clear space
Ensuring logo visibility and impact
The clear space around the Jotun logo is intended to ensure visibility and impact on digital devices of all sizes.
The clear space should be regarded as the minimum safe distance, and you should consider allowing more margin if necessary.
Clear space 1 – for small formats such as SoMe thumbnails, app icons, mobile digital ads etc.
The clear space equals half the height of the letter N (marked as x) and is used to establish the minimum distance to other design elements. When used on a Jotun blue background, the clear space indicates the minimum size of the blue area around the logo.
Clear space 2 – on bigger formats such as desktop digital ads, SoMe cover images, videos etc.
The clear space equals the width of the letter N (marked as x) and is used to establish the minimum distance to other design elements. When used on a Jotun blue background, the clear space indicates the minimum size of the blue area around the logo.
Minimum size
Ensuring logo legibility and impact
Establishing a minimum size ensures that the Jotun logo is reproduced correctly on all digital devices, without compromising legibility and impact.
To ensure that the Jotun logo is always clearly legible, it should never be reproduced with a width of less than 70px in any digital communication. For logos with payoff, the minimum width is 200 px.
Applications, thumbnails etc.
For applications, thumbnails etc. the logo size is automatically established as less than 70 px based on predefined settings. However, for all adjustable logo sizes, the minimum width cannot be less than:
– 70 px for the Jotun logo without payoff
– 200 px for the Jotun logo with payoff
-
Logo
Digital file formats
The Jotun logo – optimised for web and digital use
The Jotun logo is the key component of our identity, and appears on all our materials and communications – including our digital communication.
Use the links below to download the Jotun logo optimised for web and digital use.
The logo must be used in the form downloaded and cannot be altered in any way.
SVG – 4KB – 300x87px – RGB
PNG – 5KB – 300x87px – RGB
PNG – 9KB – 600x174px – RGB
PNG – 19KB – 1200x349px – RGB
EPS - 1.1MB – 1200x349px – RGB
PDF – 64KB – 1200x349px – RGB
Clear space
Ensuring logo visibility and impact
The clear space around the Jotun logo is intended to ensure visibility and impact on digital devices of all sizes.
The clear space should be regarded as the minimum safe distance, and you should consider allowing more margin if necessary.Clear space 1 – for small formats such as SoMe thumbnails, app icons, mobile digital ads etc.
How to calculate it
The clear space equals half the height of the letter N (marked as x) and is used to establish the minimum distance to other design elements. When used on a Jotun blue background, the clear space indicates the minimum size of the blue area around the logo.
Clear space 2 – on bigger formats such as desktop digital ads, SoMe cover images, videos etc.
How to calculate it
The clear space equals the width of the letter N (marked as x) and is used to establish the minimum distance to other design elements. When used on a Jotun blue background, the clear space indicates the minimum size of the blue area around the logo.
Minimum size
Ensuring logo legibility and impact
Establishing a minimum size ensures that the Jotun logo is reproduced correctly on all digital devices, without compromising legibility and impact.
To ensure that the Jotun logo is always clearly legible, it should never be reproduced with a width of less than 70px in any digital communication. For logos with payoff, the minimum width is 200 px.
Applications, thumbnails etc.
For applications, thumbnails etc. the logo size is automatically established as less than 70 px based on predefined settings. However, for all adjustable logo sizes, the minimum width cannot be less than:
– 70 px for the Jotun logo without payoff
– 200 px for the Jotun logo with payoff -
Digital colours
Primary colours
Our Corporate colours – a distinct and crucial part of our identity
Our primary colours for web and digital use are listed by their RGB values and their hexadecimal equivalents (HEX codes) in order to assure a seamless colour transition between coded and graphic elements.
Only the colours specified below may be used.
RGB: Digital elements
HEX: Coded elementsJotun blue:
RGB values 0 38 100
HEX code #002664
Jotun yellow:
RGB values 252 175 23
HEX code #FCAF17
Jotun red:
RGB values 213 43 30
HEX code #D52B1E
Secondary colours
Colours that complement our primary corporate colours
Our secondary colours are essentially intended to be used as background colours on web and digital material. They can also be used in menu bars, sub menu fields, fact boxes, forms, image captions etc.
These colours are listed by their RGB values and their hexadecimal equivalents (HEX codes) in order to ensure a seamless colour transition between coded and graphic elements.
Only the colours specified below may be used as secondary colours.Cool Gray / Dark:
RGB values 165 172 175
HEX code #A5ACAF
Cool Gray:
RGB values 210 213 215
HEX code #D2D5D7
Cool Gray / Light:
RGB values 232 234 235
HEX code #E8EAEB
White:
RGB values 255 255 255
HEX code #FFFFFF
-
Digital typefaces
Profile typeface
Our Corporate typeface is a fundamental element of our visual style
Jotun’s corporate typeface Frutiger® must be used whenever possible to ensure a consistent look across our print and digital communications. Frutiger® is intended to be clear and highly legible both on printed and digital material.
Jotun's Corporate typeface must be used for digital communications, ads, app identity, videos, info screens etc.
Frutiger® is a licensed font sold by i.e. MyFonts: www.myfonts.com/
Jotun uses the following weights:- Frutiger 45 Light
- Frutiger 46 Light Italic
- Frutiger 55 Roman
- Frutiger 56 Italic
- Frutiger 65 Bold
- Frutiger 66 Bold Italic
- Frutiger 75 Black
- Frutiger 76 Black Italic
System font
Web-safe font available for everybody and cross-platform-friendly
If our Corporate typeface is not suitable or available, Verdana® has been selected as the default standard system font.
Use Verdana on:- Jotun.com
- Join
- PowerPoint presentations
- Office software
- E-mail / e-mail signatures
- Coded text such as HTML text on websites and intranet etc.
-
Coded text
Guidelines for coded text
Colour and font weight – important tools for enhancing typographic hierarchy
The topographic hierarchy helps the user to scan text easily and find key information. Colours and weights in text create a contrast between elements, and ensure that our message is displayed with maximum impact.
Black text
Body text: In black and regular. Enhanced text in bold and black.
RGB values 0 0 0
HEX code #000000
Blue text
Text over background: In blue and regular. Enhanced text in bold and blue.
RGB values 5 48 118
HEX code #053076
Link
Hyperlinked text: In blue and bold.
RGB values 4 56 14
HEX code #04388C
Link – Mouseover
Hyperlinked text on mouseover: Light blue, bold and underlined.
RGB values 75 119 192
HEX code #4B77C0
-
Iconography
Corporate Iconography
Visual tool to draw users into the content
These icons are intended to help the user navigate through the content in a more intuitive way.
These icons are designed primarily for web usage. If you are developing digital applications or other digital material, you can use this icon set as starting point to design the icons your application needs. Remember to maintain the same design style through all your icons in order to ensure a holistic design for all Jotun’s digital material.
NB: Social media platforms have their own guidelines for use of their logos. These are regularly updated, so always check that you are using the latest version.
Corporate icon set for web