Styles

Digital Style Guide

Colors

#e9b840
#000000
#58595b
#777777
#f7f7f7

CSS Style Sheet

You can access it directly here: Style.css

 

 

Typography

Fonts

Work Sans Bold is used for headings. Source Sans Pro is used for body copy.

Headings

Primary heading ("Heading 1")

Secondary heading ("Heading 2")

Tertiary heading ("Heading 3")

Paragraph text. Cookie jelly beans wafer gummi bears cheesecake liquorice. Caramels sesame snaps topping sweet roll toffee tiramisu gummi bears. Caramels cake jelly-o.

Lists

Unordered list
  • Ice cream bonbon.
  • Marzipan gummies.
  • Fruitcake chocolate bar bonbon.
  • Donut soufflé icing dessert carrot cake lollipop fruitcake jelly beans.
  • Candy canes gummies bonbon cupcake cookie chupa chups.
  • Bear claw cake fruitcake tart pudding.
Ordered list
  1. Marzipan marzipan.
  2. Pudding candy pastry lollipop cheesecake bear claw.
  3. Cake cheesecake pudding croissant.
  4. Pudding cupcake tart gummies tootsie roll danish.
  5. Icing chocolate cake pie jelly-o.
  6. Chocolate bar cookie sweet roll jelly beans.
  7. Caramels.
  8. Cotton candy powder jujubes bonbon marshmallow jelly candy canes.
  9. Sweet croissant sugar plum pie jujubes chupa chups wafer. Carrot cake biscuit bonbon.

Blockquotes

Cookie jelly beans wafer gummi bears cheesecake liquorice. Caramels sesame snaps topping sweet roll toffee tiramisu gummi bears. Caramels cake jelly-o.

Links

A standard link. A link within a sentence. A visited link.

UI components

Buttons

The following codes are helpful for putting a button into a page that does not have Page Builder enabled. I.e. Blog posts, and simple wordpress pages.

.primary-btn is best on light backgrounds.

<a class="primary-btn" href="#">Read more</a>

Read more

.secondary-btn is best on dark backgrounds.

<a class="secondary-btn" href="#">Read more</a>

Read more

We've also saved a stylized button that you can use on pages that have Page Builder enabled. You can access it by going to Saved > Saved Modules  and selecting Primary Button. You can remove or change the button's icon, and adjust the button's alignment to suit your needs:

Click Here

Forms

A sample form:

 

 

Utility CSS classes

center
Centers block-level elements with fixed widths.
clear
Makes element automatically clear its child elements, so you don't need to add additional markup. The clearfix is a way to combat the zero-height container problem for floated elements.
invert
Makes the content white; this is a useful class to apply to a row with a dark background.
border-light
Adds a 1px light grey border around object. Good for images that have a white bleed that appear on white backgrounds.

 

Images

Optimizing images

What does it mean to optimize an image? Optimizing images is a combination of resizing the image's dimensions to fit a particular use, and compressing the image file so it is a reasonable file size.

Why optimize images? Optimizing an image removes all of the unnecessary or excessive data from that image, and takes strain off of your website. The more data a site has to crunch through, the more resources are used and the slower your site can become. This can become an issue over time if your website is using lots of unnecessarily large images when it doesn't have to. It's good practice to get into the habit of optimizing all images before you upload them to your website.

Does optimizing hurt the quality of an image? Compression will always degrade the quality of an image. For this reason, optimization requires carefully walking the line between image quality and file size.

How to optimize:

  1. Resize your image to the appropriate dimensions for where it will display. (More on dimensions below)
  2. Run the resized image through a compression service like Optimizilla or TinyPNG.
  3. Your image is optimized!

Posts: Featured Images

These images show up as a full width banner image inside the post. They also can show up in other places throughout the website, such as on the archive pages.

Featured images should be at least 1920px wide by 410px tall. We also suggest keeping them all landscape.

Featured images for Publications should be at least 1240px wide and 868px high. Otherwise, they'll be automatically cropped by WordPress and might lose crucial information from the Publication Cover.

Posts and Pages: Inline Images

Images inside of posts will display at a max width of 820px, the same as the container of the post. Images that will appear inline on a single column page will have a max width of 820px to display, the same width as the container on the page.

If you know you're putting an image inside of a post or on a page, resize any excessively large images to be at 900px wide.