Ecosia DESIGN.md

Design System Inspiration of Ecosia

Overview

Visual Theme & Atmosphere

Ecosia is a search engine and browser that puts "100% of profits for the planet": "We use all our profits for climate action, with the majority going into tree-planting projects around the world." Its homepage counts over 256 million trees planted, 20 million people using Ecosia, 900+ native species and 70+ active projects, and publishes financial reports every month. It is a certified B Corporation; its imprint names Ecosia GmbH, Gerichtstrasse 23, 13347 Berlin, Germany.

The site is calm and earthy: charcoal #333333 as the brand primary and text colour, a deep forest green #275243 as the secondary brand colour, a fresh lime #d7eb80 for featured actions, warm off-whites #f8f8f6 and #f0f0eb, and Founders Grotesk headlines over Inter.

What makes it worth reading:

• Button families in three states. --color-button-background-{primary, secondary, featured, negative, transparent, glass-static} each with -hover and -active.
• Search-result conventions kept. --color-link-results-default #1a0dab and -visited #681da8 — the classic search-link blue and visited purple — sit beside the brand palette.
• Glass buttons for video. --color-button-background-glass-static rgba(26,26,26,.32) → .5 → .64, with translucent white borders, for controls over imagery.

Primary tasks

• Search; download the Ecosia browser.
• See trees planted and monthly financial reports.

Brand Narrative

A Berlin search company that spends its profits on trees and publishes the numbers every month. The interface is quiet — charcoal, forest green, off-white — with a single lime for the action that matters.

Principles

• 100% of profits for the planet.
• Total transparency, every month.
• Private by default.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured with getComputedStyle on ecosia.org: 81 root custom properties, all --color-*, first-party.

Brand

• Brand primary (#333333) — --color-brand-primary, primary buttons and text.
• Brand secondary (#275243) — forest green surfaces and text.
• Featured (#d7eb80) → hover (#bbcf65) → active (#a1b353).

Neutrals

• Primary hover (#4c4c4c) · Primary active (#6c6c6c).
• Secondary hover (#deded9) · Secondary active (#bebeb9).
• Foreground (#333333) · Text secondary (#6c6c6c) · Ink static (#1a1a1a).
• Canvas (#ffffff) · Background secondary (#f8f8f6) · Background quaternary (#f0f0eb).

Signals and links

Focus #0094c7 · Success #008009 (leaf dark #005304) · Error #b90a32 · Results link #1a0dab · Results visited #681da8.

Typography

Font family

Founders Grotesk (600) for display headings and Inter (400–700) for text; both load (document.fonts).

Scale

H1 48px/700 Founders Grotesk; section labels 14px/700 uppercase Inter; body and buttons 16px/400.

Layout

• A video hero with a search box and counters, then value blocks, a monthly finance panel and a tree-planting section on warm off-white.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

--color-elevation-layer-1 rgba(26,26,26,.18) and -layer-2 .06 build two-layer shadows.

Motion & Easing

Not measured.

---

Tier 1 sources: https://www.ecosia.org/ (live homepage — 81 root custom properties read via getComputedStyle; Founders Grotesk and Inter loaded; two components measured at rest, hover, pressed and focus; homepage figures and "100% of profits for the planet", captured 2026-09-26); https://www.ecosia.org/zz-this-does-not-exist (nonsense-path control — HTTP 404 in the browser, read 2026-09-26); https://www.ecosia.org/imprint (imprint — Ecosia GmbH, Gerichtstrasse 23, 13347 Berlin, HRB 170873, read 2026-09-26)

Components

Measured with focus under a real Tab key and a hover counted only when :hover matched. The consent banner was never answered (the probe hid it).

• Featured pill — Download Ecosia Browser: #d7eb80, #333333 text, full pill, 40px. Hover #bbcf65, press #a1b353; focus a 2px #0094c7 outline.
• Transparent pill — AI tools: transparent → rgba(51,51,51,0.16) → 0.24; same focus.

Radius

Full pills (9999px).

States

Hover: lime darkens to #bbcf65; transparent pills tint 16%. Press: #a1b353; 24%. Focus: a 2px #0094c7 outline.

Do's and Don'ts

Do

• Use charcoal #333333 as the brand primary and the forest green #275243 as the secondary.
• Save lime #d7eb80 for featured actions, darkening to #bbcf65 and #a1b353.
• Keep search results in the conventional #1a0dab / #681da8.

Don't

• Don't use lime for body text or backgrounds at large scale.
• Don't use pure white everywhere; secondary grounds are warm off-white.
• Don't square off buttons.

Voice & Tone

Direct and purposeful — "Search with a purpose". Not assessed further.

Agent Prompt Guide

Quick Color Reference

#333333 charcoal · #275243 forest · #d7eb80 lime · #bbcf65 lime hover · #f8f8f6 off-white · #6c6c6c secondary · #0094c7 focus · #008009 success

Example Component Prompts

• "A 40px lime #d7eb80 pill with #333333 text; hover #bbcf65, press #a1b353; focus a 2px #0094c7 outline."
• "A 48px Founders Grotesk headline in white over a video, with glass buttons at 32% black."

Governance

Known Gaps

• Contrast, button-transparent. Text #333333 on #00000000 measures 1.66:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.