# Ecosia (Light) — Brand Spec

> **This is a LIGHT-MODE adaptation of Ecosia.** Ecosia.org ships a dark-green-by-default UI (rich `#18362b` greens with cream type). For our use case (church / nonprofit websites in the East Valley), we want Ecosia's typography, generous spacing, mission-forward photography, and signature green system — but inverted onto a clean white/cream background. Ecosia's deep greens are kept as **secondary** accents (footer, dark feature bands, headlines) instead of as the page chassis.
>
> Source: ecosia.org + blog.ecosia.org (Ghost CDN), captured 2026-05-06
> Asset completeness: real Ecosia 2022 wordmark + tree mark + 9 real photos lifted from Ecosia's blog CDN + real CSS-extracted color & font tokens

## Core assets

### Logo
- **Wordmark (primary):** `assets/ecosia-light-brand/logo-wordmark.svg` — the modern 2022 single-color "ecosia" wordmark in `#008009` brand green. Use in nav, footer, business cards.
- **Tree mark / older combination logo:** `assets/ecosia-light-brand/logo-tree-mark.svg` — the original 2017 stacked logo with the teal/orange/lime tree. Treat as a heritage / spot mark only; the wordmark is the canonical 2026 expression.
- **Blog mark variant:** `assets/ecosia-light-brand/logo-blog.svg` — the 9-June-2022 sub-brand wordmark for editorial / "stories" sections.
- **Use:** wordmark only on light surfaces; for dark sections, render the same SVG and override `fill` to `#FFFFFF` via CSS.

### Photography
9 real photos lifted from Ecosia's blog CDN (`storage.ghost.io`) at `w1600`, all 1600px wide, all editorial / mission-driven (real planting projects, real people, real landscapes — none are stock):

- `photo-cerrado-restoration.jpg` — Brazilian Cerrado biodiversity restoration, dry savanna grasses
- `photo-rwanda-agroforestry.jpg` — Rwandan smallholder farmer with native trees, agroforestry
- `photo-uganda-forest.jpg` — Ugandan forest restoration, ecological recovery
- `photo-berlin-festival.jpg` — Berlin Umweltfestival, urban tree-planting citizen movement
- `photo-potatoes-andes.jpg` — Andes potato farming, smallholder food sovereignty
- `photo-dominican-republic.png` — Dominican Republic cacao + coffee agroforestry
- `photo-climate-nobel.jpg` — climate journalism / Nobel-prize editorial cover
- `photo-forest-canopy.jpg` — forest canopy from below, deep green canopy
- `photo-trees-milestone.jpg` — Ecosia 250M-trees milestone editorial cover

All photos: 8/10+ on quality/resolution/relevance. Replace none.

## Color tokens

### Original (dark-mode) palette extracted from blog.ecosia.org

