Greyscale Palette

Black

#000000

Dark charcoal

#333333

Granite grey

#666666

Spanish grey

#999999

Chinese silver

#CCCCCC

Bright grey

#EEEEEE

White

#FFFFFF

Colour Palette

Forest green traditional

#143601

Lincoln green 01

#1A4301

Lincoln green 02

#245501

Maximum green

#538D22

Pistachio

#8DC05D

Tea green

#CFE8B0

Typography – (choose one)

Font pair one – Ovo & Muli

Heading font name: Ovo – Dark

Body font name: Muli – Dark

#666666

Heading 1

Heading 2

Heading 3

This is the paragraph styled text that you will see for the majority of text throughout the website.

Heading font name: Ovo – Light

Body font name: Muli – Light

#FFFFFF

Heading 1

Heading 2

Heading 3

This is the paragraph styled text that you will see for the majority of text throughout the website.

Heading font name: Ovo – Green Dark

Body font name: Muli – Green Dark

#143601

Heading 1

Heading 2

Heading 3

This is the paragraph styled text that you will see for the majority of text throughout the website.

Heading font name: Ovo – Green Light

Body font name: Muli – Green Light

#CFE8B0

Heading 1

Heading 2

Heading 3

This is the paragraph styled text that you will see for the majority of text throughout the website.

Font pair two – Kreon & Ubuntu

Heading font name: Kreon – Dark

Body font name: Ubuntu – Dark

#666666

Heading 1

Heading 2

Heading 3

This is the paragraph styled text that you will see for the majority of text throughout the website.

Heading font name: Kreon – Light

Body font name: Ubuntu – Light

#FFFFFF

Heading 1

Heading 2

Heading 3

This is the paragraph styled text that you will see for the majority of text throughout the website.

Heading font name: Kreon – Green Dark

Body font name: Ubuntu – Green Dark

#143601

Heading 1

Heading 2

Heading 3

This is the paragraph styled text that you will see for the majority of text throughout the website.

Heading font name: Kreon – Green Light

Body font name: Ubuntu – Green Light

#CFE8B0

Heading 1

Heading 2

Heading 3

This is the paragraph styled text that you will see for the majority of text throughout the website.

Font pair three – Ubuntu & Cabin

Heading font name: Ubuntu – Dark

Body font name: Cabin – Dark

#666666

Heading 1

Heading 2

Heading 3

This is the paragraph styled text that you will see for the majority of text throughout the website.

Heading font name: Ubuntu – Light

Body font name: Cabin – Light

#FFFFFF

Heading 1

Heading 2

Heading 3

This is the paragraph styled text that you will see for the majority of text throughout the website.

Heading font name: Ubuntu – Green Dark

Body font name: Cabin – Green Dark

#143601

Heading 1

Heading 2

Heading 3

This is the paragraph styled text that you will see for the majority of text throughout the website.

Heading font name: Ubuntu – Green Light

Body font name: Cabin – Green Light

#CFE8B0

Heading 1

Heading 2

Heading 3

This is the paragraph styled text that you will see for the majority of text throughout the website.

Blurb styling

Blurb style #1 - dark

Using Kreon for header text and Ubuntu for the  body

Images above text

Images with squared corners

Border around blurb

All centrally aligned

Blurb style #4 - light

Using Kreo for header text and Ubuntu for the  body

Images above text

Images with squared corners

Border around blurb

All centrally aligned

Blurb style #2 - dark

Using Kreon for header text and Ubuntu for the body

Images above text

Images with rounded corners

No border around blurb

All centrally aligned

Blurb style #5 - light

Using Kreon for header text and Ubuntu for the  body

Images above text

Images with squared corners

No border around blurb

All centrally aligned

Blurb style #3 - dark

Using Kreon for header text and Ubuntu for the body

Images above text

Images with rounded corners

No border around blurb

Box shadow to give impression of elevation

All centrally aligned

Blurb style #6 - light

Using Kreon for header text and Ubuntu for the  body

Images above text

Images with squared corners

No border around blurb

Box shadow to give impression of elevation

All centrally aligned

Blurb style #7 - Green dark

Using Kreon for header text and Ubuntu for the  body

Images above text

Images with squared corners

Border around blurb

All centrally aligned

Blurb style #10 - Green light

Using Kreo for header text and Ubuntu for the  body

Images above text

Images with squared corners

Border around blurb

All centrally aligned

Blurb style #8 - Green dark

Using Kreon for header text and Ubuntu for the body

Images above text

Images with rounded corners

No border around blurb

All centrally aligned

Blurb #11 eleven - Green light

Using Kreon for header text and Ubuntu for the  body

Images above text

Images with squared corners

No border around blurb

All centrally aligned

Blurb style #9 - Green dark

Using Kreon for header text and Ubuntu for the body

Images above text

Images with rounded corners

No border around blurb

Box shadow to give impression of elevation

All centrally aligned

Blurb style #12 - Green light

Using Kreon for header text and Ubuntu for the  body

