Eligent

Kommunikasjonsplattform

Download PDF (Norsk, English)

Logo

Icon

Download icons (svg, png, jpeg, pdf)

The height of the lowercase 'e' (x-height) serves as the minimum clear space required around the logo.

Logo

Download logos (svg, png, jpeg, pdf)

The height of the lowercase 'e' (x-height) serves as the minimum clear space required around the logo.

Logo works in various sizes

Logo and colour

The Eligent logo has two levels of usage with colour. The primary level, consisting of isblå on dark surfaces and sjøgrønn on light surfaces.

(t.l.) Logo in isblå and logo in sjøgrønn

The secondary level consisting of isblå (left) and sjøgrønn (right) but also lys jord in the middle for times where its relevant to create more warmth and reflect the hue of the imagery used.

Logo with payoff

Download logos with payoff (svg, png, jpeg, pdf)

The height of the lowercase 'e' (x-height) serves as the minimum clear space required around the logo.

Clear space

A certain amount f space is needed around the logo in order to prevent it becoming cluttered by surrounding elements

For the Eligent logo, the minimum space needed around is equal to the height of the ‘e’ also known as x-height. This rule is to be used to define the space between two elements on the surface, and not to define the margins on any given format.

The height of the lowercase 'e' (x-height) serves as the minimum clear space required around the logo.

Logo sizing

Logo only

On large formats (t.v) om most medium to large surfaces the logo occupys a medium sized apperance of around 1/2 logo widths to the edge in size. On smaller surfaces, where the logo stands alone (such as packaging and trims) it generally takes on a slighter larger and more generous size which is around 1/3 logo widths to the edge in size.

(t.v.) Medium to large
(t.r.) Small — (t.v.) Medium to large (t.r.) Small

Logo with tagline

On large formats (t.v) om most medium to large surfaces the logo occupys a medium sized apperance of around 1/4 logo widths to the edge in size. On smaller surfaces, where the logo stands alone (such as packaging and trims) it generally takes on a slighter larger and more generous size which is around 1/10 logo widths to the edge in size.

Logo placements

See examples of the logo placements in banners or applications

3 positions with expanded or 6 positions as lock up

Common mistakes

Don’t place other content or any imagery inside

Don’t use gradients or other digital effects

Don’t place the logo at an angle

Don’t stretch or alter the proportions of the logo

Icons and illustrations

Download icons (svg, png, pdf)

The icons and small illustrations comes in different sizes to ensure that the line thickness scale correctly. Small icons need a thicker line weight than larger icons.

Icons in small for UI components, Navigations and illustrational icons.

All icons is created with the same dotted pattern we find in Bulb monoline font

Examples on usage of the icons. Used on cards to give context to the message or in a list to help the user scan and find the information they need.

Typografy

Download typography (otf, ttf) and web (woff, woff2)

Galano Grotesque

Download galano grotesque (otf, ttf) and web (woff, woff2)

Larger titles and preambles use 100% and 110% leading

Avenir

Avenir is system font and you will find it on your macbook, pc, google sheets etc

For web we use adobe fonts licence. https://use.typekit.net/zlj5nuh.css

Bulb Monoline 500

Download Bulb Monoline 500 (otf, ttf) and web (woff, woff2)

Only use bulb for buttons, tags and technical information

Rules of typography

The type is centered or left aligned

Use sentence case

Galano is used for large text

Avenir is used for paragraphs

Bulb is only used for smaller tags, words and technical information

Align

Colors

Primary

Mørk Grønn

HEX

#003E40

Sjøgrønn

HEX

#005B61

PMS

5473 C

Isblå

HEX

#D8EDEC

PMS

317 C

Jord

HEX

#64746E

Lyng

HEX

#C3CDB4

Lys jord

HEX

#EFF6E6

Gray scale

Hvit

HEX

#FFFFFF

Grå 5

HEX

#F0F0F0

Grå 10

HEX

#D8D8D8

Grå 20

HEX

#AEAEAE

Grå 40

HEX

#8F8F8F

Grå 60

HEX

#5C5C5C

Grå 80

HEX

#343434

Black

HEX

#000000

Color contrasts

Common mistakes

Don’t use logo with not enough contrast

Social media post

Download guide (png)

For aspect ratio 4:5 (1350x1080) use a 24 row vertical grid and 3 col grid. The grid should be 1 part while the space between should be around 0.25 of the height of the row. Margin should be approximately 1.4 times the height of the row. 1350 x 1080 instagram post the margin is 56px

Example for 4:5
Simple vertical grid ensuring correct vertical placement and spacing. Should be at least one bar between content. — Example for 4:5 Simple vertical grid ensuring correct vertical placement and spacing. Should be at least one bar between content.

Renderings with logo

Logo can be rotated and used only in special cases.

Usage of text on images

Some images doesn’t have sufficient contrast to the background, in these cases a colored background can be used. The box sizing is dynamic and follows the text

The coloured box can be darker and less visible

Or in a contrasting colour and used as an element

Here the text has enough contrast to the background and dont need a coloured box behind

Usage of images

if the images has enough contrast to the background then text can be placed on top of the images with out a colored background.

Usage of text on coloured backgrounds

Common mistakes

Wrong color on logo and tagline and not enough contrast to title

Don’t introduce new colors and a way to strong gradient. Placement of title interfering with motive

Instagram grid examples

Try alternate between using image only, logo only and text posters so the grid will look varied and not interesting and have to much repetition. If the images from a case is good no need to place logo or text above.

Banners

Digital advertisement banners needs to be designed based on language, message and sizes. It is a large various size differences ranging from 234x60 to 720x300 and larger.

Use Avenir for newsletters, this is a system typografi and will ensure that type is consistence across devices and mediums.

Print

Example on technical data sheet and envelope

Presentations

Examples on presentations

Applications

A collection of applications that serve as inspiration and best case implementation of the identity on various formats. To be updated with real examples and documentation as we complete parts of the project.