ecosia.org website design: fonts, colors and UI patterns

Overview

Ecosia's visual system is built around a dark canvas that makes vibrant green and yellow accents feel luminous and urgent. The design communicates climate action through bold, confident typography and organic illustration language. The homepage structure moves visitors from an emotional hero invitation through transparent financial reporting, value propositions, global impact visualization, and finally to specific project stories. Every section maintains the same dark foundation while using color strategically to guide attention and signal meaning. The overall impression is of a modern, trustworthy organization that treats environmental work with the visual seriousness of a technology product.

The system relies on two font families with clear role separation: a condensed sans-serif for display and statistics, and a neutral grotesque for everything else. Rounded pill buttons and soft organic shapes in illustrations counterbalance the stark dark backgrounds, creating warmth without sacrificing clarity. Photography appears sparingly and is always framed by bold color blocks or wavy transitions that maintain the illustrative, approachable character.

Colors

The palette is intentionally constrained, using darkness as a unifying field and reserving saturation for moments of action and emphasis. The green action color carries the brand's tree-planting mission, while yellow accents signal transparency and financial openness.

The dark canvas dominates every section, creating visual continuity from hero to footer. Action green appears most prominently in the primary call-to-action button, where its brightness against the dark background creates strong affordance. Accent yellow serves a narrative role: it marks financial transparency sections and appears as the background for project location cards, associating warmth with specific places and outcomes. White ink is reserved for primary content, while muted ink handles supporting information in footers and descriptions. Borders are deliberately subtle, appearing as hairlines that separate without competing.

Typography

The type system pairs a distinctive condensed display face with a highly legible body face. Founders Grotesk Condensed provides personality and impact at large sizes, while Inter ensures readability across all functional text.

Founders Grotesk Condensed is designed by Kris Sowersby of Klim Type Foundry. Inter is designed by Rasmus Andersson. Verify licensing for these families before production use.

The display face is used exclusively at large sizes where its tight proportions and semibold weight create confident, poster-like impact. Tracking remains tight but not compressed, preserving clarity. Inter handles all functional text with its open apertures and balanced x-height, ensuring comfortable reading even at small sizes. Labels use uppercase transformation with positive tracking to create rhythmic, scannable category markers.

Layout

The page follows a centered, contained layout with generous vertical breathing room between sections. Content typically lives within a max-width container that prevents line lengths from exceeding comfortable reading measure.

Section spacing uses 6rem between major content blocks, creating clear rhythmic separation without excessive whitespace. Within sections, content gaps of 1.5rem organize related elements. The hero section centers its content vertically and horizontally, using the full viewport height to establish presence. Below the hero, content sections alternate between single-column centered layouts for statements and statistics, and two-column grids for value propositions with paired illustrations.

The financial report section demonstrates an asymmetric two-column composition: explanatory text and a button occupy the left, while a large statistic card floats right with internal centering. The "What we stand for" section uses a strict two-by-two grid, with each cell pairing a circular illustration with a bold heading and supporting paragraph. The global impact map breaks the container, using full-width dark space for the world visualization, with statistics anchored in a four-column row below.

Footer layout spans the full width with a multi-column link structure: certification mark and notice on the left, categorized link columns in the center, and app store badges on the right. Social icons and legal copy occupy a centered bottom band separated by a thin border.

Visual language

Illustration and photography follow distinct but complementary approaches. Custom illustrations use flat, organic shapes with rounded, almost blob-like tree and plant forms in varied colors against the dark background. The world map visualization uses simplified continent silhouettes in muted green, with playful tree icons marking project locations in accent colors. These illustrations feel hand-crafted and approachable, avoiding the clinical precision of stock imagery.

Photography appears in project cards with a distinctive treatment: images occupy the top portion with a wavy, organic bottom edge that transitions into a solid yellow block. This wave motif echoes the rounded, natural forms of the illustrations and prevents the photography from feeling disconnected from the overall illustrative system.

Iconography in the footer uses simple circular containers for social platforms, maintaining the rounded language at small scale. App store badges follow platform conventions but sit within the dark footer as recognizable trust signals.

The overall visual character balances urgency with optimism: dark backgrounds convey seriousness about climate challenges, while bright accents, organic shapes, and warm photography convey hope and actionable progress.

Components

Primary action button

The main call-to-action appears as a pill-shaped button with bright green background and dark text. It includes a small leading icon and uses sentence-case label text. The pill radius creates a friendly, approachable shape that contrasts with the angular precision often found in technology interfaces.