| Original token | Hex | Original role |
|----------------|-----|---------------|
| Brand green | `#008009` | Primary brand mark, links |
| Forest deep | `#18362b` | Page background (Ecosia's signature dark green) |
| Forest 700 | `#275243` | Surface variant |
| Forest 600 | `#00644d` | Hover / button hover |
| Mint highlight | `#aae7d7` | Subtle accent |
| Pale sand | `#deded9` | Off-white type on dark |
| Mist | `#e2f7f1` | Very pale mint surface on light |
| Sage edition | `#bacc80` | Editorial accent |
| Terracotta | `#ca8461` | Warm editorial accent |
| Teal mark | `#36acb8` | Tree-logo accent (heritage) |
| Lime mark | `#bacc80`/`#94ab48` | Tree-logo accent (heritage) |
| Coral mark | `#ff7950` | Tree-logo accent (heritage) |

### Light-mode mapping (this design system)

The dark-mode chassis is INVERTED. Greens become accents, not backgrounds.

| Token | Hex | Source | Light-mode role |
|-------|-----|--------|-----------------|
| `--brand` | `#008009` | Ecosia primary green (kept) | Primary CTAs, links, brand mark, logo color |
| `--brand-deep` | `#00644d` | Ecosia forest 600 (kept) | CTA hover, secondary headings |
| `--brand-darkest` | `#18362b` | Ecosia forest deep (kept) | Footer bg, dark feature bands, deep accents |
| `--brand-mid` | `#275243` | Ecosia forest 700 (kept) | Section headings on light bg |
| `--brand-soft` | `#aae7d7` | Ecosia mint highlight (kept) | Quote accents, chip backgrounds |
| `--brand-mist` | `#e2f7f1` | Ecosia mist (kept) | Pale section surfaces, hover states |
| `--accent-sage` | `#bacc80` | Ecosia sage (kept) | Secondary tag accent |
| `--accent-terra` | `#ca8461` | Ecosia terracotta (kept) | Donation / give accent (warmth) |
| `--ink` | `#0f0f0f` | Ecosia near-black | Display headings on light |
| `--ink-soft` | `#1b1f23` | Extracted | Body type |
| `--ink-muted` | `#363737` | Extracted | Secondary body |
| `--ink-quiet` | `#6c6c6c` | Extracted | Captions, eyebrow on light |
| `--bg` | `#FFFFFF` | **NEW for light mode** | Page chassis (was `#18362b` on Ecosia) |
| `--surface` | `#FAFAF7` | **NEW for light mode** | Subtle cream alternate surface |
| `--surface-2` | `#F4F4F0` | **NEW for light mode** | Slightly heavier cream band |
| `--border` | `#E8E8E3` | **NEW for light mode** | Hairline border |
| `--border-strong` | `#D7D7D2` | Extracted | Stronger separators |
| `--text-on-dark` | `#FFFFFF` | — | Type on dark feature blocks |
| `--text-on-dark-muted` | `rgba(255,255,255,0.7)` | — | Secondary on dark |

**Forbidden in light mode:** do not use `--brand-darkest` (`#18362b`) as a full page background. Reserve it for footer + occasional dark feature band. Body text never lives on a dark surface here.

## Typography

| Role | Ecosia original | Substitute used here | Why |
|------|-----------------|----------------------|-----|
| Display | **Surt** (Bold Foundry, paid) | **Bricolage Grotesque** (Google) | Surt is a chunky, friendly, slightly geometric grotesque with display-y proportions. Bricolage Grotesque is the closest free analog — same chunky weight, friendly humanist tilt, opsz axis for display-vs-text. Falls back to Manrope. |
| Body | **Inter** (Ecosia uses Inter system stack on blog) | **Inter** (Google) | Direct match. Already used by Ecosia. |
| Eyebrow / UI / labels | **Founders Grotesk** (Klim, paid) on legacy blog | **Manrope** (Google) | Closest free workhorse for tracked-uppercase labels. Geometric but humanist. |
| Numerals / data | tabular Inter | tabular Inter | Built into Inter via `font-variant-numeric: tabular-nums` |

### Type ramp

- Hero display: 96–144px Bricolage Grotesque 800, opsz 96, line-height 0.92, letter-spacing -0.025em
- H1: 56–84px Bricolage Grotesque 700, line-height 1.0
- H2: 36–56px Bricolage Grotesque 700, line-height 1.05
- H3: 22–28px Bricolage Grotesque 600
- Eyebrow: 12px Manrope 700, uppercase, letter-spacing 0.18em, color `--brand`
- Body: 17–19px Inter 400, line-height 1.6
- Lede: 19–22px Inter 400, line-height 1.5, color `--ink-muted`
- Caption / metadata: 13–14px Inter 500
- Stat / big number: 64–96px Bricolage Grotesque 800, color `--brand`

## Components

### Buttons

Primary (lifted from Ecosia's button language — pill, generous padding, friendly):
```css
border-radius: 999px;          /* fully pill */
padding: 16px 28px;
background: var(--brand);
color: #fff;
font: 700 14px Manrope, sans-serif;
letter-spacing: 0.04em;
border: 2px solid var(--brand);
transition: background 180ms ease, border-color 180ms ease;
```
Hover: `background: var(--brand-deep)`.

Secondary: same pill, transparent bg, `border: 2px solid var(--brand)`, color `--brand`.

Tertiary (text + arrow): no border, color `--brand`, arrow `→` translates 4px right on hover.

Dark-band button: `background: #fff`, `color: var(--brand-darkest)`, hover swap to `--brand-soft` mint.

### Cards

Soft, generous, no heavy borders. `border-radius: 16px`, `border: 1px solid var(--border)`, `background: #fff`. Hover: subtle lift `translateY(-4px)` + soft green shadow.

### Pill chip / tag

Generous pill, `padding: 6px 14px`, `border-radius: 999px`, `background: var(--brand-mist)`, `color: var(--brand-deep)`, font: 11px Manrope 700, uppercase, letter-spacing 0.14em.

Variants: `.chip.terra` swap to terracotta tints; `.chip.sage` swap to sage tints.

### Navigation

Minimal. Wordmark left, links + primary pill CTA right. Transparent over hero photos, solid white once scrolled. Underline on hover is a thin `--brand` 2px bar that animates from left.

### Stat block (signature)

Big chunky number in `--brand`, then a small uppercase Manrope label, then a 1-2 sentence supporting line. Used to declare impact (e.g. "250M trees planted").

### Photo treatment

- **Uncropped, full-bleed** wherever possible. Photos are content, not garnish.
- **Rounded corners** `border-radius: 16px` on contained blocks; full-bleed sections have no radius.
- **No filters, no overlays** by default. Editorial color is the brand.
- Dark scrim `linear-gradient(180deg, rgba(15,15,15,0) 30%, rgba(15,15,15,0.7) 100%)` only when type sits on top of a photo.

### Vertical / horizontal divider

A 1px `--border-strong` rule with generous padding above & below — lets sections breathe instead of hard-cutting. SBC's 220px vertical line is **not** Ecosia's signature; we use horizontal whitespace + the green pill chips as visual punctuation instead.

## Tone keywords
mission-forward · generous · chunky-friendly · planet-positive · editorial-real-world · green-led · action-oriented · radically-honest

## Forbidden / off-brand
- **Dark green as full page background** — that's Ecosia stock, not the light-mode adaptation. Reserve dark only for footer & one dark feature band per page.
- **Stock photography of generic "people smiling at laptops"** — Ecosia's edge is real fieldwork. Use the supplied 9 photos.
- **Heavy gradients** — Ecosia is photography-flat. No purple, no neon, no glassmorphism.
- **Inter or Helvetica for display** — kills the chunky Bricolage signature.
- **Square buttons / sharp corners** on CTAs — Ecosia is uniformly pill-shaped.
- **Emoji as icons** — use real iconography or none.
- **More than one warm accent per section** — terracotta is for one moment, not a theme.
- **AI slop**: glass cards, gradient mesh backgrounds, robot icons, "1000+ happy customers" stat strips with no source.

---

## Section Patterns

This design system implements the canonical section catalog at `../SECTION-PATTERNS.md`. Every pattern in that catalog renders here in this DS's visual language.

**Where to see them rendered:**
- `homepage.html` — `hero-photo-led`, `intro-statement`, `service-times`, `ministries-grid`, `events-list`, `cta-band`, `closing-block`, `footer`
- `landing-1-im-new.html` — `hero-centered`, `intro-statement`, `service-times`, `staff-profile`, `cta-band`, `footer`
- `landing-2-series.html` — `hero-photo-led`, `intro-statement`, `events-list`, `cta-band`, `footer`
- `landing-3-give.html` — `hero-centered`, `intro-statement`, `ways-to-give`, `closing-block`, `footer`
- `design-system.html` — kitchen-sink reference of all type/color/component primitives

When sprinkling a prospect, the pipeline reads `SECTION-PATTERNS.md` for the field contract, fills the prospect's data, and this DS's CSS handles the visual treatment. To extend with a DS-specific signature section, add it below.

### Signature patterns (Ecosia-light-only)

These extend the canonical catalog with patterns unique to Ecosia-light's mission-forward language. The sprinkle pipeline can call them like any other pattern; only this DS implements them.

#### `impact-stats`
- **Purpose:** Big chunky number in `--brand` green + small uppercase Manrope label + 1–2 sentence supporting line. Ecosia's signature "trees planted" treatment, retooled for any mission impact metric.
- **When to use:** Homepage secondary, dedicated impact page, give page (showing where dollars went), about page (org-at-a-glance).
- **CSS hook:** `.sig-impact-stats`
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | no | Optional section heading |
| `items` | `array of {number, label, support}` | yes | 1 = hero stat, 2–4 = grid. `number` rendered Bricolage 80–120px, `label` uppercase Manrope tracked, `support` body Inter |

#### `action-steps`
- **Purpose:** Numbered steps with green pill markers — Ecosia's mission-forward "here's how to take action" pattern.
- **When to use:** Get-involved landing, volunteer signup flow, give page intro, what-to-expect for new visitors.
- **CSS hook:** `.sig-action-steps`
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | yes | |
| `intro` | string | no | |
| `items` | `array of {step_label, title, desc, cta?}` | yes | 3–5 typical. `step_label` is "01" / "02" — not raw integer |

#### `caption-pill-photo`
- **Purpose:** Editorial photo with a green pill caption overlay (Ecosia's blog signature).
- **When to use:** Anywhere a single photo + 1-line context is the right unit (homepage chapter breaks, about page mid-sections, story illustrations).
- **CSS hook:** `.sig-caption-pill-photo`
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `image` | `{src, alt}` | yes | |
| `caption` | string | yes | Short — 5–10 words. Rendered as green pill overlaid bottom-left of photo |
| `attribution` | string | no | Photographer credit or location tag |