Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pediatric Therapy Center Re-Branding & Style Guide

1,305 views

Published on

A complete re-branding of a pediatric therapy center located in Rochester, New York

Published in: Design
  • Be the first to comment

Pediatric Therapy Center Re-Branding & Style Guide

  1. 1. Online Style Guide
  2. 2. Logo Variations Variation to be used when the background color is #FFFFFF or a light image. Variation to be used when the background color is #29292A or #3C3A3C or a dark image. Variation to be used when the background color is #65C1C6, #98E0E4, or #F36020. Online Style Guide Page 1
  3. 3. Logo Standards Spacing Minimum Sizes Always maintain a minimum clear space around the logo. The minimum clear space is defined as the height of the “S” in the wordmark. The minimum width for the horizontal variation of the logo is 2 inches. The minimum width for the stacked variation of the logo is 1.25 inches. 2 inches 1.25 inches Online Style Guide Page 2
  4. 4. Logo Usage Don’ts Never: 1. Don’t change the logo’s orientation 2. Don’t place the logo on a busy image or pattern 3. Don’t change the logo’s colors 4. Don’t crop the logo in any way 5. Don’t add any effects to the logo* 6. Don’t outline the logo 7. Don’t place the logo on a similarly colored background 8. Don’t stretch or skew the logo * A subtle drop shadow may be applied to the logo when it appears over an image. The drop shadow should have the following settings: Blend Mode: Multiply Spread: 0% Color: #000000 Size: 2px Opacity: 25% Contour: Linear Distance: 1px Noise: 0% Online Style Guide Page 3
  5. 5. Color Palette #65C1C6 #98E0E4 #F36020 R: 101 G: 193 B: 198 R: 152 G: 224 B: 228 R: 243 G: 96 B: 32 #29292A #3C3A3C R: 41 G: 41 B: 42 R: 58 G: 58 B: 60 Online Style Guide Colors should be kept flat. Do NOT use gradients, patterns, or textures. Page 4
  6. 6. Typefaces Body Copy Montserrat Regular abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 (!@#$%&.,?:;) Headings Montserrat Bold abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 (!@#$%&.,?:;) Online Style Guide Page 5
  7. 7. Typography Section Headings Section Headings are set to 22pt Montserrat Bold, with a line height of 26pt. They appear in #3C3A3C. Sub-Headings Sub-Headings are set to 16pt Montserrat Bold, with a line height of 20pt. They appear in #65C1C6. Body Copy Body copy is set to 14pt Montserrat Regular, with a line height of 22pt. Body copy appears in #3C3A3C. Online Style Guide Page 6
  8. 8. Typography Links Links are set to 14pt Montserrat Regular, with a line height of 22pt. They appear in #F36020. Links:Hover Hovered Links are set to 14pt Montserrat Regular, with a line height of 22pt. They are underlined and appear in #F36020. Links:Visited Visited Links are set to 14pt Montserrat Regular, with a line height of 22pt. They appear in #65C1C6. Online Style Guide Page 7
  9. 9. Typography Unordered Lists »» Unordered lists are set to 14pt Montserrat Regular with a line height of 26pt. »» Ordered Lists They appear in #F36020 with a double arrow bullet. 1. Ordered lists are set to 14pt Montserrat Regular with a line height of 26pt. 2. They appear in #F36020 with traditional numbering. Online Style Guide Page 8
  10. 10. Typography Top Level Navigation Top Level Navigation is set to 18pt Montserrat Regular, with a line height of 22pt. They appear in #CFD2D4. Drop Downs & Secondary Navigation Drop Downs and Secondary Navigation are set to Online Style Guide 14pt Montserrat Regular, with a line height of 28pt. They appear in #CFD2D4. Page 9
  11. 11. Typography Footer Section Headings Footer Section Headings are set to 16pt Montserrat Regular, with a line height of 20pt. They appear in #CFD2D4. Footer Body Copy Footer Body Copy is set to 14pt Montserrat Regular, Online Style Guide with a line height of 28pt. It appears in #CFD2D4. Page 10
  12. 12. Site Foundation The website will be centered in all web browsers. Background colors will expand to fill the width of the window. Image Minimum Width: 1200px Minimum Height: 420px The header image must be at least 1200px by 420px. #FFFFFF #3C3A3C #29292A 960px Online Style Guide Page 11
  13. 13. Two-Column Grid Body content can be laid out in two equal columns (468px wide) with a gutter (24px wide). Online Style Guide Page 12
  14. 14. Three-Column Grid Body content can be laid out in... »» Three equal columns (304px wide) with two gutters (24px wide). »» One large column (632px wide) and one narrow column (304px wide) with one gutter (24px wide). Online Style Guide Page 13
  15. 15. Header The logo should be 304px wide with a top and bottom margin of 30px. The primary navigation should 550px wide with 40px of padding between each link. Both the logo and navigation should be vertically centered with subtle drop shadows (see page 3 for settings). 304px 550px 30px 135px 30px 106px Online Style Guide 40px Page 14
  16. 16. Footer The footer follows the three column grid with one column 304px wide and one column 632px wide. The copyright information for the website appears at the bottom of the footer, centered horizontally. The content of the footer must remain the same on all pages. 304px 632px 10px 273px 35px Online Style Guide Page 15
  17. 17. Primary Navigation Home Page Selected Home Page Selected, Hovering over Store Online Style Guide Page 16
  18. 18. Drop Down Navigation Home Page Selected, Drop Down Activated Home Page Selected, Drop Down Activated, Hovering over Classes Online Style Guide #65C1C6 #98E0E4 Page 17
  19. 19. Secondary Navigation Physical Therapy Page Selected #98E0E4 #65C1C6 Physical Therapy Page Selected Hovering over Classes Online Style Guide Page 18
  20. 20. Iconography Contact Icons Additional icons should fit the style of the current icons and should consist of a single color. Services Icons Additional icons should fit the style of the current icons and should consist of two colors. Online Style Guide Page 19
  21. 21. Imagery Key Principles: 1. Images should contain children from ages 0 to 7 years old. The children should be smiling and happy. 2. Images should be used sparingly within the body of pages to keep the layout clean and not detract from the header image. 3. When positioned with typography or buttons, do not cover up faces within the image. 4. Images should be of professional quality. Do not use any pixelated or blurry images. Online Style Guide Page 20
  22. 22. Forms Forms should be kept short and simple. Text input boxes should consist of a flat white box with a 1px solid border of #AEAEAE. A clear and concise label should appear above each form input control. Labels should be set in 14pt Montserrat Regular with a line height of 22pt. Labels should appear in #F36020. Online Style Guide Page 21
  23. 23. Buttons All buttons should be rounded rectangles with a border radius of 5px. Buttons should be flat colors – NO gradients, patterns, or textures. Accepted colors are #F36020, #65C1C6, and #3C3A3C. #F36020 should be used sparingly, as an emphasis color. Button text should be set in 14pt Montserrat Bold or larger. Button text should appear in #FFFFFF. Buttons that appear over images should have a 1px stroke in #FFFFFF and a subtle drop shadow (see page 3 for settings). Button appearance should not change when hovered over or clicked on. Online Style Guide Page 22
  24. 24. Example Pages Online Style Guide Page 23
  25. 25. Example Pages Online Style Guide Page 24

×