Images above text

Images with squared corners

No border around blurb

Box shadow to give impression of elevation

All centrally aligned

Button styling

Button #1 – Greyscale Dark

Squared corners

Button #2 – Greyscale Light

Squared corners

Button #3 – Green Dark

Squared corners

Button #4 – Green Light

Squared corners

Button #5 – Greyscale Dark

Rounded corners

Button #6 – Greyscale Light

Rounded corners

Button #7 – Green Dark

Rounded corners

Button #8 – Green Light

Rounded corners

Button #9 – Greyscale Dark

Oval ended

Button #10 – Greyscale Light

Oval ended

Button #11 – Green Dark

Oval ended

Button #12 – Green Light

Oval ended

Button #13 – High contrast – Greyscale Dark

Squared corners

Button #14 – High contrast – Greyscale Light

Squared corners

Button #15 – High contrast – Green Dark

Squared corners

Button #16 – High contrast – Green Light

Squared corners

Button #17 – High contrast – Greyscale Dark

Rounded corners

Button #18 – High contrast – Greyscale Light

Rounded corners

Button #19 – High contrast – Green Dark

Rounded corners

Button #20 – High contrast – Green Light

Rounded corners

Button #21 – High contrast – Greyscale Dark

Oval ended

Button #22 – High contrast – Greyscale Light

Oval ended

Button #23 – High contrast – Green Dark

Oval ended

Button #24 – High contrast – Green Light

Oval ended

Image styling

Gray concrete pyramid under blue sky

Image #1

Normal

Border rounded corners 6px

Gray concrete pyramid under blue sky

Image #2

Black & white

Border rounded corners 6px

Gray concrete pyramid under blue sky

Image #3

Sepia – 50%

Border rounded corners 6px

Videos

Video #1

Rounded edges

Original video and thumbnail – no overlay

Video #2

Rounded edges

Original video with custom overlay

Custom play icon – black

 

 

Video #3

Rounded edges

Original video with custom overlay

Custom play icon – white

 

 

Email opt-in styling

Email opt-in #1 – Greyscale dark

Squared box, fields and button

Email opt-in #2 – Greyscale light

Squared box, fields and button

Email opt-in #3 – Green dark

Squared box, fields and button

Email opt-in #4 – Green light

Squared box, fields and button

Notices

This is Notice #1 – Greyscale dark

Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

This is Notice #2 – Greyscale light

Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

This is Notice #3 – Green dark

Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

This is Notice #4 – Green light

Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

This is Notice #5 – High contrast greyscale dark

Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

This is Notice #6 – High contrast greyscale light

Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

This is Notice #7 – High contrast green dark

Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

This is Notice #8 – High contrast green light

Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Testimonials

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Mr Testimonial Face

Job Title, Company name

Testimonial #1 – Greyscale dark

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Mrs Testimonial Face

Job Title, Company name

Testimonial #2 – Greyscale light

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Mr Testimonial Face

Job Title, Company name

Testimonial #3 – Green dark

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Mrs Testimonial Face

Job Title, Company name

Testimonial #4 – Green light

Call to action

Call to Action #1 - Greyscale dark

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Call to Action #2 - Greyscale light

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Call to Action #3 - Green dark

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Call to Action #4 - Green light

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Contact forms

Send us a message

13 + 11 =

Contact form #1 – Greyscale dark

Send us a message

12 + 13 =

Contact form #2 – Greyscale light

Send us a message

9 + 5 =

Contact form #3 – Green dark

Send us a message

7 + 11 =

Contact form #4 – Green light

Person

Mrs Person Face

Mrs Person Face

Position

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Person #1 – Greyscale dark

Mr Person Face

Mr Person Face

Position

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Person #2 – Greyscale light

Mrs Person Face

Mrs Person Face

Position

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Person #3 – Green dark

Mr Person Face

Mr Person Face

Position

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Person #4 – Green light

Toggles

Toggle #1 - Greyscale dark

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

Toggle #2 - Greyscale light

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

Toggle #3 - Green dark

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

Toggle #4 - Green light

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

Countdown timers

Countdown timer #1 - Greyscale dark

Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

Countdown timer #2 - Greyscale light

Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

Countdown timer #3 - Green dark

Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

Countdown timer #4 - Green light

Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

Circle counters

%

Circle counter #1 - Greyscale dark

%

Circle counter #2 - Greyscale light

%

Circle counter #3 - Green dark

%

Circle counter #4 - Green light

Pricing tables

Pricing table #1 – Greyscale dark

Pricing table #2 – Greyscale light

Pricing table #3 – Green dark

Pricing table #4 – Green light

Sliders

Title and content 1

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Title and content 2

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Slider #1 – Greyscale dark

Title and content 1

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Title and content 2

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Slider #2 – Greyscale light

Title and content 1

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Title and content 2

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Slider #3 – Green dark

Title and content 1

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Title and content 2

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Slider #4 – Green light

Video sliders

Video slider #1 – Light play button

Video slider #2 – Dark play button