Build Back Fossil Free

Brand, website, and materials for a coalition of over 200 leading climate and environmental groups in the U.S.

From Greenpeace and the Sierra Club to Patagonia and Ben & Jerry's, the #BuildBackFossil Free coalition is a massive and diverse group of companies, nonprofits and NGOs — all committed to pushing the Biden administration to do more to protect our climate, our communities, and our environment.

Using elements from the Biden campaign's visual style, we created a brand that evokes the trustworthiness, unity and authority of the office of the President, and leverages it to push our leaders to do better.

Poster that says 'Build Back Fossil Free'

11x17 posters for the Build Back Fossil Free coalition.

Role: Brand, design, print production.

Customizable flyers for the Build Back Fossil Free week of action. Built using Google Drawings so that anyone can quickly and easily make their own printable, downloadable custom flyer.

Role: Brand, design, setup.

Graphic with image of a young native woman. Text reads 'Build Back Fossil Free, Manifestación Virtual, 26 de enero

Social share graphics for a virtual rally, in both English and Spanish.

Role: Brand, design.

Screenshot of a webpage in an open letter, semi-presidential style.

Early version of the buildbackfossilfree.org homepage.

Role: Brand, design, development.

Photo of a box truck with video panels covering the sides and rear. One of the screens reads 'Protext and invest in black, brown, indigenous and working class communities'.

Graphics for a video truck that was parked in front of the EPA office building in Washington D.C.

Role: Brand, design.
Photo: MVMT Catalyst.

Screenshot of the buildbackfossilfree.org homepage.

The homepage of buildbackfossilfree.org.

Role: Brand, design, development.

Global Climate Strike

Brand, website, materials and typeface design for a worldwide climate mobilization in 2019.

The 2019 Global Climate Strike came after months of school strikes led by youth like Greta Thunberg and Alexandria Villaseñor. During the week of September 20-27, over 7.6 million people took part in 6135 actions in 185 countries around the world.

In my role at 350.org, I created a visual style for the strikes that was simple, easy, and free for volunteers to work with (including designing a free typeface, Greve). I also designed and built the globalclimatestrike.net website, as well as posters, stickers, Instagram camera frames and free-to-use Canva templates.

Animation of versions of the Global Climate Strike logo in 8 different languages

Logo for the 2019 Global Climate Strike in 8 languages.

Role: Brand strategy, design and creation.

Global Climate Strike Instagram camera frame, featuring translations of "Global Climate Strike" as a border. The border scales to fit any size device.

Role: Concept, design and implementation.

Dutch poster for a local Global Climate Strike event hanging in a shop window in Amsterdam.

Dutch poster for a local Global Climate Strike event in Amsterdam, an example of the open-source brand in use.

Role: Brand, type design.

A sign that reads 'Closed for climate emergency' in the style of classic store window signs.

"Closed" sign for businesses to use as part of their participation in the climate strikes.

Role: Concept and design.

A full-page ad in a newspaper asking people to attend the Global Climate Strike rally in New York City.

Full-page ad in The Indypendent newspaper for the 2019 Global Climate Strike in New York City.

Role: Design and Print pre-production.

A circular badge design with 'Global Climate Strike' in a ring around the edge and an image of the Earth in the center

Circular sticker designed as a free giveaway during the climate strikes.

Role: Design.

Sample text demonstrating the custom typeface developed for the climate strikes.

Greve is a custom display font made specifically for the climate strikes and given away freely as a tool for people to use.

Role: Type design.

Photo of people at a rally, holding up signs that read 'climate crisis won't wait, neither will we

Examples of the Global Climate Strike brand and the Greve font in use on a protest sign.

Role: Brand and Type design.   Photo: Ensia Media.

Instagram post with a photo of Greta Thunberg and the text 'Strike like a 16-year-old (lessons available)

Promotional Instagram graphic featuring Greta Thunberg.

Role: Design.

Equation Campaign

Brand, website and materials for a project supporting local groups fighting fossil fuel projects.

The Equation Campaign is a 10-year campaign that's aiming to cut carbon emissions in half by helping frontline groups — the people whose air, water and land are directly threatened by coal, oil and gas extraction — to fight back against the fossil fuel industry.

I helped them build a brand from scratch, quickly establishing The Equation Campaign as trustworthy source of information, training and resources on resisting fossil fuel projects.

