Portfolio - Style Guide
- 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.