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

1. Online Style Guide

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. 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. 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. 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. Typefaces
Body Copy
Montserrat Regular
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 (!@#$%&.,?:;)
Headings
Montserrat Bold
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 (!@#$%&.,?:;)
Online Style Guide
Page 5

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Primary Navigation
Home Page Selected
Home Page Selected,
Hovering over Store
Online Style Guide
Page 16

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. Secondary Navigation
Physical Therapy Page Selected
#98E0E4
#65C1C6
Physical Therapy Page Selected
Hovering over Classes
Online Style Guide
Page 18

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. 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. 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. 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. Example Pages
Online Style Guide
Page 23

25. Example Pages
Online Style Guide
Page 24