The Lodge at Torrey PinesDigital Style Guide

Typography

H1 - Header Level 1

H2 - Header Level 2

H3 - Header Level 3

H4 - Header Level 4

H5 - Header Level 5 (Disclaimer)

Paragraph Text


h1 { font-size: 2rem; color: #027043; }

h2 { font-size: 1.625rem; color: #5e4733; }

h3 { font-size: 1.125rem; font-weight: 600; text-transform: uppercase;  color: #027043; }

h4 { font-size: .875rem; font-weight: 600; }

h5 { font-size: .75rem; }

p { font-size: 1rem; font-weight: 400; }

Fonts

Libre Baskerville

Use on web and email only
Download

Garamond

Use on print materials only
Download

Open Sans

Use on web and email only
Download

Dyer Arts and Crafts

Use on The Lodge at Torrey Pines logo only
Download

Navigation Text Treatment

primary navigation Text Style

font-size: h4. font color: #333. No hyperlink color change

secondary navigation Text Style

font-size: h4. font color: #666. The background color for the secondary navigation should be: #eee. HOver state should have a 2px border under the selected menu. it should animate from the center out. It should remain in the active state.

Text Treatment

Pre-header TextHeader Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Header Text Post-header Text

 <h1> <span class="h4"> Pre-header Text  <span> Header Text </h1>

Hyperlink Text

This is a body text link. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor...

a {
color: #0077b5;
}

a:hover,
a:active,
a:focus {
text-decoration: none;
color: #0077b5;;
}


/* Footer */
footer a {
font-family: 'Open Sans', sans-serif;
font-size: .875rem;
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
display: block;
margin: 2px 0;
color: #fff;
}


footer
a:hover,
a:active,
a:focus {
text-decoration: none;
color: #f6f0d4;
}


footer p {
color: #fff;
}

Buttons Primary Btn

Secondary Btn Secondary Ghost Btn

Tertiary Btn

Color

HEX: #00492B
RGB: 0, 73, 43

HEX: #E9D999
RGB: 233, 217, 153

HEX: #5e4733
RGB: 71, 55, 41

HEX: #747A24
RGB: 116, 122, 36

Assets

Width: 200px

Width: 300px

Header Logo - Width: 375px

Width: 260px

Download Vector Files

Width: 180px

Header Logo - Width: 140px

Width: 100px

primary button image

footer background image

Above Footer background image

Social Media Icons

https://www.facebook.com/LodgeTorreyPines/

https://www.instagram.com/lodgetorreypines/

https://plus.google.com/+LodgeTorreyPines

https://twitter.com/lodgetorreypine?lang=en

https://www.youtube.com/user/LodgeTorreyPines