Website Style Guide

Setting fonts:

When setting up a headline, make the text bold in the text box area, then select the setting for Heading 1, 2, 3, etc. and then go into the Design tab and set the size per the specifications below.

Paragraph text will set automatically.

 

Heading 1: size 52

Heading 2: size 34

Heading 3: size 30

Heading 4: size 26

Heading 5: size 22

Paragraph text: 20 px, this will set automatically when text is designated as “paragraph”

SAMPLE SECTION:

NOTE: Yellow box around the photo is found on the modules page, or copy one from an existing page. Note how the color varies depending on the background color.

NOTES:

About text in blue bar is an H1 set at 58 px (larger than a normal H1). Background is an image. When creating a new page, either copy the entire page or a specific module, add it to your page, and edit the text. If done that way, no need to adjust sizing or background.

Headline: What if older and younger… is an H2, set at the standard 34 px

Paragraph text is set at the standard 20 px. That will set automatically when you set text to “paragraph text”.

MEDIA LIBRARY & IMAGE SIZES:

media library image

NOTES:

When replacing an image on a page, ideally the new should be sized to match the existing image to keep the layout in tact. To find out the image size, go to the media library and click on the image. A window will then appear (like the one to the right) which will show the dimensions of the image.

This is also where the ALT TEXT can added for the image. Alt text can be added when uploading the image, or at a later time. Alt text is important for screen readers, so be sure to add text that describes the image.

Colors

Indigo (primary)
HEX: #094074

Wedgewood (primary)
HEX: #3C6997

Orange
HEX: #F45D01

Sky
HEX: #5ADBFF

Cornsilk
HEX: #FCF0CF