METTA EARTH

METTA EARTH

A Center for Contemplative Ecology

info@mettaearth.org

802. 453. 8111

Style Guide (Gillian & Angela)

METTA EARTH

Style Guide

General Style Notes:

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

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 pages

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)

This is a global H3 header

-Third header/title size is H5 globally

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.

Stylized lyrical text 15pt 20px italic with color

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 under the title that has corresponding entity color


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

-Gallery of three photos is perfect.

-Testimonial is fine.

-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 our H1, H2, H3, H4 as appropriate.

Farm Section: Burnt Sienna #A95326

#484848 Dark Gray Text

Thin line is a style of divider to be used to break up long sections on a page. See Retreats page for an example of how this is done.


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 with color {With a passion for discovering the wild in mind, body, and earth, she has led yoga retreats, wilderness quests, and trainings in nature sanctuaries around the world}.

Stylized lyrical text 15pt 20px italic with color {With a passion for discovering the wild in mind, body, and earth, she has led yoga retreats, wilderness quests, and trainings in nature sanctuaries around the world}.

Stylized lyrical text 15pt 20px italic with color

Gillian Kapteyn Comstock and Russell Comstock are the founders, present owners, and stewards of Metta Earth. Long time communitarians influenced by Quaker values, they have taken up the directing and leadership of the Metta Earth project. As the design of the next phase unfolds, they are ready and eager to share this leadership more fully.

Stylized lyrical text 15pt 20px italic with color

At Blackwater Pond the tossed waters have settled 
after a night of rain. 
I dip my cupped hands. I drink 
a long time. It tastes 
like stone, leaves, fire. It falls cold 
into my body, waking the bones. I hear them 
deep inside me, whispering 
oh what is that beautiful thing 
that just happened?

—Mary Oliver, New and Selected Poems, Volume One 

Large Paragraph Text 28px21pt(Metta Earth is a cultural renewal project integrating contemplative practice, deep ecology, regenerative food systems, and social activism to create resilient community)

Paragraph Text Size 16 px 12pt Sample: preserve the rural character of this valley through forest management, partnerships with farmers, and educational opportunities for local youth.

Three image gallery to be inset and centered. Use this block to copy style. Make sure images are all 1080×1080. Copy the spacer above or use a regular 50px spacer to put in between galleries and other blocks without padding formats.

Multi Testimonial Block

Single Testimonial Block

Single Testimonial Block with Photo

Description for this stackable blockquote.

Building community quote here . . . and a few more words. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta maximus semper. Duis vel lobortis quam. Nulla orci lectus, maximus quis nisl at, vulputate vestibulum nunc. Aenean sodales ipsum nec sem pulvinar fringilla.

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

Programs page: boxes with the photo left justified and filling the left portion of the box  and then the [title header #1, subtitle header #2, date, header #3] in the right hand side of the box. In each box, continue with a short description of the program from the beginning of each Program Description Page, which then has a “Read more” live link that takes you to the Program Description Page. Make everything in the Program Listing “box” click to the Program Description Page. For the soft launch, we will not have a Registration or Payment process. Down the road a bit, we will need to get the Registration & Payment & sometimes apply parts of this added with a plug in like Eventbrite or something similar.

Example of Programs Layout with image left, Title Description and additional text (dates and calendar linked in Learn More text)-no icons can be added.

Old Example of Programs Layout with image left, Title Description and additional text (dates and calendar icon link)-Only the image can be linked out not the whole box and this is what it looks like with the H1 header title linked out to the page.

Metta Retreats

Enjoy a retreat. Make it your own.

2023 Dates TBA

Very Old Example of Programs Layout with image left, Title Description and additional text (dates and calendar link)

W E L L

Emerge For Change

2023 Dates TBA

Example of a Bio Layout w/ Read More feature for long text blocks

Emma Radeka

Emma Radeka is a senior at the University of Vermont, pursuing a B.S. in Environmental Studies and a certificate in Integrative Healthcare. Her areas of academic study reflect her passion for healing the earth, ourselves, and our communities, with a focus on plant medicine, sustainable agriculture, place-based education, and community organizing for environmental and social justice.

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

METTA EARTH Montserrat

METTA EARTH Josefin

This is an H1 Advanced Header

This is a custom Advanced Header 34px

This is a custom Advanced Header 44px

This is an H2 Advanced Header

This is an H3 Advanced Header

This is a custom Advanced Header 24px

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

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

Subscribe to Metta Earth!

Subscribe to Metta Earth!

Subscribe to Metta Earth!

Subscribe to Metta Earth!

Subscribe to Metta Earth!

Subscribe to Metta Earth!

Subscribe to Metta Earth!