Two versions of The Equation Campaign logo, one with the full name and one abbreviated one with a single capital E.

Equation campaign logo and variations.

Role: Brand and Type design.

Screenshot of the equationcampaign.org homepage

Equation campaign website (equationcampaign.org) is built on Wordpress using the Baseline framework (see below)

Role: Design, Development, UI/UX.

Blue and white repeating pattern composed of topographical map lines and anti-forgery markings used by engravers

Pattern design, combining topographical maps to evoke a sense of land and geography, and currency engravings to evoke a feeling of trustworthy financial institutions.

Role: Design.

Social media graphic reading 'Funding the fight against the fossil fuel industry

Social media graphic for The Equation Campaign.

Role: Design.

Cover design for a printed report titled 'Introducing the Equation Campaign'

Cover design for a report used to help raise funding to distribute to frontline environmental groups.

Role: Design.

Black and white photo of hands in the air at a protest

Photo selections to make sure The Equation Campaign team always has a good photo handy.

Role: Photo research.

Flowchart diagram explaining the Equation Campaign's strategy — breaking the fossil fuel industry's cycle of extract, profit and influence.

Diagrams illustrating exactly how The Equation Campaign's strategy will create change.

Role: Information design.

350.org Global Brand

Brand system, tools, templates, and visual resources for a global climate organization.

350 is an NGO built to support the global movement to stop the climate crisis. I was lucky enough to be the lead designer for 350 from the organization's beginning in 2009 until 2020, so I was able to work with the brand in a hands-on way for over a decade.

From the start, we knew that 350's identity needed to focus on two things: One, that climate change is about more than polar bears and icebergs, it's about real people whose lives are being impacted right now. Two, that a grassroots movement needs to have tools that are free, open, and easy to use. No fancy Photoshop tricks, no expensive fonts, no complicated setups.

From 2009 to 2020, I made custom typefaces, designed climate-focused icon sets, managed a Flickr account with over 50,000 Creative Commons-licensed photos of climate actions from around the world, developed a tool that people could use to generate their own custom posters and flyers, and more. All with the focus of helping ordinary people create powerful climate visuals.

350 logo

Logo for 350.org

Role: Logo design.

Photo of a young child holding up a handful of 350 Indonesia stickers

Example of 350's brand being customized and used in a local context.

Role: Brand design. Photo: 350 Indonesia.

Social media graphic that reads 'Stop Fossil Fuels. Build 100% Renewables'

Social media graphic for 350 designed to communicate 350's core message and capture the people-power spirit of 350's mass actions.

Role: Design.

Photo of a 350-branded tote bag hanging from a fencepost

Tote bag used as thank you gift for 350's donors. It shipped with a reusable fabric pen so people could fill in the blank and customize the bag for themselves.

Role: Concept and Design.

Sample text demonstrating the custom typeface Klima

Klima is a typeface that's freely available to anyone working on climate change. Designed as a simple, flexible set of fonts for everyone, it also serves as one of 350's brand fonts.

Role: Type design.

Screenshot of animated hands in the air, waving signs and bullhorns

Animated video explaining 350's mission, strategy and values.

Role: Brand and art direction.   Animation and Production: Claire Pinegar.

Photo of a group of 350 volunteers outside a concert venue, holding a large 350 flag.

350 local group members volunteering outside a concert.

Role: Shirt design.

People's Climate March

Brand, website and materials for the largest-ever (at the time) climate march.

The 2014 People's Climate March was organized by an unprecedented coalition of hundreds of groups, ranging from labor unions and schools to faith groups and racial justice organizations.

Thousands of climate marches took place around the world, including a march in New York City where over 400,000 people, including Ban Ki-moon, Jane Goodall, and Al Gore gathered in the streets. It was so successful, many of the organizers joined together to form the People's Climate Movement, a non-profit that has since led dozens of national climate-focused events.

I worked with the central organizing committee to make sure the visuals we put out were powerful, clear and consistent. While we made a style guide (and only incorporated free and open-source components), we encouraged people to bring their own style and creativity. The color orange was a central theme that helped tie everything together.

Poster for the 2014 People's Climate March. Photo is from Rockaway Beach where flooding from Hurricane Sandy devastated communities in 2012.

Role: Graphic design and photography.

