coderef

Ecosia

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…
DownloadRaw
Ecosia

Build with the Ecosia look.

Palette, type and components from this DESIGN.md, applied to a sample hero.

Palette

At a glance

Website
ecosia.org ↗
Theme
light
Typefaces
System
Sections
11
Length
924 words

Add it to your project

Then prompt your agent

Design System · Ecosia

Light and dark previews, tokens and a ready-to-use package, generated from this DESIGN.md. No AI involved: the same file always produces the same output.

Generating design system…

DESIGN.md

DownloadRaw
Design tokens (YAML front matter)
name: Ecosia
colors:
  brand-primary: '#333333'
  brand-secondary: '#275243'
  featured: '#d7eb80'
  featured-hover: '#bbcf65'
  featured-active: '#a1b353'
  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'
  focus: '#0094c7'
  success: '#008009'
  leaf-dark: '#005304'
  error: '#b90a32'
  results-link: '#1a0dab'
  results-visited: '#681da8'
typography:
  display:
    fontSize: 48px
    fontWeight: 700
    use: hero heading
  body:
    fontSize: 16px
    fontWeight: 400
    use: buttons and body
rounded:
  pill: 9999px
components:
  button-featured:
    type: button
    backgroundColor: '#d7eb80'
    textColor: '#333333'
    border: '#d7eb80'
    rounded: 9999px
    height: 40px
    padding: 0 15px
    typography: 16px / 400
    hover: '#bbcf65'
    pressed: '#a1b353'
    focus: 'outline 2px solid #0094c7'
    use: Download Ecosia Browser — the featured lime pill (--color-button-background-featured-*); a 2px blue focus outline.
  button-transparent:
    type: button
    backgroundColor: transparent
    textColor: '#333333'
    rounded: 9999px
    height: 40px
    padding: 0 15px
    typography: 16px / 400
    hover: rgba(51,51,51,0.16)
    pressed: rgba(51,51,51,0.24)
    focus: 'outline 2px solid #0094c7'
    use: AI tools — a transparent pill tinting 16% on hover and 24% when pressed.
omitted:
  - section: spacing
    reason: No verified values in current evidence.
fonts:
  roles:
    display: Founders Grotesk
    sans: Inter

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.

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.

More like Ecosia

All brands designs →

Brand names describe the visual style only; coderef is not affiliated with or endorsed by any brand listed. Licenses