Colours

#00a94f
#00472f
#141915
#333333
#999999
#e2e5e3
#ffffff

Typography

Raleigh Rounded Bold for headings used on top of photographs

Helvetica Neue for headings, intro copy & body copy, Regular, Medium & Bold

Typography on top of photographs

Heading One 65px -15px Letter Spacing/67px Line Height

Heading Two 45px -15px Letter Spacing/45px Line Height

Intro Copy Bold 35px-15px Letter spacing/43px Line Height

Standard Typography

Heading One Bold 45px
-15px Letter spacing/50px Line Height

Heading Two Bold 30px-15px Letter spacing/37px Line Height

Intro Copy Regular 30px-15px Letter spacing/37px Line Height

Heading Three Bold 25px-15px Letter spacing/32px Line Height

Body Copy 19px/29px Line Height

Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo.

Small Copy 17px/27px Line Height

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.

Layout

10 Column Grid - Central 1200px Column

Images / Content

Full width images at the top of a page use a 30% black tint over the top to allow for readable text.

For in page images, a corner radius of 12px is added.

In page images should overhang slightly the text to the right or left depending on alignment, as shown below.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor.

Image Grid (an image and caption for each item)

Tortor

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor.

Ullamcorper dapibus

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor.

Etiam aenean

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor.

100,510

people benefitted from Raleigh’s work

Portals

Large Story portal example

“Inspirational, life-changing, absolutely amazing! I would recommend it to anyone.”

Post type portal examples

Partner

Partner

Google

Job

Assistant Social media and marketing manager

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Aenean nulla...

Blog - Wide

Borneo
23 June - 10 August
7 week expedition
Places available
Borneo
23 June - 10 August
7 week expedition
Limited places available
Borneo
23 June - 10 August
7 week expedition
Sorry, no places left
Borneo
23 June - 10 August
7 week expedition
Sorry, no places left
Borneo
23 June - 10 August
7 week expedition
Sorry, no places left

Call to action box (Image, title, small line of copy, CTA - 1 or 2)

We provide sustainable development to make a real impact!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat.

Read about our impact

We provide sustainable development to make a real impact!

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat.

Read about our impact Apply today

Iconography

Forms

Form elements

Gravity form example (with validation)