Social media graphic showing one of the early estimates of attendance at the 2014 People's Climate March in New York City. The estimate was later revised to include more than 400,000 people marching that day.

Role: Graphic design.

One of the customizable handheld signs for the 2014 People's Climate March in New York City.

Role: Concept and print design.

Simple guide to using the People's Climate March brand to make your own graphics.

Role: Brand and graphic design.

Social media graphic used as part of a promotional event leading up to the 2014 People's Climate March.

Role: Shirt design.

Massive banner used at the front of the 2017 People's Climate March in Washington DC. Uses Klima, a typeface I designed and distribute freely for the climate movement.

Role: Brand and Type Design   Banner Design: César Maxit + others.   Photo: Hector Emanuel/Survival Media Agency.

Route map showing the path of the 2014 march in New York City.

Role: Information design.

350 Online Actions

Product design, UX, front-end development for 350.org's online petitions and donations system.

Built on top of the ActionKit platform, I designed, developed, tested and iterated on 350's online action system. Petitions, donation pages, surveys, distributed event campaigns and more — it all ran through our online action system.

In addition to developing a totally custom front-end experience for the system, I also added several custom features that ended up being merged back into the core platform.

Screenshot of 350.org's main donation page.

350.org's main global donation page. We routinely tested variables like donation amounts, background image choice, compact multi-step form vs. long single page form, etc.   Link: 350.org/donate

Role: Design, development and testing.

Screenshot of a 'Rise for Pacific Pawa' petition from 350 Pacific

A petition from regional affiliate 350 Pacific using 350.org's petition platform. Showcases some of the customizable options I built in to the platform, like customizable background images, different color schemes.   Link: act.350.org/sign/pacificpawa

Role: Design, development and testing.

Screenshot of a Japanese petition webpage.

350 works in hundreds of countries, so their online action system needed to support lots of languages — including East Asian languages like Japanese, seen here.   Link: act.350.org/act/g20-2020_ja/

Role: Design, development and testing.

Screenshot of a Portuguese-language petition page from the 2015 Paris climate conference

In addition to working in dozens of languages, 350 also often coordinates global days of action where people from around the world take action together simultaneously — the online action system supports that by making it easy to create translated, cross-linked versions of any action.   Link: act.350.org/act/paris-response_pt/

Role: Design, development and testing.

Screenshot of a webpage that helps United States residents call their elected officials to support the Green New Deal.

In the United States, 350 occasionally runs "call" campaigns, where we provide the tools for people to call their elected officials. People can look up their elected official's contact information, as well as suggested talking points for people who are nervous about what to say.   Link: act.350.org/call/house-dems-support-a-green-new-deal

Role: Design, development and testing.

Screenshot of a local petition webpage for a Divest New York campaign

350's online actions platform was designed to scale, so it can by used for very specific, small-scale, local actions, like this one targetting New York City assembly members.   Link: act.350.org/sign/assembly-divestny-2020

Role: Design, development and testing.

Baseline Wordpress Framework

Design and development for a flexible Wordpress framework used by more than 370 websites.

There are thousands of Wordpress frameworks out there, but none that met the needs I had while working at 350 — our websites needed to be multilingual (including non-Latin alphabet languages like Arabic and Japanese), they needed to integrate with online actions systems like ActionKit, Action Netork, ControlShift and more, and we needed to be able to quickly and easily launch new sites with custom colors, fonts and design.

After a few years of doing custom builds for every new site, I saw the potential for a framework that would extend Wordpress' multisite network functionality and allow us to create new websites with customizable design in a single click.

On top of the core framework, I built a custom page builder plugin that allows authors to create pages with complex, multi-section layouts — perfect for homepages.

Tablet-sized screenshot of the gofossilfree.org homepage, with text reading 'We can build a fossil free world'.

Website for Fossil Free, a global campaign to help people form local groups and help transition to a world free from fossil fuels.   Link: gofossilfree.org

Role: Web design and development.

Mobile-sized screenshot of the People's Climate March website, with text reading 'NYC: Join the largest climate march in history'.

Website for the 2014 People's Climate March (later becoming the People's Climate Movement)   Link: peoplesclimatemarch.org

Role: Web design and development.

Screenshot of the 350.org homepage. Reads 'Stop Fossil Fuels. Build 100% Renewables.'

Global website for 350.org, with versions in eight languages.   Link: 350.org

Role: Web design and development.

