The Nature Conservancy

Sizes in use: 40px / 34px / 32px / 30px / 24px / 18px / 16px / 14px / 13px

# The Nature Conservancy design system

> Captured from https://www.nature.org/en-us/ on 2026-10-06 by Brooks New Media (https://design.brooksnewmedia.com/styles/the-nature-conservancy/). An independent analysis for reference: The Nature Conservancy and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

The Nature Conservancy uses a white page, #1a1a1a ink and one deep #00703c green for donate and outline buttons, all square cornered. Whitney sets 40px bold headlines and 18px body, while Chronicle, a serif, takes the 30 to 34px section headings. A white card overlaps the full-bleed photo, edged with a green rule along its base.

- Theme: light
- Mood: green, conservation, serif and sans, square buttons, photo-led
- Category: Nonprofit

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#ffffff` | The page ground |
| Surface | `#1a1a1a` | Raised panels, bands and cards |
| Text | `#1a1a1a` | Primary ink, 17.4:1 on the background |
| Accent | `#00703c` | Primary actions |
| Highlight | `#42632d` | Brand color in artwork, marks and badges |
| Border | `#00703c` | Hairlines and dividers |

Full palette, most used first: `#ffffff`, `#1a1a1a`, `#5e5e5e`, `#00703c`, `#42632d`, `#cdcdcd`, `#f8f8f8`.

## Typography

- **Whitney A**: display and body, 67.5% of the text. Use Source Sans 3. Whitney is a paid typeface. Source Sans 3 is a free stand-in, not a match.
- **Chronicle Text G2 A**: display and body, 32.5% of the text. Use Libre Caslon Text. Chronicle Text is a paid typeface. Libre Caslon Text is a free stand-in, not a match.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | Whitney A | 40px | 700 | 1.2 | 0 |
| Heading | Chronicle Text G2 A | 34px | 600 | 1.24 | 0 |
| Subheading | Chronicle Text G2 A | 30px | 700 | 1.4 | 0 |
| Body | Whitney A | 18px | 400 | 1.56 | 0 |
| Small | Whitney A | 16px | 400 | 1.75 | 0 |

Sizes in use, largest first: 40px, 34px, 32px, 30px, 24px, 18px, 16px, 14px, 13px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 10px, 14px, 20px, 30px, 50px, 60px, 80px.

## Shape

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

Shadows, most used first:

- `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px`
- `rgba(0, 0, 0, 0.2) 0px 2px 25px 0px`

## Components

### Primary button ("DONATE")

- Fill: #00703c
- Text: #ffffff, 14px at weight 700
- Border: none
- Corner: 0px
- Height: 40px, padding 10px 30px

### Secondary button ("RENEW")

- Fill: #ffffff
- Text: #00703c, 14px at weight 700
- Border: 1px solid #949494
- Corner: 0px
- Height: 40px, padding 10px 30px

### Card

- Fill: #ffffff
- Border: none
- Corner: 5px
- Shadow: `rgba(0, 0, 0, 0.2) 0px 2px 25px 0px`

## Do

- Keep every button square cornered in one deep green.
- Pair a sturdy sans for headlines and body with a book serif for section heads.
- Overlap a white card onto the hero photo to carry the main message.

## Don't

- Round the buttons: the page uses no radius except tiny pills.
- Use a bright lime: the green is deep and earthy.
- Set navigation in sentence case; nav labels run bold uppercase.

## CSS variables

```css
:root {
  --color-background: #ffffff;
  --color-surface: #1a1a1a;
  --color-text: #1a1a1a;
  --color-accent: #00703c;
  --color-highlight: #42632d;
  --color-border: #00703c;
  --font-display: "Whitney A", system-ui, sans-serif;
  --text-display: 40px;
  --weight-display: 700;
  --font-heading: "Chronicle Text G2 A", system-ui, sans-serif;
  --text-heading: 34px;
  --weight-heading: 600;
  --font-subheading: "Chronicle Text G2 A", system-ui, sans-serif;
  --text-subheading: 30px;
  --weight-subheading: 700;
  --font-body: "Whitney A", system-ui, sans-serif;
  --text-body: 18px;
  --weight-body: 400;
  --font-small: "Whitney A", system-ui, sans-serif;
  --text-small: 16px;
  --weight-small: 400;
  --space-1: 10px;
  --space-2: 14px;
  --space-3: 20px;
  --space-4: 30px;
  --space-5: 50px;
  --space-6: 60px;
  --space-7: 80px;
  --radius-1: 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.

The Nature Conservancy and its marks belong to their owner. This page is an independent analysis of the public website, measured on 2026-10-06. We're not affiliated with or endorsed by The Nature Conservancy.