# World Wildlife Fund design system

> Captured from https://www.worldwildlife.org/ on 2026-10-06 by Brooks New Media (https://design.brooksnewmedia.com/styles/wwf/). An independent analysis for reference: World Wildlife Fund and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

WWF builds on a warm #fefcf9 cream instead of white, with a #f9f3eb surface, #4b3516 deep brown bands and #cb4328 rust for giving. One family, Open Sans, runs the whole page: 54px bold display with tight tracking, 18px body at 1.6 line height. Buttons are pills, and the brand mark stays black and white.

- Theme: light
- Mood: earthy, warm, nature, photo-led, pill buttons
- Category: Nonprofit

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#fefcf9` | The page ground |
| Surface | `#f9f3eb` | Raised panels, bands and cards |
| Text | `#0f0f0f` | Primary ink, 18.7:1 on the background |
| Muted text | `#686868` | Supporting copy, 5.4:1 on the background |
| Accent | `#cb4328` | Primary actions |
| Highlight | `#4b3516` | Brand color in artwork, marks and badges |
| Border | `#0f0f0f` | Hairlines and dividers |

Full palette, most used first: `#fefcf9`, `#0f0f0f`, `#4b3516`, `#f9f3eb`, `#686868`, `#cb4328`, `#dec2a2`.

## Typography

- **Open Sans**: display and body, 100% of the text. Use Open Sans. Open Sans is free under the SIL Open Font License.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | Open Sans | 54px | 700 | 1.1 | -0.03em |
| Heading | Open Sans | 32px | 700 | 1.4 | 0 |
| Subheading | Open Sans | 22px | 600 | 1.4 | 0 |
| Body | Open Sans | 18px | 400 | 1.6 | 0 |
| Small | Open Sans | 14px | 400 | 1.5 | 0 |

Sizes in use, largest first: 54px, 32px, 30px, 22px, 18px, 16px, 14px.

## Spacing

Values sit on a 4px grid.
Values in use: 4px, 8px, 14px, 16px, 20px, 32px, 40px, 80px.

## Shape

Corner radii, smallest first: 4px, pill (9999px).

No shadows: depth comes from color and borders.

## Components

### Primary button ("Skip to main content")

- Fill: #cb4328
- Text: #ffffff, 16px at weight 700
- Border: 1px solid #ffffff
- Corner: 8px
- Height: 56px, padding 16px 16px

### Secondary button ("Gifts")

- Fill: #6f190b
- Text: #ffffff, 18px at weight 600
- Border: none
- Corner: pill (9999px)
- Height: 50px, padding 16px 32px

### Card

- Fill: #f3f3f3
- Border: none
- Corner: 4px
- Shadow: none

## Do

- Use a cream ground and brown bands so the page feels like the natural photography.
- Run every size in one humanist sans and tighten tracking on the big headline.
- Give the donate action a rust pill and keep the secondary pill a darker brown.

## Don't

- Use pure white: the background is a warm cream.
- Use bright greens; the palette leans to soil and bark tones instead.
- Add a second typeface for headings: one family does everything.

## CSS variables

```css
:root {
  --color-background: #fefcf9;
  --color-surface: #f9f3eb;
  --color-text: #0f0f0f;
  --color-text-muted: #686868;
  --color-accent: #cb4328;
  --color-highlight: #4b3516;
  --color-border: #0f0f0f;
  --font-display: "Open Sans", system-ui, sans-serif;
  --text-display: 54px;
  --weight-display: 700;
  --font-heading: "Open Sans", system-ui, sans-serif;
  --text-heading: 32px;
  --weight-heading: 700;
  --font-subheading: "Open Sans", system-ui, sans-serif;
  --text-subheading: 22px;
  --weight-subheading: 600;
  --font-body: "Open Sans", system-ui, sans-serif;
  --text-body: 18px;
  --weight-body: 400;
  --font-small: "Open Sans", system-ui, sans-serif;
  --text-small: 14px;
  --weight-small: 400;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 80px;
  --radius-1: 4px;
  --radius-2: 9999px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-06.