Stylesheet

A quick-reference guide to your website's styling settings and features.

Colors Used:

Dark Gray #333333

Light Gray #CCCCCC

Accent Yellow #FFC829

Accent Blue #4872AE

Accent Red #DA1A00

Accessible Color Combinations:

accessible color palette

Photo Specs:

Use these throughout your site

Half Page Photos: 1080 px x 720 px OR
560 px x 530 px. Half page photos have 10px white border around photo, with slight shadow behind. Copy style from the example to the right. Add “photo-effect” to the CSS Class in the advanced tab to add the photo color effect on hover.

Blog and Event Featured Images: 1080 px x 720 px

Smaller on-page photos: 432 px x 243 px

Content Styling:

All font styles throughout are weight variations of "Raleway"

This is a primary headline. Use this for page openings.

This is a secondary heading. Use this for page subtitles.

Third Level Bold Headings

This style is called "Bold Body Text Headlines." Use this for Body Copy Headings.

Paragraph text is magical. In this article, I’d like to reacquaint you with the humble workhorse of communication that is the paragraph. Paragraphs are everywhere. In fact, at the high risk of stating the obvious, you are reading one now.

You can add color to any headline style as well!

By selecting the Heading widget and editing the options under the Style tab, you can add any color to your headline. We recommend sticking to the colors in the Global Color selector, however you can choose any color from the hue selector by clicking inside the color swatch.

Bullets and Lists

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.