Style Guide

This is H1 Title 40px/40px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a. Suspendisse non purus id elit imperdiet tempus ut vel dui. Aliquam porta metus finibus nisl aliquam pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales.

This is H2 Title 36px/40px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a. Suspendisse non purus id elit imperdiet tempus ut vel dui. Aliquam porta metus finibus nisl aliquam pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales.

This is H3 Title 28px/35px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a. Suspendisse non purus id elit imperdiet tempus ut vel dui. Aliquam porta metus finibus nisl aliquam pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales.

This is H4 Title 24px/30px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a. Suspendisse non purus id elit imperdiet tempus ut vel dui. Aliquam porta metus finibus nisl aliquam pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales.

This is H5 Title 24px/30px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a. Suspendisse non purus id elit imperdiet tempus ut vel dui. Aliquam porta metus finibus nisl aliquam pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales.

Paragraph Text

font: Open Sans, sans-serif;
color: #555555;
font-Size: 24px;
font-style: regular;
font-variant: normal;
font-weight: 100;
line-height: 1.5em; (or 36px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac velit libero, eu gravida nibh. Ut augue lorem, venenatis quis condimentum sit amet, lacinia tristique nunc. Maecenas elementum lacus id nisi volutpat vel viverra nunc ultricies. Sed aliquet sollicitudin risus, eu imperdiet nulla commodo malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Above is the space between paragraphs. Maecenas sagittis leo et leo tincidunt eu elementum lectus dictum. Pellentesque fermentum, magna in mattis interdum, ante tortor molestie justo, a volutpat magna dui id turpis. Pellentesque eros nibh, venenatis non malesuada sit amet, sodales vitae augue. Proin ornare malesuada odio sed pulvinar. Donec faucibus velit sed nulla sodales et suscipit lectus placerat. Quisque quis gravida augue.

Blockquote (https://www.cssfontstack.com/Open-Sans)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac velit libero, eu gravida nibh. Ut augue lorem, venenatis quis condimentum sit amet, lacinia tristique nunc. Maecenas elementum lacus id nisi volutpat vel viverra nunc ultricies. Sed aliquet sollicitudin risus, eu imperdiet nulla commodo malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sagittis leo et leo tincidunt eu elementum lectus dictum. Pellentesque fermentum, magna in mattis interdum, ante tortor molestie justo, a volutpat magna dui id turpis. Pellentesque eros nibh, venenatis non malesuada sit amet, sodales vitae augue. Proin ornare malesuada odio sed pulvinar. Donec faucibus velit sed nulla sodales et suscipit lectus placerat. Quisque quis gravida augue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac velit libero, eu gravida nibh. Ut augue lorem, venenatis quis condimentum sit amet, lacinia tristique nunc. Maecenas elementum lacus id nisi volutpat vel viverra nunc ultricies. (38px) (56px)

Sed aliquet sollicitudin risus, eu imperdiet nulla commodo malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sagittis leo et leo tincidunt eu elementum lectus dictum. Pellentesque fermentum, magna in mattis interdum, ante tortor molestie justo, a volutpat magna dui id turpis. Pellentesque eros nibh, venenatis non malesuada sit amet, sodales vitae augue. Proin ornare malesuada odio sed pulvinar. Donec faucibus velit sed nulla sodales et suscipit lectus placerat. Quisque quis gravida augue.

Unordered List

  • Bullet point as part of an unordered list
  • Bullet point as part of an unordered list
  • Maecenas sagittis leo et leo tincidunt eu elementum lectus dictum. Pellentesque fermentum, magna in mattis interdum, ante tortor molestie justo, a volutpat magna dui id turpis. Pellentesque eros nibh, venenatis non malesuada sit amet, sodales vitae augue.

When an unordered list reverts to paragraph style the spacing is what we see in this situation.

Ordered List

  1. Numbered item as part of an ordered list
  2. Numbered item as part of an ordered list
  3. Maecenas sagittis leo et leo tincidunt eu elementum lectus dictum. Pellentesque fermentum, magna in mattis interdum, ante tortor molestie justo, a volutpat magna dui id turpis. Pellentesque eros nibh, venenatis non malesuada sit amet, sodales vitae augue.

When an ordered list reverts to paragraph style the spacing is what we see in this situation.

Small Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac velit libero, eu gravida nibh. Ut augue lorem, venenatis quis condimentum sit amet, lacinia tristique nunc. Maecenas elementum lacus id nisi volutpat vel viverra nunc ultricies. Sed aliquet sollicitudin risus, eu imperdiet nulla commodo malesuada.

Links

Important Marketing Questions

Tables

For aligning text into columns:

column 1 column 2 column 3
column 1 column 2 column 3

Colors

#00a656 Green
#0F79F1 Medium Blue
#095572 Dark Blue
#00a656 Footer Green
#2C3D3D Buttons
#555555 H1
#555555 H2
#555555 H3
#555555 H4
#555555 Text
#999999 Light Gray
#888888 Medium Gray
#222222 Dark Gray
#555555 Link
#0F79F1 Hover
#313233 Social Section
# Other
# Other

Image Standards

Photographs should be provided to the design team in high resolution so they are available for commercial printing of brochures as well as for use on the website. File sizes are usually over 1MB and often in the 5MB range. Large files give the designer more latitude to crop images to the standard sizes used on the website. After cropping images they need to be optimized for quick online loading. There are tools to do that.

  1. Images displayed at the top of the home page are 1920px x 1080px @72 pixels per inch (or dpi) resolution
  2. Images displayed on the interior pages at 100% wide are shown _____px wide and typically ______px high @72 pixels per inch (or dpi) resolution
  3. Images displayed on the Post pages at 100% wide are shown _____px wide and typically _____px high @72 pixels per inch (or dpi) resolution.
  4. Images displayed in the text area of a page with “text wrap” are typically aligned right and 250px-350px wide.
  5. Thumbnail images are displayed 150px square.

I see you thumbnail image 150px x 150px

Recreation and Parks

 

Guadalupe-Nipomo Dunes Center

 

front country trails management

 

Farners Market

 

CADA

Earth Day

Top