Adapting the new Greenpeace identity to the web
A journey through Iterative design, community engagement, and inclusivity
On August 25, 2022, Greenpeace rolled out the new visual identity to the world. This significant transformation went beyond a simple change in appearance; it aimed at enhancing our global presence and increasing our impact. By adopting these guidelines, we are able to connect meaningfully with our diverse audiences, communities, targets, and stakeholders to bring about the changes the world urgently needs.
However, as anyone involved in design knows well, good design is not only about how something looks but also about how it functions and interacts with its users. As a team responsible for Planet 4, the digital platform for Greenpeace, we had the responsibility to bring this refreshed visual identity to life across our website while maintaining a focus on accessibility and user experience.
In this behind-the-scenes journey, we will explore the various aspects of our design transformation. We’ll walk you through how we successfully created the new color schemes, and typography choices to create a fresh yet inclusive user experience. From selecting color palettes that align with our environmental values, to choosing fonts that prioritize readability. So stay with us, as we deep dive into the details that make Greenpeace’s new visual identity not just eye-catching but also deeply impactful and accessible to all.
Color Exploration and Adaptation
The new visual identity consists of primary colors (Greenpeace green, black, & white) and secondary colors (action yellow, & dark green). To fully integrate these colors into our website, we undertook several iterations.
In the first iteration of color exploration, the Yellow was initially too vibrant when set against a white background which made it less noticeable. Also, the dark green color was drawing users’ attention significantly when applied on backgrounds — competing with page text and content for attention rather than complementing them. This led us to modify these colors slightly by replacing dark green with dark teal and increasing the contrast of action yellow so that they become more user-friendly and less overwhelming to the eye.
We replaced the pure black text with dark gray color which helps in reducing eye strain as it has a softer contrast. In line with this approach towards enhanced readability, we replaced the orange CTA buttons with Greenpeace green and swapped out the orange color in the sticky donate button for an Action yellow variant.
After fine-tuning the color palette, we proposed the first draft of colors: Greenpeace green, P4 action yellow, and dark teal along with beige red and dark grey.
Ensuring Accessibility Standards with Color Choices
To ensure accessibility standards are met across all elements of design, We utilized Adobe’s Color Blindness Accessibility tool to confirm that none of the swatches used are flagged by conflict lines meaning each one can be perceived distinctly even by users with color blindness.
Additionally, high contrast levels were maintained to enhance legibility, especially for content with text over colored backgrounds. These measures adhere strictly to WCAG level “AA” guidelines which require a minimum 4.5:1 contrast ratio for texts.
Community Feedback & Second Iteration for Color Palette
After finalizing these changes, feedback from community calls provided valuable insights into the effectiveness of the changes we made.
Positive feedback highlighted that the new color scheme was perceived as modern, readable, and easy on the eye. Users liked the new body links style and hover colors along with various shades of green which they felt made it easier to use. They also liked the use of white space & the new color palette as it was seen as contemporary and pleasing to the eye.
However, concerns were raised about dark teal clashing with Greenpeace's green color and the absence of strong or “hot” colors like orange in this new color scheme. The Action yellow was seen as less impactful compared to the previous orange shade. In response to these concerns, we went through a second iteration. We tried adding the orange but unfortunately, it didn’t meet accessibility standards with a contrast ratio of 3:1, which was below the required 4.5:1.
To ensure sufficient contrast between text and background, we explored different variants of orange while keeping accessibility front-of-mind.
Despite several attempts, the CTA button did not visually stand out on the page when orange was applied. So, we decided to tweak the P4 action yellow to make it more impactful and accessible with a high contrast ratio of 13:1. This ensured visibility plus added energy & friendliness to the overall design.
To address the issue related to dark teal, another dark green variant was chosen to have less attraction against backgrounds while blending well with Action yellow.
To have a richer color scheme, we developed an extended palette that included tints and shades from each of the primary and secondary colors. This was achieved using the Material Color Tool.
This extended palette consisted of all potential variations of each color. However, after a careful analysis of the use cases, we decided to keep only those tints and shades that were usable. This approach helped in reducing the cognitive load on users while also maintaining the simplicity of our design system.
Color Usage
- Greenpeace green is primarily used for brand recognition and is used to highlight important elements.
- P4 Action yellow brings attention to primary actions/items needing special emphasis.
- P4 dark green provides subtlety and is therefore being used for less prominent components within the UI.
- Beige adds warmth to the user interface without overpowering other hues.
- Red serves to draw attention to destructive actions/error states.
- Neutrals provide hierarchy and contrast for text content. They’re also used for backgrounds, borders, and dividing lines without competing with our primary and secondary colors.
This thorough color scheme not only aligns with Greenpeace’s core values but also ensures a seamless user experience across all digital platforms by prioritizing readability, accessibility & visual harmony.
Typography Selection Process
The new visual identity consisted of three distinct typefaces with different usage. Zodiac Sans was selected as the display text. Source Serif Pro for the body, and Work Sans for the headings. However, during the first iteration process, we noticed some issues with these initial choices.
Zodiac Sans has less white space within its letters which makes blocks of text appear intimidating and overwhelming to read. To resolve this issue, we replaced Zodiac Sans with Bebas Neue Pro — a more web-friendly font known for being visually appealing while maintaining legibility even at smaller sizes.
Source Sans 3 as Replacement Font of Work Sans
We also considered replacing Work Sans with another San serif typeface due to its loose lettering style which resulted in texts taking up more space on UIs than necessary. Our goal was to find a replacement typeface that features slightly condensed letterforms, so to achieve this we ran two primary testing methods: The Il1 test and the open shapes assessment.
The Il1 test is a simplified method used to assess if a typeface has distinct characters. It involves examining three specific characters — capital ‘I’, lowercase ‘l’, and number ‘1’. These characters are then compared for each typeface option being considered. A typeface with well-defined letters and numbers will be easier to understand than one where there’s less distinction between these elements.
Open shapes refer primarily to apertures — counters opened towards surrounding space in typography design language — which should ideally be open rather than closed shapes as they are easier on the eyes especially when viewed at smaller sizes.
After conducting a thorough selection process, we have chosen Source Sans 3 as our new font in place of Work Sans. This typeface not only meets our requirements in terms of legibility and efficiency but also showcases distinct character forms and open shapes, ensuring optimal readability across different sizes.
Community Concerns of Bebas Neue Pro typeface
Upon presenting this proposal to our community members, however, several concerns were raised about Bebas Neue Pro. One argument was that since Zodiac Sans is closely connected to Greenpeace’s identity, it should be used on the website to maintain consistency and brand recognition. Additionally, using a paid font like Bebas Neue Pro may contradict our project’s open-source principles and could pose challenges when working with freelancers or volunteers who might not have access to this non-free font.
The Birth of Greenpeace Sans
This led us into the second iteration phase where our French team took up the challenge to make Zodiac Sans a web-friendly typeface while preserving Greenpeace’s essence. To achieve this, they collaborated with the design studio TypoMorpho for this task. The result was an improved version of Greenpeace Sans that addressed several areas:
- Enhancing legibility: We made the lowercase letters of Greenpeace Sans less condensed and larger. This adjustment significantly improved the font’s readability. Additionally, we worked on the shapes inside the letters to ensure a more harmonious and balanced appearance.
- X-Height Adjustment: The X-height refers to the height of lowercase letters. We fine-tuned this aspect of the font to ensure that when Greenpeace Sans is used in paragraphs, the text appears consistently aligned. This Adjustment greatly enhanced legibility, especially when the font is used in smaller sizes.
- Expanded Character Set: To make Greenpeace Sans more versatile and usable across various languages, we extended its character set to include Latin and Cyrillic letters.
Finally, the enhanced Zodiac Sans was rebranded as Greenpeace Sans🎉. This renamed identity further strengthens our connection with the iconic font while addressing all concerns and feedback from our community members. We are truly grateful for this collaborative effort including valuable contributions from our community and insights of TypoMorpho which ultimately led to a more inclusive and adaptable typeface for Greenpeace’s communications.
In conclusion, Planet 4 journey towards the new visual identity was a collaborative and iterative process, focused on inclusivity, community engagement, and enhancing user experience. The selection of the color palette involved multiple rounds of exploration and feedback to balance accessibility with visual appeal while maintaining Greenpeace’s core values. The font selection process underwent several iterations to ensure legibility and adaptability, taking into account community concerns and the open-source nature of the project. By prioritizing these elements, Greenpeace has created a visual identity that not only catches the eye but also connects with and empowers its global audience, effectively working towards the environmental changes the world urgently needs.
A big thanks to Magali Fatome, Sylvain Henri, and Elaine Hill for their contribution to this project as well as the Planet 4 team and the entire P4 community for their support.
