STYLE GUIDE

This style guide is intended for all administrative users of this website, for ease of use and to inform future edits and content additions.

 

This guide will provide easy access to information such as fonts and color codes, as well as asset types in use throughout the site for easy copy/paste onto new pages.

SITE COLORS

Background

#4C4C4C

Accent

#8C0808

Accent (Home)

#FFE9B3

Content Box

#D1D1D1

TYPOGRAPHY

Caudex (Header Text)

Aa  Aa  Aa

1 2 3 4 5 6 7 8 9 0 * ! ? &

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Lucida Sans Unicode (Body Text)

Aa  Aa  Aa

1 2 3 4 5 6 7 8 9 0 * ! ? &

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

HEADING 1 - 32px

Main page headers

HEADING 2 - 30px

Secondary page headers

Heading 3 - 24px

Heading 4 - 20px

Heading 5 - 16px

[H3-5] Misc. Focal Points

Paragraph 1 - 18px

Main body text

Paragraph 2 - 12px

Captions and descriptions

ASSET SIZING & PLACEMENT

Headers:

Image headers on content pages should have a height of 250px.

Beneath these image headers is a red line, placed at y:285, to match the red line attached to the site header above.

Container Boxes:

Main bodies of text should be placed within grey container boxes, such as the one containing this information. The first box beneath the page header should be placed at y: 315.

Leave a space of 30px between additional container boxes.

Text:

Header text in a content box should be placed 50px down from the top of the box. Body text should be placed 25px down from below header text.

If separating text with a line, place that line 35px beneath your text, and place subsequent text an additional 35px beneath the line.

If at any time text elements feel "too close" to content above, shift the text down in 5px increments until an ideal placement is found.

Leave 70px between the bottom of text and the bottom of a container box.

Header size, as seen while resizing element. H (height) should be 250.

This information appears in the top left corner, often behind other buttons, as shown above.

Container box placement, for first box beneath header, y: 315.