Welcome to the P4 Style Guide!

To help implement our engagement strategies, visual consistency in our digital presence is a goal. When we integrate the basic common elements in this guide, we strengthen our message and increase its effectiveness.

 

How to use this guide

Please read through the Story and Content Guides. This will introduce you to our messaging strategy, values and voice. Understanding how we wish to present ourselves to the world will orient you to what’s behind the brand tools that are included in this Style Guide and make sure your work reinforces the brand we are building together.

 

Foundation

Colour palette

In preparation for designing, we did extensive research into colour. You can read about all the work we did here. As the project moved forward we checked our colour palettes against monitor types, readability and end usage. We narrowed the palette down to a launch palette of  23 core colours and 44 secondary colours.

The core colours were based upon the Greenpeace Germany & Greenpeace Nordic colour work. The bulk of the secondary colours from the various campaign colour palettes we gathered from around the global organisation.

This is the current palette (we are actively doing colour work!):

 

Other key colours

To enable more freedom for global web editors and reduce the number of microsites that P3 seemed to force campaigners to create, other key colours were integrated into the P4 design. Those colours may potentially be applied to backgrounds and header/footer colours (picked from the palette), to adapt to specific campaign stories and more accurately reflect the organisation today.

Here some of these key codes:

 

 


The Greenpeace Logo

When Greenpeace International was set up in the late 1970s, there was one item that kept appearing on the agenda of every annual planning meeting: finding a common logo. In those days, there was no agreed way on how to write (or even capitalise) “Greenpeace.”

Some adopted a Native American symbol while others used a peace sign and the ecology icon with “Green Peace” as two words. Some wrote “Greenpeace” in a Times-Roman font, and others would use whatever typeface they fancied that week – often depending on which Letraset sheets were lying around the office or ship. Whenever the logo came up for discussion, it would either lead to an argument based on personal preferences or get overlooked in favour of more important campaign matters.

Rémi Parmentier, one of the founders of Greenpeace International, recalls:

“One day in Paris in the early 80s, we were out of Letraset sheets and the local stationery shop was closed. A publication needed a Greenpeace logo. So a fellow named Jean-Marc Pias, who had been making posters and stickers, ran around the corner to a bar and asked an artist friend named Patrick Garaude to write out “Greenpeace” for him.”

Garaude drew quickly with a fat felt-tip pen, on a beer mat, and the “graffiti logo” was born. It was adopted by office after office and ship after ship until it became one of the most recognised symbols in the world. Rémi says:

“Whenever I see that logo today, especially in remote places like Antarctica and the Amazon, I remember Garaude with a pen in one hand, and a beer in the other.”

We made the decision to reduce the dominance of #66cc00 “Greenpeace Green” and created a system where web editors could push other colour palettes to the fore. The Greenpeace green (#66cc00) will now only be used in the logo. By enforcing this rule and using it for this sole purpose, the Greenpeace green will become synonymous with the logo. Please note the only other colour to be used with the logo is white.

The Greenpeace logo sits in the top left corner of every page in Tablet Landscape and Desktop. It uses the GP Green colour #66cc00 and acts as a return to home page button. In Tablet Portrait and Mobile the logo moves to a central position.

The Master Artwork for the Greenpeace logo is at: greenpeace.org/identity. For more logo guides click here

 

 


Color combinations

There’s lots to try! Here are some sample combinations:

 

 


Typeface

The next step for our preparation was to review the Greenpeace text font. The existing brand font is Helvetica. However, we found that many Greenpeace sites were using other fonts and not Helvetica. So we reviewed the fonts that were available to us (they had to be free to use, have a global character set and be cut for digital use) and presented four that met the criteria (and were closer to the cut of Helvetica) to the Greenpeace community. We asked them to vote for whichever font they thought worked best. The results are here.

Roboto

The font selected was Roboto. This forms the main structural font for the site. It is used in all the site navigation, headings, sub-headings and site tools.

Lora

