Visual Identity

Logo Specs and Application


The symbol of the brand makes reference to a document that could represent either resume or a cover letter. The brand symbol should not be used without the logotype.

When writing messaging and using the name of brand, should always be written as one word including the hyphen. (Resume-Now)


myperfectresume-logo

Logo preferred version

myperfectresume-logo

Logo preferred reversed version


Minimum Size and Safe Area


Minimum size refers to the smallest size to which the logo may be reproduced to ensure its legibility. Observe the size requirements of the logo to avoid poor reproduction quality or distortion.

min-logo

Incorrect Logo Alterations


  • Do not change the relative sizes of the logo elements.
  • Do not distort the logo elements
  • Do not use the an incorrect resolution.
  • Do not change the logo colors.
  • Do not change the order of the logo colors.
  • Do not place a white logo on a pale background.
  • Do not place a black logo on a dark background.

Examples of incorrect usage below:

Colors

Primary colors

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

Primary colors for the RN logo.


Pantone
130 U
CMYK
0/41/88/4
RGB
246/145/30
HEX
#F6911E
Pantone
2119 C
CMYK
79/56/0/63
RGB
19/40/92
HEX
#13285C


RN Button color
Pantone
2718 C
CMYK
69/40/0/13
RGB
69/133/221
HEX
#4585DD
RN Footer color
Pantone
8604 C
CMYK
23/18/0/71
RGB
57/61/74
HEX
#393D4A
RN Background color
Pantone
656 C
CMYK
4/2/0/2
RGB
241/246/251
HEX
#F1F6FB

Secondary colors

This color will be use for details like lines, highlighting sentences or bullets.



Pantone
142 C
CMYK
0/26/65/1
RGB
252/187/88
HEX
#FCBB58


Examples

Landing Page





Social





Email



Icons

This icon library contains multiple categories. The User Interface set is the one being displayed.
Other categories are:

  • Social Media Set
  • Video Set
  • Household
  • Gaming & Entertainment
  • Files & Folders
  • Devices &Networks
  • Controls & Navigation
  • Audio Set


myperfectresume-logo

Patterns

Gradients


Gradients are only to be used on photographs for Social media or on Hero Images for Landing pages. They are not to be used as backgrounds.

Their only use is on photographs for Social media or Hero Images for Landing pages.


Pattern #1 70% Opacity #08234B to #25A8E0



Pattern #2 65% Opacity #63A2BE to #346989



Pattern #3 50% Opacity #A1E0EC to #92D4F0

 
 
 



Typography

Typography Palette


Source Sans Pro is a sans serif typeface created by Paul D. Hunt for Adobe Systems. It is available in 12 weights (Regular, ExtraLight, Light, Semibold, Bold, Black) in upright and italic styles.


Typography Use / Applications for web

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

Extra-Light

Extra-Light Italic

Light

Light Italic

Regular

Regular Italic


Semi-Bold

Semi-Bold Italic

Bold

Bold Italic

Black

Black Italic


 
 
 

Usage Examples Desktop

H1 - 50px, Source Sans Pro, Light

H2 - 40px, Source Sans Pro, Light

H3 - 30px, Source Sans Pro, Regular

H4 - 20px, Source Sans Pro, Semibold

H5 - 18px, Source Sans Pro, Semibold

Usage Examples Mobile

H1 - 30px, Source Sans Pro, Regular

H2 - 24px, Source Sans Pro, Light

H3 - 18px, Source Sans Pro, Regular



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 the main image type to be used for this brand. As creative briefs are developed, we will give more direction to standardize photography for the brand.


To access the photography library for Resume-Now 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


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.