This style guide provides detailed standards for design elements of Abe Nito's website to ensure consistency. It outlines guidelines for the logo and its variations, website design, colors, typefaces, photo styles, and button styles. The purpose is to reflect Abe Nito's work as a digital marketer and web designer and draw attention from potential employers, clients, and other professionals in the industry. The document provides specifications for logo usage, placement, and scaling; the color palette; typography for headings and paragraphs; photo treatment; and button styles.

1. STYLE GUIDE
Abe Nito
www.abenito.com
The purpose of this document is to provide a detailed reference for the standards and specifications
of all design elements that will be used in the development of the website. It should act as a guide to
ensure consistency and improve communication.
This document contains the guidelines for the following: logo and its variations, website design,
format, colors, typefaces, photo styles and button styles. As well as instructions on how
they should be formatted on the website.
Brand Overview
Mission: To showcase all of Abe Nito’s works and projects in a way that is clear and concise - something
that is truly reflective of her work and who she is.
Vision: To serve as a platform that is informative and reflective of who Abe Nito is as a digital marketer and
web designer. This website can draw the attention of future employers, clients and other
professionals in the industry.
Brand Principle: Digital marketing and web design are becoming more and more competitive.
It is through branding, communication and execution that will make this brand and website
stand out, adapt and remain relevant.
Date / Version
October 6, 2017
Version: 1.0
Logo
Primary Logo

2. Logo Variations
Logo Usage
Brand Colors
Text and background:
RGB(0,0,0)
HEX #000000
Text and background:
RGB(230,187,144)
HEX #E6BB90
N
A N
AN
A
White background Grey background Black background
RGB(214,213,213)
HEX #D6D5D5
Do’s Don’ts
Min. width: 50 px
Max. width: 200 px
Unless being using on the landing page, then
dimensions should be as follows:
Min. width: 200 px
Max. width: 400 px
The logo must never be smaller than 50 px or bigger
than 400 px
Scale

3. Logo Usage
Do’s Don’ts
The logo should always be surrounded by generous
white space or negative space based on the height
and width.
See image below for example.
• Do not use animation or effects (rotation,
spinning, fade in, fade out, etc.).
• Do not stretch out vertically or horizontally or any
other way that will distort the logo.
Spacing
Do’s Don’ts
The logo must be present in the landing page and in
the top left corner of every page.
It should be placed in consideration of the
guidelines of the different logo variations and
backgrounds.
• Do not place the logo over text or images.
• Do not place the logo in sections of the website
that will distort it in any way.
Placement
Use on Backgrounds
Do’s Don’ts
The different logo variations must be used
appropriately.
Do not place the logo over colors that are not in
accordance with the guidelines on logo variations
and background.

4. Typography
Color Scheme
Primary Color Palette
Secondary Color Palette
RGB(230,187,144)
HEX #E6BB90
RGB(0,0,0)
HEX #000000
RGB(214,213,213)
HEX #D6D5D5
RGB(255,255,255)
HEX #FFFFFF
RGB(238,35,13)
HEX #EE230D
RGB(183,148,116)
HEX #B79474
RGB(146,146,146)
HEX #929292
Used for hyperlinks, text emphasis, call-to-action text or
background color for certain sections of the website.
Heading Typeface
ABCDEFGHIJKLMN
OPQRSTUVWXYZ
abcdefghijklmnopqr
stuvwxyz
Heading One
Heading Two
Heading Three
Heading One Heading One Heading One
Font
20 pt
18 pt
15 pt
Black, white and grey color variations for different background colors
Size
Heading Two Heading Two Heading Two
Arial Bold
Heading Three Heading Three Heading Two
Color
RGB(0,0,0)
HEX #000000
RGB(255,255,255)
HEX #FFFFFF
RGB(214,213,213)
HEX #D6D5D5

5. Typography
CopyTypeface
ABCDEFGHIJKLMN
OPQRSTUVWXYZ
abcdefghijklmnopqr
stuvwxyz
Paragraphs
Ordered Lists
Unordered Lists
Helvetica Neue Regular
Font
12 pts
12 pts
12 pts
Paragraphs Paragraphs Paragraphs
Black and white color variations for different background colors
Links Links Links
Photo Treatment
Button Styles
RGB(0,0,0)
HEX #000000
RGB(255,255,255)
HEX #FFFFFF
RGB(214,213,213)
HEX #D6D5D5
Size
Links 12pts underline and bold
Size / Style
Ordered Lists
Unordered Lists
Ordered Lists
Unordered Lists
Ordered Lists
Unordered Lists
Color
Image Resolution: 72 dpi
Contact
anito@my.bcit.ca
Social Media:
RGB(238,35,13)
HEX #EE230D
Red color for different background colors
Facebook Twitter Instagram LinkedIn
Light and dark options for different background colors
Email
Please note that the logo and color palette are different from the ones done in class.
They have been changed as the previous ones did not reflect or represent the brand.