Nonprofit & Charity Website Design Examples

43 real sites · 1,207 sections

There are 43 nonprofit & charity website designs here — live sites that are nonprofits, charities or foundations, including Pangaia, Khan Academy, Aptos, Foundation and Thefoundation — cut into 1,207 sections. 93% use a light theme and 7% a dark one; the most common headline fonts are Proxima Nova (2), PANGAIA (1) and Plus Jakarta Sans (1). 24 of 43 open with a hero, 1 show pricing on the homepage and 2 carry testimonials.

At a glance

Sites: 43
Sections captured: 1,207
Light / dark: 93% light · 7% dark
Top heading fonts: Proxima Nova (2), PANGAIA (1) and Plus Jakarta Sans (1)
Accent colours: blue 15orange 8red 6
Most common sections: features (39), statement (26), hero (24) and call to action (20)
Top industries: Lifestyle (35), Crypto & Web3 (2) and Real Estate (2)
Award winners: 3 of 43

What makes a good nonprofit & charity website design

Nonprofit sites turn a cause into action: the problem and the people behind it, impact numbers, stories, and donate or volunteer calls that are easy to act on.

What these 43 nonprofit & charity websites have in common

Measured from the captures, not opinion — use it to plan a nonprofit & charity website against what already works.

Sections they use

39 include features, 26 include statement, 24 include hero and 20 include call to action. 4 answer objections with an FAQ and 20 (47%) close with a dedicated call to action. Read top to bottom, the most common running order is hero → features → footer → call to action → statement. Compare them side by side: features section examples, statement section examples, hero section examples.

Type and colour

Light layouts lead (93% vs 7% dark). Headlines are most often set in Proxima Nova (2), PANGAIA (1) and Plus Jakarta Sans (1). The most common accent hues are blue (15), orange (8) and red (6). Every example lists its exact fonts and hex palette on its page.

Page length

The average homepage here is about 6,352px tall at desktop width — roughly 7 screens of scrolling, with Aptos the longest at 11,000px. Open any site to scroll the full-page capture and see where each section falls.

43 nonprofit & charity website designs worth studying

charity: water — “charity: water is a global nonprofit organization on a mission to end the water crisis by bringing clean and safe water to communities in need.” 32 sections, headlines in Proxima Nova, light theme, palette #ffffff and #ffca0a; the homepage runs statement → features → footer.
GiveDirectly — “GiveDirectly allows donors to send money directly to people in poverty with no strings attached. Our approach is guided by rigorous evidence of impact and our values of…” 36 sections, headlines in Aktiv grotesk, light theme, palette #095845 and #ffffff; the homepage runs logo cloud → features → blog.
UNICEF — “UNICEF works in the world’s toughest places to reach the most disadvantaged children and to protect the rights of every child, everywhere.” 51 sections, headlines in Noto Sans, light theme, palette #ffffff and #111111; the homepage runs hero → blog → features → call to action.
GoFundMe — “Start your fundraiser in minutes with tools to help you succeed. GoFundMe is the global leader in crowdfunding, trusted by 100+ million people.” 38 sections, headlines in Go Fund Me Sans, light theme, palette #ffffff and #232323; the homepage runs hero → features → how it works → footer.
Wikimedia Foundation — “The Wikimedia Foundation is the nonprofit that hosts Wikipedia and other free knowledge projects, supporting the people and technology that make them possible.” 33 sections, headlines in Montserrat, light theme, palette #000000 and #ffffff.
Amnesty International — “We are a global movement of more than 10 million people in over 150 countries who campaign campaign for a world where human rights are enjoyed by all.” 19 sections, headlines in Amnesty Trade Gothic Condensed, light theme, palette #ffffff and #000000; the homepage runs hero → blog → footer.

How to use these references for a nonprofit & charity website

Lead with one story and one clear ask. Show where the money goes and repeat the donate button with suggested amounts through the page. Start with Pangaia, Khan Academy and Aptos, open each site at full size and compare their features and statement sections; every reference carries its palette, fonts and a build prompt you can paste into your editor.