Visual Identity

Logo Specs and Aplication


myperfectresume-logo

This is the preferred logo format.


myperfectresume-logo

The white logo should be used only on a dark background or on top of dark gradients.


Minimum Size and Safe Area


Logo spacing standard is 30px. However, in case this is too small, work in 5px increments.

Example: 5,10,15,20,25, etc.

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.


Colors

Primary colors


MPR Blue
Pantone
660 C
CMYK
77/45/0/0
RGB
45/129/214
HEX
#2D81D6
Complemantary Blue
Pantone
298 C
CMYK
61/28/0/0
RGB
72/164/255
HEX
#48A4FF
Primary Button Color
Pantone
3275 C
CMYK
100/0/100/30
RGB
0/178/132
HEX
#00B284

Secondary colors


  • Grays are reserved for background usage.
  • Blue grays are rarely used.Exceptions are allowed for the header font color and for the button when the preferred color isn’t visible.
  • Dark grays are for font color usage.
  • Oranges and yellows are primarily used as accent colors.


Pantone
649 C
CMYK
3/2/100/6
RGB
232/236/240
HEX
#FBFCFD
Pantone
649 C
CMYK
3/2/100/6
RGB
232/236/240
HEX
#E8ECF0
Pantone
656 C
CMYK
5/2/100/11
RGB
215/221/226
HEX
#D7DDE2
Pantone
656 C
CMYK
5/2/100/11
RGB
215/221/226
HEX
#7D97AD
Pantone
431 C
CMYK
7/7/100/63
RGB
88/88/95
HEX
#58585F
Pantone
7408 C
CMYK
0/22/100/0
RGB
255/200/0
HEX
#FCC800
Pantone
151 C
CMYK
0/50/100/0
RGB
255/128/0
HEX
#FF8000

Tertiary colors


Tertiary colors will be used in cases where complimentary colors might be needed. These colors have been previously used to identify/differentiate specific features when primary and secondary colors are already in use.


EXTRA
#4C56D8
JOBS
#A94BD8
GENERAL CAREER
#DB4D6C
RESUMES
#EA6CBA
INTERVIEWS
#FFC800
COVER LETTERS
#23E2B4


Examples

Landing Page





Social





Email



Icons

Icon assets should be used to represent features. NOTE: This icon set contains multiple categories. The general category is the one being displayed. Other categories are:


  • Electronics
  • General
  • E-commerce
  • Web
  • Miscellaneous
  • Location
  • Arrows
  • Weather


myperfectresume-logo

Patterns

Gradients


Gradient list is in order of preference. Gradient opacity cannot be altered.




Examples




 
 
 



Typography

Typography Palette


Primary font - Roboto Slab/Source Sans Pro Secondary - Montserrat


Typography Use / Applications for web


  • Primary typography for headers is Roboto Slab.
  • Primary typography for body copy is Source Sans Pro.
  • Secondary typography for header and body copy is Source Sance Pro.
  • Secondary typography for body copy Montserrat (rarely used).

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

    Usage Examples Desktop

    H1 Marketing - Roboto Slab | 42px

    H2 - Source Sans Pro-light | 23px

    H3 Marketing - Source Sans Pro-light | 40px

    Paragraph 1 - Source Sans Pro-light | 16px

    Paragraph 2 & Links - Source Sans Pro-regular | 13px


    Usage Examples Mobile

    H1 - Roboto Slab/Source Sans Pro | 32px

    H2 - Source Sans Pro-light | 23px


    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

    • Photography is used as the last resort for MPR.
    • Must represent millennials.
    • Must have natural light.
    • Must be in a creative space.
    • People shouldn’t look directly into the camera.
    • All photographs must have a gradient from the MPR palette.
    • Gradients must have either a 40% or 60% opacity.


    To access the photography library for My Perfect Resume access the information below with the username and password.


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

    Username: Marketing

    Password: BOLDM@rketing1


    Illustration

    • Flat illustrations with flat shadows.
    • Faces shouldn’t have specific features. Keep it neutral.
    • Illustrations must carry the MPR color palette.

    ilustration

    Video

    Audiovisual Content


    We have developed motion graphic videos for MyPerfectResume. They all use the visual identity elements to represent in the video. To ensure differentiation in the videos we have determined some visual elements like:

    • Resumes are represented in illustration (flat design) and the content in the resume is represented as gray blocks.
    • The transitions are made of a diagonal set of lines using the brand colors.