MessiahLifeways.org Style Guide

This page serves as a guide for all messiahlifeways.org web styles. 

Viewing this page in the Elementor Editor will allow you to easily copy and paste styles and items to the page being worked on. 

Colors

All colors are stored in Elementor’s Global Colors and can be easily applied by selecting the globe icon in the editor’s Style tab. 

Primary
#a4123f
Secondary
#cf4520
Body Type
#000000 (black)
Careers
#008DB2

Typography

All type styles can be found in Elementor’s Global Fonts. Styles can be easily applied in these steps, Elementor Editor > Style > Typography > Globe Icon.

Font Family
Avenir is used for all type styling. Sans-serif is the fallback font.
Type Ramp
Banner
Banner Subheader
Content Header 1 (small)
Content Header 2 (large)
Subheader 1 (Tracked Caps)
Subheader 2 (Tracked Caps)
Body Text/Text
Intro Text (large)

Layout & Spacing

Layout and spacing are harder to define, but as a general rule content should have room to breathe and not be pushed to the edge. Additionally, content should not be crowded together. Content should also not take up unnecessary space. 

Rule 1: two columns
Content, text in particular, should never span the width of the page. Use an inner section (2 columns) to ensure text is compact and easy to read.
Rule 2: Section Padding & Width
On desktop, sections should be boxed, 1600px wide with 50px padding (left and right).

This ensures appropriate display on wide-screens while also retaining side spacing on smaller desktop screens. Please see the following table for left and right padding.
Desktop
Tablet
Mobile
50px
30px
20px
Rule 3: Column Spacing
Columns should have padding or margins to ensure space between content. See example below:
Main Line

Volunteer Department

Pathways Institute for Lifelong Learning®

100 Mt. Allen Drive
Mechanicsburg, PA 17055

Banners

Use the banners below as templates (you can copy/paste in Elementor). The specs (for Desktop) are as follows:

 

Two 12em spacers

Header

 

Banner Overlays

Edit Section > Style > Background Overlay > Gradient > 


Color 1: Primary or Secondary

Location: 0

Color 2: Transparent

Location: 65

Angle: 110-120

Opacity: 0.9

Cottages

Contact Us

Callout Banner

Content Navigation

Use the navigation below or from another page as a template (you can copy/paste in Elementor). To assign page content to a navigation list item, select the section or header > Advanced > enter a unique CSS ID. Next, select your navigation section, Content > Text > change/add <a href=”#CSS ID”>…</a>.

 

class
pcnav

Forms & Tables

Use the forms & tables below as a template.

Contact form

Contact Us

Table
Five 30-minute Sessions
Ten 30-minute Sessions
Five 45-minute Sessions
Ten 45-minute Sessions
$135
$250
$210
$400

Lines & Lists

Content divider line

Color: #00000047

Width: 100

Margins: adjust as necessary

Secondary Line
Lists

Longer lists (11+ items) should be two columns. 

Please note you are navigating away from the Messiah Lifeways website.