pediatric therapy center re-branding & style guide

Online Style Guide

Logo Variations

Online Style Guide Page 1

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.

Variation to be used when the background color is #FFFFFF or a light image.

Logo Standards


Spacing

Always maintain a minimum clear space around the

logo. The minimum clear space is defined as the height

of the “S” in the wordmark.

Minimum Sizes

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

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

Color: #000000

Opacity: 25%

Distance: 1px

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

*

Spread: 0%

Size: 2px

Contour: Linear

Noise: 0%

Color Palette

#65C1C6

R: 101G: 193B: 198

#98E0E4

R: 152G: 224B: 228

#F36020

R: 243G: 96B: 32

#29292A

R: 41G: 41B: 42

#3C3A3C

R: 58G: 58B: 60


Colors should be kept flat.

Do NOT use gradients, patterns, or textures.

Typefaces


Montserrat Bold

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789 (!@#$%&.,?:;)

Montserrat Regular

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789 (!@#$%&.,?:;)

Body Copy

Headings

Typography


Sub-Headings are set to 16pt Montserrat Bold, with a line height of 20pt. They appear in #65C1C6.

Section Headings are set to 22pt Montserrat Bold, with a line height of 26pt. They appear in #3C3A3C.

Section Headings

Sub-Headings

Body copy is set to 14pt Montserrat Regular, with a

line height of 22pt. Body copy appears in #3C3A3C.Body Copy

Typography


Links are set to 14pt Montserrat Regular, with a line

height of 22pt. They appear in #F36020.Links

Hovered Links are set to 14pt Montserrat Regular,

with a line height of 22pt. They are underlined and

appear in #F36020.

Links:Hover

Visited Links are set to 14pt Montserrat Regular,

with a line height of 22pt. They appear in #65C1C6.Links:Visited

Typography


» Unordered lists are set to 14pt Montserrat Regular

with a line height of 26pt.

» They appear in #F36020 with a double arrow bullet.

Unordered Lists

Ordered Lists 1. Ordered lists are set to 14pt Montserrat Regular with

a line height of 26pt.

2. They appear in #F36020 with traditional numbering.

Typography


Top Level Navigation is set to 18pt Montserrat Regular, with a line height of 22pt. They appear in #CFD2D4.

Top LevelNavigation

Drop Downs and Secondary Navigation are set to

14pt Montserrat Regular, with a line height of 28pt.

They appear in #CFD2D4.

Drop Downs & SecondaryNavigation

Typography


Footer Section Headings are set to 16pt Montserrat Regular, with a line height of 20pt. They appear in #CFD2D4.

Footer Section Headings

Footer Body Copy is set to 14pt Montserrat Regular,

with a line height of 28pt. It appears in #CFD2D4.

Footer Body Copy

Site Foundation


960px

#29292A

#3C3A3C

#FFFFFF

ImageMinimum Width: 1200px

Minimum Height: 420px

The website will be centered in all web browsers.

Background colors will expand to fill the width of

the window.

The header image must be at least 1200px

by 420px.

Two-Column Grid


Body content can be laid out in two equal

columns (468px wide) with a gutter (24px wide).

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).

Header


30px

30px

106px

304px 550px

135px

40px

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).

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.

273px

304px 632px

10px

35px

Primary Navigation


Home Page Selected

Home Page Selected,Hovering over Store

Drop Down Navigation


Home Page Selected,Drop Down Activated

Home Page Selected,Drop Down Activated,Hovering over Classes #98E0E4

#65C1C6

Secondary Navigation


Physical Therapy Page Selected

Physical Therapy Page SelectedHovering over Classes

#98E0E4

#65C1C6

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.

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.

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.

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.

Example Pages


pediatric therapy center re-branding & style guide

Design

px wide

line height

px minimum height

classesonline style

inchesonline style guidepage

storeonline style guidepage

online style guidewith

online style guidecolors