Research showed us that a serif font, when used on large bodies of text was easier for the user to read. Again we researched fonts and found that Lora is the font that works best with Roboto and meets all of the language requirements.

How to use

We use Roboto for headers and as a system font, Lora for body copy, and Noto Sans for offices that need a san-serif body copy. These three fonts have been tested against global accessibility standards and reviewed for their inclusion of non-Arabic symbols.

Campaign Font Selection

We have not yet made any campaign font selections! We did create a mood board though. Help us!

 

 


Responsive Grid & REM Values

Planet 4 is built for all devices. We created planet four to work on all major browsing platforms/devices. Our sizes are XL – Large desktop, L – Small desktop, laptop, tablet landscape, M – Tablet portrait & S – Mobile. See “Visuals” for more.

Planet 4’s grid structure is a 12-column grid, which is Bootstrap’s framework default and the most commonly used across the internet. We built on a core structure that has been tried and tested, so that Planet 4 could be as responsive and robust as possible.

Planet 4 uses REM as its measurement system. The REM is defined by a base value. Ours is 16px so 1 REM = 16px. For example, if something is 24px it is 1.5rem. Because we use Adobe illustrator as our base design tool and 1px = 1pt then we can apply the same rule. 24pt is 1.5rem. If in doubt, just divide by 16.

 


Global Elements

Header and Footer

Every page has header and footer. They are linked in colour, style and function to the #074365 colour code. The header (or top nav bar) contains the Logo, Country Selector, Primary Navigation (Act, Explore & Donate) and Search. The footer contains social links, organisational, Archive, legal links and copyright information.

Main navigation of GP India – English version

In Tablet Portrait and Mobile, the Primary Navigation is housed in a side draw accessed via a menu button.

We chose a Menu button over a “Hamburger” menu icon because user testing showed that some people didn’t know what a “Hamburger” menu icon was.

 

 

Pagination

Planet 4 uses Lazy Load and Load More. This means that Articles Block, Covers Block and Search Results load to a set number of elements and a load more button is added if there is more content.

The default Lazy Load for the following content is…

Search Results : 15

Images

 

Breadcrumbs

Article blocks, Issue Pages, Take Action Pages and Search results all have Issue (aka categories) and #tags breadcrumbs attached. These are situated in the top-left corner. They vary depending on the content. See Taxonomy.

Article blocks and Search Results : Content Type tag and associated Issue Hashtags (3 max)

Issue Pages: Issue tag (Hashtag becomes part of the title) e.g Forests campaign is part of Nature. The Issue tag is “Nature” and the title is “#forests” (campaign tag).

Take Action Pages : Issue tag and associated Campaign tags.

 

Icons (search, social, arrows)

The majority of icons in the site are covered by either “Wordpress” or  the “Font Awesome” font. However, the following are bespoke elements. The comments anchor icon, language selector arrow and the back and forward arrows in slideshow.

Icon colours by default are #1a1a1a however the back and forward icons in slideshow are images. The background is #074365, The border and arrow are  #FFFFFF – Passive 50% Roll over 100%

 

Back to Top

The back to the top button is useful on long pages so the user can reach the top of the page quickly.

 


Form elements

Why

Where

When

Inputs

Input fields are rectangles. In their passive state they have a 1px border the colour is #ced4da. On click (to enter text) the border becomes #80BDFF with glow of .25px. There is an action button (See buttons).

Text areas

Why

Where

When

Select menus

Why

Where

When

Checkboxes

Why : We use check boxes when users to make multiple selections

Where : When we want the user to select multiple elements.

When : Refining Search, User Feedback

Switches

Why :  We use switches when we want answers to specific questions.

Where : We use them in forms or when we ask the user to do something.

When : Donate or Sign Petition.

Radio buttons

Why : We use radio buttons when we want answers to specific questions.

Where : We use them in forms or when we ask the user to do something.

When : Donate or Sign Petition.

Sliders

Why :

Where

When

 


Links & Resources