METTA EARTH

METTA EARTH

A Center for Contemplative Ecology

802. 453. 8111

Style Guide (Gillian & Angela)

METTA EARTH

Style Guide

Examples of buttons with text highlighting

Ideally, you are able to have different colors for each entity menu or have the text appear three dimensional with a shadow like shown below:

Hello, I am a shadow/outlined header

***Keep in mind, if you see dark banner images on pages it is possible that they have not been re-saved after the most recent WordPress 5.2 update. The banner images in the cover block had an opacity change of 10 or higher to all of them and they all need to be re-saved at 0. The banner images should not have this issue after being saved again at zero opacity but it is best practice to check when already editing a page.

General Style Notes:

Overall Color Codes:

Metta Earth Green: #c1c39e

Metta Earth Institute Sage Green: #95a493

Metta Earth Community Yellow: #d3c47f

Metta Earth Farm Burnt Sienna: #A95326

#484848 Dark Gray Text for large paragraph text.

-Top banner, parallax, with white standard ‘heading’ setting (populates as ‘Josefin’) text at 55px, centered , which has the title of the page, and may also have a call to action/message below (same settings, just lowercase; each word capitalized)

-Use the singular “row” block with an image background set to full width and parallax-adjust length according to how much text should be centered to be seen on page.

Large Paragraph Text 28px21pt with #484848 (gray) color settings (Metta Earth is a cultural renewal project integrating contemplative practice, …

– Large text on many, but not all pages is centered. Large paragraph text is Montserrat globally but should be set at 28px21pt

*No headers below banners on some pages– see Home pages for each section and MEC Land Design as examples of this.

***Keep in mind that all global headers and paragraph blocks are still auto transforming from Josefin Sans to Montserrat when linked out. Even using an advanced header or paragraph block and even force changing the typography font family setting to Josefin Sans. For now it’s best to use buttons for a CTA or link out paragraph text since the auto transform is Montserrat.

This is a global H1 header

-Next header/title size for page areas would be H3 globally (can be used for poem titles as well) unless there is multiple sections such as the W E L L page. Then we use H2 global header in sections to break the page up.

This is a global H2 header

This is a global H3 header

Emerging Site Development (here is an H3 header example from Green Burial Ground-color is darker set at #b4962f instead of section color for visibility)

-Third header/title size is H5 globally. See lower sections on the Metta Retreats page as an example of using this header.

This is a global H5 header

-Fourth text size is paragraph text as you see here, global setting-Montserrat 16px 12pt

-Misc Paragraph text used in various sizes include, top page paragraphs and lyrical text sections. The lyrical text below is for quotes or poems, especially like the Earth Charter preamble on ME Home and other things we choose to highlight in this way. This is auto paragraph text that is now showing as Montserrat.

Stylized lyrical text 15pt 20px italic 400px Montserrat with color use advanced paragraph stackable block (pink) because it allows you to adjust spacing and has more advanced weight, color, and size settings.

Example on Home ME

Earth Charter Preamble #a6a87e

ME pages should use #a6a87e and MEC pages use #b4962f instead so it’s easier to read

-Space between page titles and 1st area of the page should be set at 30 instead of the auto 50

-Thin line to break up sections that are not obvious, using the corresponding entity color


-Paragraph, centered, text is fine for most pages, see pages like Metta Retreats that have sections left justified.

-Videos on pages should be set in a 3 row block with 15% blank padding on each side-middle row at 70%-see example on Sense of Place page.

-Don’t use white banner text on any home pages within entity sections.

-Lyrical text is fine…sizing for some other places on the site may be different

Spacers Above Are Standard 50px spacers that can be added from the library or copied from this sheet

Spacer Below Is For Custom Spacing Between Headers and Paragraph Text

All pages will need to have the layout formatted to have a Top Banner and Styled text below.  Each page can also have a Page Banner and/or a Gallery with 3 photos. Mostly text is centered, but for some contrast, some sections of text can be left justified. Use global H1, H2, H3, H5 as appropriate.

-Gallery of three photos is perfect. Images uploaded should be 1080 x 1080. Use the advanced image block with masonry gallery, 3 columns, 10 gutter, and set as large image size. If deciding to use another image gallery block from stackable or kadence, just make sure gutter spacing between images is the same as other pages and looks correct.Three image gallery to be inset and centered. You can use this block to copy style. Use a regular 50px spacer to put in between galleries and other blocks that don’t have additional padding formats.

Multi Testimonial Block

Single Testimonial Block

Single Testimonial Block with Photo

Two Button Styles: Color needs to be changed based on what section it is in

Possible block to use for videos-advanced popup video block within a row block for centered/proper padding. You would need to add an image or screenshot that represents the video to be played. Video pops up and plays upon clicking the play icon.

Global Settings For Headings Below with details of sizing with custom headers directly underneath each header.

This is an H1 Advanced Header

This is a custom Advanced Header 55px

This is an H2 Advanced Header

This is a custom Advanced Header 44px

This is an H3 Advanced Header

This is a custom Advanced Header 35px

This is an H4 Advanced Header

This is a custom Advanced Header 22px

This is an H5 Advanced Header
This is a custom Advanced Header 20px
This is an H6 Advanced Header
This is a custom Advanced Header 16px

Below is an example of how we could create custom entity color stamps for the logo.

Options for Newsletter Sign Up Banners (First One is in use now)

Subscribe to Metta Earth!

Processing…
Success! You're on the list.

By clicking subscribe, you agree to share your email address with the site owner and Mailchimp to receive marketing, updates, and other emails from the site owner. Use the unsubscribe link in those emails to opt out at any time.

Subscribe to Metta Earth!

Subscribe to Metta Earth!

Processing…
Success! You're on the list.

By clicking subscribe, you agree to share your email address with the site owner and Mailchimp to receive marketing, updates, and other emails from the site owner. Use the unsubscribe link in those emails to opt out at any time.

0
    0
    Your Cart
    Your cart is emptyReturn to Shop