Style Guide

Contact
Dr. Calvin Roberts in front of the microphone

Please reference this style guide whenever you’re creating new pages and images for this website. You should find a size and style for all possible layouts and images you’ll need/use.

Image Sizes

  • Home Hero Image/Landing & Listing Page Banners: 720px x 392px / 16:9 aspect ratio
  • Post Hero/Post Page Banner: 600px x 400px / 6:4 aspect ratio
  • Full Width Pull Quote Headshot: 200px x 295px / 3:2 aspect ratio
  • Full Width Generic Promotion: 545px x 545px
  • People Cards: 400px x 400px or 270px x 270px
  • Embedded, Gallery, Carousel images: 800px x 450 px (Optimal, images will automatically resize when used in a gallery or a carousel) / 16:9 aspect ratio
  • Newsletter Sign up: 411px x 411px
  • Image and Button Promo: 280px x 280px (Optimal, images will automatically re-crop depending on copy length)
  • 2 Image Promo:
    • Large Image: 300px x 200px
    • Small Image: 150px x 150px

Font Specifics

  • H1 – Atkinson, 700 • 48px/60px • Color: #323232 • Margin: 0, 0, 30px, 0
  • Intro – Atkinson, 400 • 32px/42px • Color: #0571c6 • Margin: 0px, 0, 30px, 0
  • H2 – Atkinson, 700 • 48px/60px • Color: #323232 • Margin: 80px, 0, 30px, 0
  • H3 – Atkinson, 400 • 42px/52px • Color: #0571c6 • Margin: 0, 0, 30px, 0
  • H4 – Atkinson, 400 • 32px/44px • Color: #323232  • Margin: 0, 0, 30px, 0
  • H5 – Atkinson, 700 • 24px/35px • Color: #0571c6 • Margin: 0, 0, 30px, 0
  • H6 – Atkinson, 700 • 22px/32px • Color: #323232 • Margin: 0, 0, 5px, 0
  • Paragraph – Atkinson, 400 • 22px/36px • Color: #323232 • Margin: 0, 0, 5px, 0

Updates to Site Styles ***TO BE UPDATED

/wp-content/themes/??????.css –> description/wp-content/themes/orbit-media/cssblack-white.css –> black and white viewing optionsblack-yellow.css –> black and yellow viewing optionsblue-yellow.css –> blue and yellow viewing optionsbootstrap.css –> bootstrap. DO NOT EDIT.default.css –> titles, paragraphs, block-quotes, etc…layout.css –> header, footer, menus, sidebar, featureslighthouse.css –> css created for lighthouse to override or add new stylestext-large.css –> large text viewing optionstext-larger.css –> larger text viewing optionstext-largest.css –> largest text viewing optionstext-only.css –> text only viewing optionstinymce.css –> WYSIWYG editor styles

Site Color Values

#330072
#0571C6
#323232
#4D4D4D
#77C19A
#F4F4F4

Join our Mission

Lighthouse Guild is dedicated to providing exceptional services that inspire people who are visually impaired to attain their goals.