Heading
Typography
Colour Palette
Text Colour
Buttons
Green Sections
White Sections
blue Sections
Containers
Documentation

G0ing Green Media Styleguide

With a focus on enhancing the design and development process, I have crafted a dynamic style guide website tailored specifically for Webflow projects, aiming to streamline workflows and promote cohesive visual aesthetics.

Headings

In our headings section of the style guide, we have 6 different heading options. First is our H1, it's important to remember that every page only needs one H1 Heading. For the Going Green Media website, this is also the only heading that is white, as we use it within the green sections. Headings must be used in the correct hierarchical structure, using a H2 as our headings for sections, H3 for secondary headings within sections, and so on.

Our headings do not need classes as the styles for these are set at the element level, we can simply click command/control + E, and search for the heading that we need (e.g. h1), and all styles will automatically be applied.

H1 Heading

All H1 Headings
5.5rem
6rem

H2 heading

All H2 Headings

h3 heading

All H3 Headings

h4 heading

All H4 Headings
h5 heading
All H5 Headings
h6 heading
All H6 Headings

Typography

As with our headings, all typography elements do not need a class. Our paragraphs, lists, links, and quotes are styled at the element level. To add a new element within typography, we can click Command/Control + E, and search for the element that we need. E.g. paragraph, list

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Paragraphs
1rem
1.7-

unordered lists (bullet list)

  • Unordered List Lorem Ipsum
  • Unordered List Lorem Ipsum
  • Unordered List Lorem Ipsum
All Unordered Lists
1rem
1.7-

ordered lists (numbered list)

  1. ordered List Lorem Ipsum
  2. ordered List Lorem Ipsum
  3. ordered List Lorem Ipsum
All Ordered Lists
1rem
1.4rem

Text Blocks

Text Block
Body (All PAges)
1rem
1.7-

Text Links

Text Link Lorem Ipsum
All Links
1rem
1-

Block Quotes

Block Quote Lorem Ipsum
All Block Quotes
1rem
1.7-

Rich text

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Image Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
rich_text

Colour Palette

Green

#51855e

Dark Green

#36623a

Blue

#abe2ed

Light Green

#c0cfb9

Off White

#fafff4

Grey

#454545

Text Colour

To remain compliant with WCAG guidelines, we want to ensure that each text elements use an appropriate colour based on the background that it is displayed on.

Green Backgrounds

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text

Blue Backgrounds

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button TextButton Text

Light Green Backgrounds

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button TextButton Text

White Backgrounds

Heading

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button TextButton Text

Buttons

Button

Green Button

btn
Button
Green with white border
btn
sec
Button
Clear button with green border
btn
thi

Green SECTIONS

Our green sections have two different types. First being the header, as seen as the beginning of the title. These sections have slightly more padding on the top, this is to account for the nav bar. This section should only be used once on each page, and always at the top of the page. The second type is a regular section, and can be used on each page for content that is not a header.

Header section - Left aligned with image

here will go our
heading

here will go some text within the section

Header section - centred without image

here will go our
heading

here will go some text within the section

GREEN SECTION - BLANK

Green section - centred without image

here will go our
heading

here will go some text within the section

Green section - Left aligned with image

here will go our
heading

here will go some text within the section

White sections

White section - Centred with text

Here will go a  Heading

here will go some text within the section

White section - Left ALigned with image and button

here will go our
heading

here will go some text within the section

Button Text

White section - BLANK

Blue sections

Blue section - Centred with text

Here will go a  Heading

here will go some text within the section

BLUE section - Left ALigned with image and button

here will go our
heading

here will go some text within the section

Button Text

BLUE section - BLANK

Containers

Flex box - left side text, right side content (e.g. image, video etc.)

The flex box will display from left to right on larger devices. When the visitor is using a smaller device, the container will automatically stack vertically to match the device type.

Here will go a heading

here will go a paragraph for the container

button text

Sticky container