• Anatomy: Icon + text label, horizontally centered
• Surface: action background with action-text color
• Typography: label token, uppercase, with positive tracking
• Shape: full pill border radius
• Spacing: generous horizontal padding creating substantial click target
• Composition: Centered within hero, often stacked above secondary text link

Secondary action button

Used for alternative paths, this button uses a transparent background with a subtle border. It appears in the project card section and financial report area.

• Anatomy: Text label only
• Surface: transparent with border color outline
• Typography: label token
• Shape: full pill border radius
• Spacing: same padding as primary for visual consistency

Statistic card

A contained block for large numbers with supporting context, seen in the financial report section.

• Anatomy: Large figure above smaller descriptive label
• Surface: surface background with card radius
• Typography: statistic-display for the number, body for the label
• Shape: rounded card corners
• Spacing: internal padding creating breathing room around figures
• Composition: Centered content, often placed asymmetrically in section layouts

Value proposition cell

A paired layout of illustration and text used in the "What we stand for" grid.

• Anatomy: Circular illustration left, heading and paragraph right
• Surface: transparent on canvas background
• Typography: section-display for heading, body for description
• Spacing: gap between illustration and text, consistent with grid gutters
• Composition: Horizontal arrangement within each grid cell, four cells in two-by-two formation

Project location card

A vertical card combining photography, color block, and action.

• Anatomy: Photograph with wavy bottom edge, yellow content area with heading, paragraph, and outlined button
• Surface: accent-yellow background for content area
• Typography: section-display for location name, body for description
• Shape: card radius on outer corners, organic wave transition between image and color
• Spacing: internal padding in yellow area
• Composition: Vertical stack, full card width within grid

Footer

The page's closing structure with multiple functional zones.

• Anatomy: Certification column, link category columns, apps column, social row, legal row
• Surface: canvas background with border top separator
• Typography: label for category headings, navigation for links, legal-copy for disclaimers
• Spacing: generous vertical padding, columnar horizontal distribution
• Composition: Multi-column on desktop, stacked on narrow viewports

Responsive behavior

The design should maintain its dark-first character across all viewport sizes. The hero headline, set in the condensed display face, will need careful scaling to preserve impact without causing overflow. Consider reducing hero-display from 4rem to 2.5rem on narrow viewports while maintaining the tight leading.

The two-column grids for value propositions and financial reporting should collapse to single column on smaller screens, with illustrations stacking above text rather than beside. The four-column statistics row below the world map should become a two-by-two grid, then stack vertically on the narrowest screens.

The footer multi-column layout should progressively collapse: first to two-column, then to a single stacked column with full-width link groups. App store badges should remain visible and tappable at minimum 44px height.

The world map visualization should scale to fit viewport width while maintaining relative positioning of tree markers. Consider simplifying or hiding decorative tree icons on very small screens to prevent visual clutter.

Practical implementation guidance

### Preserve - The dark canvas as the dominant background; light sections should be rare and intentional - The tight, confident display typography for headlines and statistics - The organic, rounded illustration language with flat color treatment - The pill button shape for all primary and secondary actions - The yellow accent for financial transparency and project warmth - The wavy image-to-color transitions in project cards

### Avoid - Adding light backgrounds that would dilute the dark-field impact - Using the condensed display face at small sizes where readability suffers - Introducing sharp corners or angular shapes that conflict with the rounded language - Over-saturating with accent colors; green and yellow should remain special - Generic stock photography without the distinctive wave treatment

### Recommended build order 1. Establish the dark canvas and surface color tokens 2. Implement the type scale with both font families at their designated roles 3. Build the hero section with centered layout and primary action button 4. Create the pill button component with primary and secondary variants 5. Implement the two-column grid system for value propositions 6. Build the statistic card for financial and impact numbers 7. Create the project card with wavy image transition 8. Assemble the footer with multi-column link structure

### Accessibility - Ensure the green action color meets contrast requirements against the dark canvas; the bright #7ee787 should achieve at least 3:1 for large text and 4.5:1 for body text - Provide focus indicators that are visible against dark backgrounds, consider using the accent yellow or a light outline - Maintain touch targets at minimum 44px for all interactive elements, particularly the pill buttons and footer links - Use semantic heading hierarchy with the visual display sizes; do not skip levels for stylistic reasons - Ensure the world map visualization has text alternatives for the statistics presented visually

Scope note

This guide covers the Ecosia homepage including hero, financial transparency, value propositions, global impact visualization, project cards, and footer. Interior pages, search results, browser extension interfaces, and mobile-specific layouts are not represented. Motion, loading states, and form interactions are not documented. Measurements are practical adaptation targets derived from visual inspection of the supplied desktop viewport captures.

More website design guides

Browse website design guides by pattern and website.