branding style guide
JFerreira.ca
< 2014 / 2015 >
p. 2
Table of contents
A message from myself
p. 3
concept
Main Ideas p. 4
Typography p. 5
Colour Scheme p. 6
logo
Variations p. 7
Clear space p. 8
Usagep. 9
presentationp. 10
A Message from Myself
Welcome to my style guide! Here I will layout all of the rules, the inspiration and the drive behind the brand
identity that I have developed for myself.
JFerreira.ca is a personal web-developer portfolio I have created to fit the style and personality of me, Jonathan
Ferreira. In doing so I have taken time and careful consideration to how my brand is best represented. The inspiration for my brand comes from myself of course. From my personal taste to my future goals, the ingredients are all representations of myself. For example, the main colour scheme is a variety of reds. It also so
happens; red is and always will be my favourite colour. Another example could be the bright text on a dark background. This resembles some styles of programs used to write code. Fitting for someone with the goals of
being a web developer. The list goes on and this guide will further explain the brand of JFerreira.
Using the information and rules outlined in this guide my brand will maintain a consistent look and feel. It will ensure the same effect across all different types of media. With the help of this style guide, JFerreira.ca will
always be a full representation of myself.
ge from m
ys
ssa
el
me
f
a
Jonathan Ferreira
a
ge
sa
es
m
from my
se
lf
p. 4
Concept
Main Ideas
• Large and engaging typography.
Preliminary website sketches and
brand brainstorming notes.
• Single page with easy access to information.
• Branding myself as “beginning a journey”.
• Usage of icons and copy to resemble personality traits such as love of travel;
• Usage of my personal favourite colours and typography.
• Inspired by the theme of some coding programs.
Logo sketches. End design is a
product of two logo ideas combined.
From paper to pixel, the concept of this brand started from scratch using a pen and some graph paper. Once a theme, colours, and type
where chosen it was time to go digital. Through the digital design process the layout changed several times until this sharp angled, geometric style was decided upon.
Concept
p. 5
typography
couture BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYZ
COUTURE BOLD ITALIC
ABCDEFGHIJKLMNOPQRSTUVWXYZ
DISTRICT PRO THIN
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890 ! @ # $ % ^ & * ( )
The two fonts that are featured on JFerreira.ca are “Couture” and “District Pro”. While Couture is big, bold, and beautiful, District Pro is quite
the opposite. This font is thin, simplistic, and clean. Together these two fonts offset each other nicely, which is why they have been chosen
for the brand. Couture is used for headings, allowing them to be large and clearly visible. District Pro on the other hand is used for the copy,
allowing the content to remain neat and clean.
p. 6
CONCEPT
colour scheme
Hex: #D93636
R: 217 G: 54 B: 54
C: 9% M: 94% Y: 87% K: 1%
Hex: #1A1A1A
R: 26 G: 26 B: 26
C: 73% M: 67% Y: 65% K: 78%
Hex: #8C2323
R: 140 G: 36 B: 36
C: 28% M: 96% Y: 91% K: 29%
Hex: #FFFFFF
R: 255 G: 255 B: 255
C: 0% M: 0% Y: 0% K: 0%
Hex: #4C1313
R: 77 G: 18 B: 18
C: 42% M: 87% Y: 78% K: 65%
Used for logo, background image, and links.
Used for logo and
background image.
Used for outlines,
borders, labels and
header text.
Used for logo text, copy,
and icons.
p. 7
Logo
variations
colour on dark background
colour on Light background
Border colour changes
to #1A1A1A on light
background.
white
black
No outline when in black
or white.
Whenever possible the logo should always appear in colour, whether it is on a dark or light background. The information outlined above is
how the logo correctly appears on different coloured backgrounds and in black and white (if for any reason the logo needs to appear that
way). For colour specifications see p.6.
p. 8
Logo
clear space
Above is the minimum clear space that allows the logo to look its best. This clear space should be used in both print and in web.
*Wire details removed
when scaled to
minimum.
38.8 px
135.3 px
Above are the minimum size the logo can be scaled too; any smaller and the colours and outlines begin to overlap each other. As well as the
“J” becomes unreadable. *Note the wire pattern missing from the head icon. This is the only time the logo may be altered in anyway.
p. 9
logo
usage
Do not remove the stroke, unless using black and
white logo.
Do not increase the size of the stroke. The size is
always 1pt.
Do not skew, distort, or rotate any single part of
the logo or the logo as a whole.
Do not recolour the logo unless using the black
or white variations. Even if the colours match
the scheme of the brand. No other styling effects
should be added.
Do not rearrange the order, add or subtract kerning from the logo. The space between the “head
icon” and the “f” is always 4px. Also the head
icon should never appear without the text.
Do not place the logo on a similar or same
coloured background. The logo should also not
appear on any colour specified in the scheme
other than the #1A1A1A and #FFFFFF variations; which is ideal.
presentation
p. 10
Jonathan Ferreira
519 - 902 - 4931
[email protected]