Screenshot of the 'Science' page on 350.org, reads '1. It's Warming, 2. It's us, 3. We're sure, 4. It's bad, 5. We can fix it.

"Science" page on 350.org featuring a succinct summary of the latest climate science from Dr. Kimberley Nicholas.   Link: 350.org/science

Role: Web design and development.

Screenshot of the exxonknew.org homepage. Features large text explaining Exxon's misdeeds with inline citations and documents.

Website for the Exxon Knew campaign, based on uncovered documents proving that Exxon knew about climate change 40 years ago and worked to surpress that knowledge.   Link: exxonknew.org/science

Role: Web design and development.

Screenshot of 350 Trainings website, text reads 'Share Knowledge, Build Relationships, and Lead Effective Workshops.'

Documentation site for the Baseline project, includes basic tips, FAQ, a list of useful CSS classes that are included that allow HTML authors to easily customize their page.   Link: baseline.350.org

Role: Web design, development and writing.

Screenshot of 350 Trainings website, text reads 'Share Knowledge, Build Relationships, and Lead Effective Workshops.'

350 Trainings website, featuring a large archive of useful content for trainers and workshop leaders. We augmented the Baseline framework with several tools, filters, and navigational elements to help people browse this wealth of useful training material.   Link: trainings.350.org

Role: Web design and development.

Typeface Design

Designing typefaces for activists, free for all non-commercial use.

See the fonts page for more.

Font sample for Folsom typeface. Text: 'Chunky + Bold'.

Folsom is a wide, bold, all-caps display typeface, developed as the brand font for the Rise for Climate 2018 global day of action. It's free to download for all non-commercial use.   Link: wehtt.am/fonts/#folsom

Role: Type design.

Sample of Arroyo font. Reads: 'Arroyo. Wide + Western'.

Arroyo is a western-flavored, Latin-style display typeface.   Link: wehtt.am/fonts/#arroyo

Role: Type design.

Sample of Mort typeface.

Mort is a chunky 70's geometric displaly typeface.   Link: wehtt.am/fonts/#mort

Role: Type design.

Mort is a chunky 70's geometric display typeface.   Link: wehtt.am/fonts/#mort

Role: Type design.

Other Projects

Unique, unusual, or otherwise interesting one-off projects.

Banner reading 'Keep it in the Ground' being displayed dramatically at the top of the Cliffs of Moher in Ireland.

"Keep it in the Ground" banner using Graph, made by the Green Party of Ireland. Photo taken at the top of the Cliffs of Moher.

Role: Type design.   Banner Design: Green Party of Ireland   Photo: Eamon Ryan.

100-meter wide image of a polar bear drawn on the Langjökull glacier in Iceland using biodegradeable food coloring. Part of a series called eARTh, where large-scale land art was created and then photographed by satelite.

Role: Bear design.   Concept: Bjargey Ólafsdóttir.   Photo: Christopher Lund  

Video thumbnail

Anti-mountaintop removal video from Rainforest Action Network, featuring a voiceover from Susan Sarandon. Watch on YouTube.

Role: Motion graphics, video editing and production.   Client: Rainforest Action Network

A massive multi-story yellow banner hanging from a coal crane, reading 'Quit Coal'.

Massive Greenpeace banner drop from a coal crane in Cirebon, Indonesia. Uses Graph as the typeface.

Role: Typeface design.   Design: Greenpeace

Jane Fonda and Melissa Laboucan-Massimo giving a speech at an outdoor podium labeled 'Jobs, Justice, Climate'.

Melina Laboucan-Massimo and Jane Fonda at the March for Jobs, Justice and Climate in Toronto, Canada, July 2015. Font is Graph.

Typeface: Matthew Hinders-Anderson.   Photo: Robert van Waarden / Survival Media Agency

Contact

Email: ma.tthew@gmail.comwehttam

About

Designer working in type, branding, print and web.

Formerly the lead designer for 350.org, Matthew's expertise is designing for progressive movements, with over 10 years of experience working in the global climate movement.

Unique skills include:

  • Creating brand systems that are easy for normal people to use with no special tools or training.
  • Building good-looking, high-performing websites.
  • Working across multiple languages and cultures.

Born and raised in Columbus, Ohio. Currently living in Brooklyn, New York.

Photograph: Matthew sitting outside in a park in front of a domed greenhouse.