Visual Identity

Logo Specs and Aplication


myperfectresume-logo

Regular version:

This is the visual representation of our brand and as such, needs to be reproduced accurately and consistently across all LiveCareer branded materials.

myperfectresume-logo

Employer version:

This is the visual representation of the LiveCareer Employer brand, it needs to be reproduced accurately and consistently across all LiveCareer branded materials.

myperfectresume-logo

Reverse regular version

myperfectresume-logo

Reverse employer version


Icon


The LiveCareer icon can be used by itself, as graphic support or in situations where there are text restrictions, for example social media.

If necessary, the icon can be used with one of the primary colors.


Minimum Size and Safe Area


Within reason, you should always try and give the LiveCareer logo as much air around it as you can. Never crowd the logo with any other graphic object. The minimum amount of room to leave around the logo is indicated here.

It’s important that we never compromise the logo by trying to reproduce it in a way that’s not suited to its form.

To this point, the logo should never be reproduced smaller than 70 pixels wide.

The maximum size of the logo is dependent on the size of the medium that contains it.

min-logo


Minimum Size and Safe Area for Employer Logo


The logo should never be reproduced smaller than 150 pixels wide.

min-logo

Incorrect Logo Alterations


  • Constrain proportions.
  • Do not rearrange elements.
  • Do not rearrange elements.
  • Do not use on an angle.
  • Do not use over a gradient background/ keep high contrast1.
  • Keep logo resolution (example is a pixelated logo).
  • Do not change colors.
  • Do not use logo white on white.
  • Do not use logo black on black.

Examples of incorrect usage below:


Colors

Primary colors

The LiveCareer logo uses two main colors - HEX#F8971D and HX#F0593B.

For consistency, it is important that these colors are reproduced as accurately as possible. Care must be taken in selecting the correct color reference for different applications.


Pantone
1365
CMYK
0/48/98/0
RGB
248/151/29
HEX
#F8971D
Pantone
7417
CMYK
0/80/85/0
RGB
240/89/56
HEX
#F0593B

Secondary colors


Pantone
7540
CMYK
68/57/56/36
RGB
108/108/108
HEX
#494E4F
Pantone
663
CMYK
2/1/1/0
RGB
247/247/247
HEX
#F7F7F7
Pantone
663
CMYK
1/1/1/0
RGB
238/249/255
HEX
#FBFBFB
Pantone
656
CMYK
5/0/0/0
RGB
238/249/255
HEX
#EEF9FF
Pantone
649
CMYK
13/0/0/0
RGB
218/242/255
HEX
#DAF2FF

Buttons Colors


Primary Buttons
Pantone
7625
CMYK
0/78/72/0
RGB
241/96/77
HEX
#F1604D
Secondary Buttons
Pantone
8604 C
CMYK
23/18/0/71
RGB
57/61/74
HEX
#3591CF
Tertiary
(Border value )
Pantone
656 C
CMYK
4/2/0/2
RGB
241/246/251
HEX
#F1F6FB

Additional Colors: Graphics & Icons


Graphics
Pantone
566
CMYK
4/0/4/0
RGB
243/253/246
HEX
#F3FDF6
Graphics
Pantone
7465
CMYK
54/0/30/0
RGB
70/207/185
HEX
#46CFB9
Icons
Pantone
2420
CMYK
64/0/74/0
RGB
71/206/118
HEX
#47CE76
Icons
Pantone
459
CMYK
7/15/100/0
RGB
240/206/0
HEX
#F0CE00


Examples

Landing Page



Social



Email


Icons

This icon set contains multiple categories. The Stick figure category is the one being displayed. Other categories are:

  • Files and Documents
  • Audiovisual
  • Devices & Technology
  • Time & Calendar
  • Customer Service
  • Ideas
  • Strategy & Goals
  • Eyes
  • Head & Torsos
  • Tools & Work
  • Mail & Text
  • Hands
  • Pins & Locations
myperfectresume-logo

Patterns

Gradients

This gradient has been introduced to create more depth in the Live Career website. This gradient will mainly be used for background and color should not be altered.

The gradient is placed horizontally, linear at a 0° angle. The values are #CAD8E6 and #F1F6FB.


 



Example


Typography

Typography Palette

We use three fonts for all LiveCareer communications, Gotham, Helvetica Neue and Open Sans.

For web design we use Gotham Light for H1 headlines, Gotham Medium for H2 headlines and Open Sans Regular for body copy. Gotham Medium is used for buttons and Open Sans SemiBold for menus.

For print communications we use Gotham bold and bold italic for headlines and sub-heads, and the Helvetica Neue Regular for body copy.


Typography Use / Applications for web

Gotham
Weight: 400
Style: Normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)



Open Sans
Weight: 400
Style: Normal
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)
 
 
 
 

Usage Examples Desktop

H1 Marketing Headlines - Gotham Light | 30px

H2 Sub Headlines - Gotham Medium | 20px

Paragraph 1 - Open Sans | 14px

Menus - Open Sans | 14px

Buttons - Gotham Medium | 12-14px


Usage Examples Mobile

H1 Gotham Light | 30px

H2 Gotham Light | 24px

H3 Gotham Medium | 20px

P Open Sans Regular| 16px


 
 

Other Applications

 

Grid System


Desktop & Mobile Grid

We use the Bootstrap responsive framework for page design. This allows a consistent, easy to use and flexible system that adjusts itself depending on the device resolution of the client, as the grids have defined classes that sync with the device resolution. The designer needs to be aware of the grid system. For design work, we use these 2 main artboard settings:


Large devices/ desktop (bigger than 1200 px)

  • Artboard area: 1440 px
  • Total Width Bootstrap: 1170px
  • Columns: 12
  • Gutter: 30px
  • Column width: 68px
  • Grid: Center

Mobile (extra small devices,under 768px)

  • Artboard area: 320px
  • Column: 1
  • Margins: to be determined per brand designer, beginning from 20px onward


grid-placeholder


IMAGE USE

For hero image area/ photography use, we maintain the following practice:


Large devices/ desktop (bigger than 1200 px)

  • Image should be 2048 px wide.
  • When creating the image, take into consideration how the focus area and the page elements fall on the grid. Establishing enough width on the side areas to address large screens, be it by adding a background color or photoshop.

Mobile (extra small devices,under 768px)

  • Mobile jobs will have a second photo when necessary.
  • Image should be 767 px wide.
  • Take into consideration the image and page elements placement in the smaller devices.

Photography

As we bring LiveCareer forward into the world, it’s important that we try and maintain a consistent approach to the kind of photography we use.

When using stock photography try and locate images that are bright, naturally lit, contain people, give the feeling of confidence and have good eye contact either with the viewer or the product or person with which they’re interacting.

Use images that our business customers can relate to; friendly, relaxed, confident and approachable are all concepts you should have in mind when you source stock images.


To access the photography library for LiveCareer access the information below with the username and password.


URL: https://bold.webdamdb.com/splash.php

Username: Marketing

Password: BOLDM@rketing1


Illustration

ilustration

Video

Audiovisual Content

We have created various types of content for the LiveCareer Brand like: Facebook Tutorial video, IGP Infomercial and a LiveCareer introductory video. They all incorporate motion graphic elements and use the LiveCareer icon as part as the animation to enhance the logo. Below some images.