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

Metta Earth The Land Founders Stay Blog Farm Store Contact Donate

MEI Home About All Teams Current Programs Stay Resources Donate

MEF Home Botanicals Living Beings Artisinal Crafting Kitchen Soup Project CSA Farm Store

MEC Home Land Design Community Design Offering Green Burial Ground

***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

This is a global H1 header linked out

-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 H2 header linked out

This is a global H3 header

This is a global H3 header linked out

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

This is a global H5 header linked out

-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

“Gillian & Russell have co-created with the land, ringed with mountains, a perfect place to drop into the well of images, poems, dreams, deepening expectations, and intentional space for discovering, recovering, and planting of seeds. The nourishment of organic food from the land, deliciously prepared, and the nourishment of soul connections with others, with oneself, and with the land, mountains, and sky are both sustaining and renewing. Many thanks!”

Laurie Crosby

“Welcomed into spaciousness, a held container, room for all of me, an opportunity to be with myself completely, an opportunity to be with others wholly, each supporting the other—each voice transmitting the inner world, the outer world, transmitting the collective story—who I know myself, who I am becoming—each moment a doorway in, an invitation, a gateway to further deepen, encounter, and be changed. Nourishment, invitation, awareness of power, attention to what is being communicated, what is ready to be released, what has already gone, and what we are creating. Each step forward, an invitation to create the new story through movement, sound, word, food, care, ritual, and collective attunement. Such gratitude for the recalibration and re-seeding.”

Camille Grec

“The W E L L series at Metta Earth is a decadent dive into our collective awakening as leaders, as we serve the planet and its people. It is both nourishing and activating. And most all, it is joyful and inspiring!”

Katherine Elmer

Single Testimonial Block

The land and the team provide so much sanctuary for participants that personal transformations arise naturally. Russell and Gillian offer two extremely powerful and unique perspectives on living and learning, complementing each other and the training group with extraordinary flow. Transparency in leadership qualities and a cornucopia of giving experiences create fertile ground to grow. They are gently and persistently pushing the boundaries to a whole new level that this planet desperately needs.

~ Wilderness & Ecopsychology Leadership Training participant

Single Testimonial Block with Photo

“We stand at a critical moment in Earth’s history, a time when humanity must choose its future. As the world becomes increasingly interdependent and fragile, the future at once holds great peril and great promise. To move forward we must recognize that in the midst of a magnificent diversity of cultures and life forms we are one human family and one Earth community with a common destiny.”

~Earth Charter Preamble

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

Large Button Style

Small Button Style

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)

Processing…

Success! You're on the list.

Whoops! There was an error and we couldn't process your subscription. Please reload the page and try again.

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.

Processing…

Success! You're on the list.

Whoops! There was an error and we couldn't process your subscription. Please reload the page and try again.

METTA EARTH

A Center for Contemplative Ecology

Style Guide (Gillian & Angela)

METTA EARTH

Style Guide

Hello, I am a shadow/outlined header

This is a global H1 header

This is a global H1 header linked out

This is a global H2 header