Visual Identity

Logo Specs and Aplication


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


myperfectresume-logo

Logo preferred version

myperfectresume-logo

Logo preferred reversed version

myperfectresume-logo

Logo preferred reversed version

myperfectresume-logo

Logo preferred reversed version


Minimum Size and Safe Area


Within reason, you should always try and give the MightyRecruiter 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 127 pixels wide.

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

min-logo

Incorrect Logo Alterations


  • Constrain proportions
  • Do not rearrange elements
  • Do not use on an angle
  • Do not use over a gradient background/ keep high contrast!
  • 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


The MightyRecruiter logo uses two main colors: Hex 205A88 (dark blue) and HEX 007582 (Teal).

Primary colors

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.

Primary colors for the MR logo.


Pantone
647
RGB
32, 90, 136
CMYK
76, 34, 0, 47
HEX
#205A88
Pantone
7710
RGB
0, 165, 181
CMYK
100, 9, 0, 29
HEX
#00A5B5



Secondary colors

This colors are to be used as:



MR Button color
Pantone
124
RGB
239, 168, 0
CMYK
0, 30, 100, 6
HEX
#EFA800
MR Button color
Pantone
7408
RGB
255, 193, 0
CMYK
0, 24, 100, 0
HEX
#FFC100
MR Text color
Pantone
Cool Gray 10
RGB
101, 101, 101
CMYK
0, 0, 0, 60
HEX
#656565
MR Text color
Pantone
447
RGB
51, 51, 51
CMYK
0, 0, 0, 80
HEX
#333333

Ilustration colors

Colors mainly used for graphics.

Pantone
318
RGB
115, 205, 214
CMYK
46, 4, 0, 16
HEX
#73CDD6
Pantone
123
RGB
238, 191, 27
CMYK
0, 20, 89, 7
HEX
#EEBF1B
Pantone
583
RGB
175, 210, 50
CMYK
17, 0, 76, 18
HEX
#AFD232
Pantone
717
RGB
229, 99, 0
CMYK
0, 57, 100, 10
HEX
#E56300


Examples

Landing Page





Social





Email



Icons

Illustrations are line art style with round corners and color details if needed.
This icon set contains multiple categories presented below:

  • Building-Landmarks
  • Business
  • Celebration
  • Communication
  • Construction-Industry
  • Design-Development
  • Education-Research
  • Electronics-Devices
  • Energy-Ecology
  • Entertainment
  • Finance-Shopping
  • Fitness
  • Food-Drinks
  • Health-Medicine
  • Interaction
  • Photo-Sound
  • SEO-Media
  • Sports-Activities
  • Technology
  • Travel-Tourism


myperfectresume-logo

Patterns

Gradients


This gradient has been introduced to create more a contemporary use of color in the MightyRecruiter website. This gradient will mainly be used for background and as a black & white photograph filter. Color should not be altered.

The gradient is placed horizontally, linear at a 0° angle.


The values are #205A88 and #007582



 
 
 



Typography

Typography Palette


We use three fonts for all MightyRecruiter communications, Open Sans, Gotham and as default typography Helvetica Neue. For print communications we use Gotham for headlines and sub-heads, and the Open Sans for body copy. Gotham is mainly use for print materials and decorative headlines. For web design we use Open Sans for H1 headlines and 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 - 34px, Open Sans, Extra Bold

H2 - 36px, Open Sans, Regular

Paragraph 1 - 18px, Open Sans, Regular

Menus - 14px, Open Sans, Semibold

Buttons - 16px, Open Sans, ExtraBold



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

MightyRecruiter is experimenting with the image of Mighty Kids. This concept is mainly use for hero images in websites and landing pages.

When using stock photography try and locate images that are bright, naturally lit, contain kid in a emotive and inspirational action, give the feeling of confidence and winning.

Never show people from behind in any picture. We should always show dynamic situations in a work environment.


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


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

Username: Marketing

Password: BOLDM@rketing1


Illustration


Illustrations are colorful, simple and flat design in a colorful palette with offsetting color alignment.

illustration

Video

Audiovisual Content


Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.