Skip to main content

Website Guidelines

These guidelines were created to direct updates to the Haley Marketing website.

The Haley Marketing website is the centerpiece of all our marketing efforts, and in many cases serves as a first impression for prospective clients. It is essential that any updates to the website are inline with our brand identity. These guidelines serve to assist websites edits.

Find here information about website elements: fonts, headings, button elements, imagery direction and templates, as well as other essential elements.

Website Headings & Paragraph Styles

Please adhere to this guide when using headings on the Haley Marketing website. In order to maintain ADA compliance, the site titles on all pages are set as Heading 1 and there should be no other Heading 1 on the page. After H1 please use headings in numerical order down the page. E.g. H1 > H2 > H3. It is okay to repeat any other headings execpt H1. E.g. H1 > H2 > H3; H2 > H3 > H4

Heading 1

Heading 2

Heading 3

Heading 4

Medium Subheadings

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo in vitae turpis massa sed elementum tempus. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris.

Aliquam vestibulum morbi blandit cursus risus. Bibendum enim facilisis gravida neque convallis. Lacus sed turpis tincidunt id. Non nisi est sit amet facilisis magna etiam tempor. Sodales ut etiam sit amet nisl purus. Condimentum mattis pellentesque id nibh tortor. Non tellus orci ac auctor augue mauris.

Website Buttons

Button X-Small
Button Small
Button Medium
Button Large
Button Block
Button Outline
All buttons should match the color of the page or section they reside on. (E.g. This page uses the Haley Marketing Indigo color and therefore the buttons use the same Haley Marketing Indigo Color.)
Button Outline Revs.
If a button is on a dark background then the button should be white text with a white border. On hover the button should switch to a white background with the text color matching the background color.

Partial vs. Fully Rounded Buttons

Partially Rounded
The default buttons are partially rounded. These should always be used for medium-sized buttons (or larger) and call-to action buttons.
Fully Rounded
Fully rounded buttons should only be used for small or extra small buttons, exception is the menu contact button. Fully rounded buttons are also used to indicate category filters within the resources and our work sections.

Border Radius

All large sections should use a border radius of 25 pixels on all four corners.
For content within sections a border radius of 10 pixels should be used. In content includes: blog post containers, images, and testimonial containers.

Coming Soon!

Image samples and templates for Case Studies and Our Work.

Imagery

The Haley Marketing website uses die-cut and offset imagery through out the site. Please use the current page templates and functional pages to guide where these types of offset and die-cut images should be used.

Note: They are primarily used on the services pages, Meet Our Team page, and on the homepage.

We also use offset images throughout the website. The offset of these images should use pre-built settings with a border radius of 10 pixels (as stated above.) Again, please use pre-built templates to guide where these images should reside.

Coming Soon!

Image samples and templates for Case Studies and Our Work.

Coming Soon!

Image samples, illustration examples, and templates for Meet Our Team.

Check out more

Website Standards

Print Standards

Digital Guidelines

Social media