Resources center

Brand / Design

Logotype

The logotype is the image of the company. It’s the first graphic element that people have in front of them. We have to be very protective and careful on the use of this element. You can find below some basic use cases for the logo. If you have any questions email the creative team.

Logo : How to use it

White background

Use white version of the logo Use official color as background

Image background

Use white version of the logo Use a dark blue filter on image Dark blue: #01405d
Opacity: 20% minimum

Dark background

Use official color as background Use white version of the logo

Don’t

Change the color of the mark.

Don’t

Rotate,change the direction of the logotype or logomark.

Don’t

Place logo over patterns, photos or other logos.

Prism : How to use it

White background

Use white version of the logo Use official color as background

White background

Use white version of the logo Use official color as background

White background

Use white version of the logo Use official color as background

White background

Use white version of the logo Use official color as background

White background

Use white version of the logo Use official color as background

White background

Use white version of the logo Use official color as background

Safety Space

There must be .25” spacing around the logo at all times

Download Logo Package

Included Logo and Single Prism

Font

Having consistency in the way we are using the font on our website and our document is key. It makes it more corporate and avoid some branding issues. It could also help you to makes your design looks good.If you have any questions email the creative team.

Lato : How to use it

Main title

Use white, font size : 55pt Uppercase and bold Line Height : 45pt Use a dark blue filter on image Dark blue: #01405d Opacity: 20% minimum

Regular Title

Font size : 34pt Uppercase and bold Line Height : 54pt – Use plain color background See Color Use below.

Small Title

Font size : 18pt Uppercase and bold Line Height : 24pt – Use plain color background See Color Use below.

Regular text

Font size : 18pt LowerCase and regular weight Line Height : 24pt – Use plain color background See Color Use below.

Download Lato Font

Klinic : How to use it

Sub-Title

Use white, font size : 28pt Lowercase and Regular Line Height : 45pt Use a dark blue filter on image Dark blue: #01405d Opacity: 20% minimum

Quote And Regular Sub-title

Font size : 16pt Lowercase and bold Line Height : 36pt – Use plain color background See Color Use below.

Download Klinic Font
Download Klinic How to instal a font

Color and typography

Link

Use Blue : # 04c2f4 Uppercase and bold

Link and highligh text

Use Pink : #ef5093 Uppercase and bold

Light Grey Background

Use black text or colored text (blue / pink)

Blue background

Use White text

Dark Blue Background

Use White Text

Green Background

Use White Text

Don't

Pink Background

Don't

Pink Background and Blue text

Don't

Blue Background and Pink text

Don't

green Background and Pink text

Don't

Green Background and Blue text

Colors

Having consistency in the way we are using the font on our website and our document is key. It makes it more corporate and avoid some branding issues. It could also help you to makes your design looks good.If you have any questions email the creative team.

#0c242f

rgba(12, 36, 47,1)

Use for:
Background
Button and hoverState

#01405d

rgba(56,156,194,1)

Use for:
Background
Button and hoverState

#14acf2

rgba(20,172,242,1)

Use for:
Background
Button and hoverState

#00afde

rgba(0,175,222,1)

Use for:
Background
Button and hoverState

#0ac578

rgba(10,197,120,1)

Use for:
approval message
Promo banner and CTA

#e45a5a

rgba(228,98,90,1)

Use for:
Error Message
Other "negative" element

#ef5093

rgba(239,80,147,1)

Use for:
Link
Highlighted Text

#dddddd

rgba(221,221,221,1)

Use for:
Inactive element
Background / Others

#eaeaea

rgba(234,234,234,1)

Use for:
Lines / background
Others

Background Color

#f6f6f6

rgba(246,246,246,1)

Icons

To have a strong branding, we need a strong and consistent icon set to illustrate what we need to tell. You can dowload individual icon by clicking on the name or download the entire set at the bottom of the page. If you have any questions email the creative team.

cursor

crosshair

zoomin

zoomout

view

attach

link

move

edit

writingdisabled

erase

Compose

lock

unlock

key

key

backspace

ban

target

tag

tag

bookmark

flag

like

dislike

heart

star

sample

crop

layers

fill

phone

rss

video

reply

mail

inbox

chat

ellipsischat

ellipsis

user

femaleuser

users

cart

creditcard

cost

barchart

pie chart

box

box

home

buildings

warehouse

globe

navigate

signpost

map

map

location

pin

pin

database

harddrive

music

mic

mic

highvolume

camera

picture

play

pause

stop

record

rewind

fastforward

eject

repeat

replay

ellipsischat

Photos

Photos are always hard to choose. We don't have internal pictures but Internet our dear friend has some great resources, like free stock photos library with great pictures. Here's selection. If you find new website with great pictures, feel free to email the creative team.

Template

Never let you presentation deck be ugly. You can download here different template in illustrator / keynote and Powerpoint format. If you have any questions email the creative team.