Used on the 'Our Valued Partners' section on the Media Kit page. The sticky container lets the left hand side heading stick to the top of the viewport while the visitor scrolls through the section. Suitable for sections where the right hand side content may be quite long.

Here will go a heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

button text

Three column grid - green circles with text

Suitable for places where 3 separate cards can be displayed side by side. The columns will automatically change to vertical on smaller devices

Here will go a heading

Here will go a subheading

Or here will go a paragraph. Delete the element that is unneeded

1

Here will go a h3

Here will go a paragraph

button text
2

Here will go a h3

Here will go a paragraph

button text
3

Here will go a h3

Here will go a paragraph

button text

Three column grid - green circles with Icons

Suitable for places where 3 separate cards can be displayed side by side. The columns will automatically change to vertical on smaller devices

Here will go a heading

Here will go a subheading

Or here will go a paragraph. Delete the element that is unneeded

Here will go a h3

Here will go a paragraph

button text

Here will go a h3

Here will go a paragraph

button text

Here will go a h3

Here will go a paragraph

button text

Three column grid - white circles with Text in a blue section

Suitable for places where 3 separate cards can be displayed side by side. The columns will automatically change to vertical on smaller devices

Here will go a heading

Here will go a subheading

Or here will go a paragraph. Delete the element that is unneeded

1

Here will go a h3

Here will go a paragraph

button text
2

Here will go a h3

Here will go a paragraph

button text
3

Here will go a h3

Here will go a paragraph

button text

Three column grid - white circles with Icons in a blue section

Suitable for places where 3 separate cards can be displayed side by side. The columns will automatically change to vertical on smaller devices

Here will go a heading

Here will go a subheading

Or here will go a paragraph. Delete the element that is unneeded

Here will go a h3

Here will go a paragraph

button text

Here will go a h3

Here will go a paragraph

button text

Here will go a h3

Here will go a paragraph

button text

Three column grid - white circles with Text in a Green section

Suitable for places where 3 separate cards can be displayed side by side. The columns will automatically change to vertical on smaller devices

Here will go a heading

Here will go a subheading

Or here will go a paragraph. Delete the element that is unneeded

1

Here will go a h3

Here will go a paragraph

button text
2

Here will go a h3

Here will go a paragraph

button text
3

Here will go a h3

Here will go a paragraph

button text

Three column grid - white circles with Text in a Green section

Suitable for places where 3 separate cards can be displayed side by side. The columns will automatically change to vertical on smaller devices

Here will go a heading

Here will go a subheading

Or here will go a paragraph. Delete the element that is unneeded

Here will go a h3

Here will go a paragraph

button text

Here will go a h3

Here will go a paragraph

button text

Here will go a h3

Here will go a paragraph

button text

Three column grid - cards with image and blue border

Suitable for places where 3 separate cards can be displayed side by side. The columns will automatically change to vertical on smaller devices

Here will go a heading

Here will go a subheading

Or here will go a paragraph. Delete the element that is unneeded

Here will go a h3

Here will go a paragraph

Button text

Here will go a h3

Here will go a paragraph

Button text

Here will go a h3

Here will go a paragraph

Button text

Three column grid - cards with image and Green border

Suitable for places where 3 separate cards can be displayed side by side. The columns will automatically change to vertical on smaller devices

Here will go a heading

Here will go a subheading

Or here will go a paragraph. Delete the element that is unneeded

Here will go a h3

Here will go a paragraph

Button text

Here will go a h3

Here will go a paragraph

Button text

Here will go a h3

Here will go a paragraph

Button text

Four column grid - cards with image and blue border

Suitable for places where 4 separate cards can be displayed side by side. The columns will automatically change to vertical on smaller devices

Here will go a heading

Here will go a subheading

Or here will go a paragraph. Delete the element that is unneeded

here will go a h3

Here will go a paragraph

Button text

here will go a h3

Here will go a paragraph

Button text

here will go a h3

Here will go a paragraph

Button text

here will go a h3

Here will go a paragraph

Button text