Introduction

BDS site version: V.2026.04.18  · @eri/components package version: v2.10.0

WHO IS IT FOR?

TWO PATHS THROUGH THE BDS

Brand Proposition

Visual Identity

Our colour system is built around the Five Pillars framework. Each pillar has a dedicated colour that creates instant recognition and helps users navigate complex climate information.

Brand Colours

Core brand colours for UI elements, text, and backgrounds. These provide the foundation for all interfaces.

Pillar Colours

These colours represent the five dimensions of organisational climate impact. Use them consistently to reinforce the framework structure.

Dark Image Hero — Standard

The standard hero pattern for all ERI web applications and marketing sites. A full-bleed background image is overlaid with a semi-transparent #232323 at 80–85% opacity. Text is always left-aligned, with the left edge aligned with the ERI logotype in the header (same container padding). The eyebrow label, H1, body text, and CTA buttons occupy the left half only — the right half is reserved for the image composition. H1 accent word uses Accent Lime #93E07D — never Primary Green on dark backgrounds.

Logo Usage

Three logo assets are available. Each card shows the asset on both a light and dark background so you can verify contrast before use. Each card includes a file identifier and a direct download button. Always respect minimum sizes and clear-space rules to maintain legibility and brand integrity.

Light background

Dark background

Full Colour Wordmark

eri-logo-full-color_64e5c7dberi-logo-full-color_775a0122

DownloadSVG

Min Width160px

Clear SpaceEqual to the height of the 'E' letterform on all four sides.

When to useDefault choice. Use whenever background is white or light grey. Use the inverted (white) version on dark backgrounds.

Primary logo for all light-background contexts: website headers, footers, documents, presentations. On dark backgrounds, apply CSS filter: brightness(0) invert(1) to render the logo in white.

filter: brightness(0) invert(1)

Light background

Dark background

ERI Icon Mark

eri-icon-mark_6c872e6b

Download

Min Width32px

Clear Space4px on all sides minimum.

When to useWhen a compact ERI identifier is needed without the full wordmark.

Compact ERI mark for use in navigation menus, compact UI elements, and alongside pillar icons. The mark uses original green and black colours — do not recolour.

Light background

White bg — visible on dark

Favicon — White Rounded (Canonical)

favicon-white-rounded-32_05ba5ceb

Download

Min Width32px

Clear SpaceN/A — favicon is always displayed at system-determined size.

When to useAlways. This is the only approved favicon format for Manus-hosted ERI projects. Do not use .ico.

The canonical browser tab favicon for all ERI Manus-hosted projects. White background with 12% corner radius. Use the CDN URL directly in client/index.html — do not copy to client/public/. See the Favicon Implementation card below for the exact head code.

Available Sizes

32px (browser tab)Use CDN URL directly — do not copy to /public/

favicon-white-rounded-32_05ba5ceb

Download

180px (Apple Touch)Apple Touch Icon

favicon-white-rounded-180_2daaa7d4

Download

192px (Android/PWA)PWA manifest

favicon-white-rounded-192_54fb4338

Download

<!-- ERI Favicon — white rounded PNG (32px, white bg, 12% corner radius) -->
<!-- PNG only — Manus hosting does not serve .ico correctly -->
<link rel="icon" type="image/png" sizes="32x32"
  href="https://d2xsxph8kpxj0f.cloudfront.net/310519663319595517/5mtZtU66sMbsnmPoVbf6UJ/favicon-white-rounded-32_05ba5ceb.png" />
<link rel="apple-touch-icon" sizes="180x180"
  href="https://d2xsxph8kpxj0f.cloudfront.net/310519663319595517/5mtZtU66sMbsnmPoVbf6UJ/favicon-white-rounded-180_2daaa7d4.png" />
<link rel="icon" type="image/png" sizes="192x192"
  href="https://d2xsxph8kpxj0f.cloudfront.net/310519663319595517/5mtZtU66sMbsnmPoVbf6UJ/favicon-white-rounded-192_54fb4338.png" />

Typography

ERI uses a two-font system. Archivo is the heading and display typeface — used at weight 700–800 for all H1–H3 and marketing hero text. Open Sans is the body typeface — used for all paragraph text, UI labels, navigation, and captions. Both are loaded via Google Fonts CDN. The web applications map font-sans to Archivo for consistency with the design system.

Type Scale Specimen

Each row shows the rendered text, the exact Tailwind classes used on live pages, and the intended context.

Verbal Identity

How we communicate is as important as what we communicate. Our voice reflects our values and builds trust with our audience.

Tone of Voice

Writing Principles

Preferred Terminology

Language

ERI is a Swedish-founded initiative operating globally, but headquartered and primarily published in a European context. British English is the standard for all external communications, publications, and digital products.

Spelling Rules

Punctuation & Formatting

Common Pitfalls

Photography

ERI photography is documentary and systemic — it shows the infrastructure, industries, and cities that need to transform, not aspirational outcomes. These principles are derived from the Exponential Roadmap 1.5.1 report and apply across all ERI publications and digital products.

Composition Principles

Aerial / Overhead

Chapter openers, hero images, high-impact moments

Communicates scale, systemic thinking, and the roadmap metaphor. Looking down at the terrain signals strategic perspective. Used for the most important moments in a publication.

Wide Establishing Shot

Section dividers, context-setting imagery

Shows the full context of a system or place, not a detail. Provides orientation and communicates the scope of the challenge or opportunity being discussed.

Human-Scale Detail

Case studies, inline illustrations, pull quotes

Shows people interacting with technology or infrastructure. Engineers, workers, and citizens ground the systemic narrative in human experience and make abstract change tangible.

Curated Photo Library

29 curated images across all five pillars and brand. Each image has a stable reference ID (e.g. ERI-OPS-001) that can be used in Manus AI task prompts or shared with colleagues. Filter by pillar, copy the reference ID, or download directly.

Using photos in Manus AI tasks

Reference any photo by its ID in a task prompt, e.g.: "Use photo ERI-OPS-001 from the ERI Brand Design System photography library." The AI will use the correct Unsplash URL for that image. All images follow ERI photography principles: documentary, systemic, full colour, no filters.

All (29)BrandP1 – OperationsP2 – Value ChainP3 – SolutionsP4 – FinanceP5 – Policy

Aerial / Overhead

Download

ERI-BRD-001

Mountain valley aerial — systemic landscape

Photo: Sergei Akulich / Unsplash

landscapeaerialnature

View on Unsplash

Aerial / Overhead

Download

ERI-BRD-002

Foggy forest aerial — natural systems at scale

Photo: Lukasz Szmigiel / Unsplash

forestaerialfog

View on Unsplash

Wide Establishing

Download

ERI-BRD-003

City skyline at dusk — urban infrastructure

Photo: Pedro Lastra / Unsplash

cityskylineurban

View on Unsplash

Aerial / Overhead

Download

ERI-BRD-004

Highway interchange aerial — systemic infrastructure

Photo: Denys Nevozhai / Unsplash

highwayinfrastructureaerial

View on Unsplash

Wide Establishing

Download

ERI-OPS-001

Solar panels on factory roof — operational renewables

Photo: American Public Power Association / Unsplash

solarfactoryrenewable

View on Unsplash

Wide Establishing

Download

ERI-OPS-002

Wind turbines in field — clean energy at scale

Photo: Nicholas Doherty / Unsplash

windturbinesenergy

View on Unsplash

Human-Scale Detail

Download

ERI-OPS-003

Engineer in data centre — operational efficiency

Photo: ThisisEngineering / Unsplash

data centreengineerefficiency

View on Unsplash

Aerial / Overhead

Download

ERI-OPS-004

Solar farm aerial — large-scale renewable deployment

Photo: Zbynek Burival / Unsplash

solar farmaerialrenewable

View on Unsplash

Human-Scale Detail

Download

ERI-OPS-005

EV charging station — transport electrification

Photo: Chuttersnap / Unsplash

electric vehiclechargingtransport

View on Unsplash

Aerial / Overhead

Download

ERI-VAL-001

Container port aerial — global supply chain

Photo: Chuttersnap / Unsplash

portshippingsupply chain

View on Unsplash

Human-Scale Detail

Download

ERI-VAL-002

Warehouse workers — supply chain operations

Photo: Ruchindra Gunasekara / Unsplash

warehouseworkerslogistics

View on Unsplash

Wide Establishing

Download

ERI-VAL-003

Cargo ship at sea — maritime freight

Photo: Ian Taylor / Unsplash

shipmaritimefreight

View on Unsplash

Aerial / Overhead

Download

ERI-VAL-004

Motorway aerial with HGVs — road freight

Photo: Denys Nevozhai / Unsplash

motorwaytrucksfreight

View on Unsplash

Human-Scale Detail

Download

ERI-VAL-005

Factory meeting — supplier engagement

Photo: Ant Rozetsky / Unsplash

suppliermeetingfactory

View on Unsplash

Wide Establishing

Download

ERI-SOL-001

Offshore wind farm — scaling clean energy

Photo: Nicholas Doherty / Unsplash

offshore windenergysolutions

View on Unsplash

Human-Scale Detail

Download

ERI-SOL-002

Engineers on green tech prototype — innovation

Photo: Science in HD / Unsplash

engineersinnovationtechnology

View on Unsplash

Wide Establishing

Download

ERI-SOL-003

Green office building — sustainable built environment

Photo: Nastuh Abootalebi / Unsplash

buildinggreensustainable

View on Unsplash

Human-Scale Detail

Download

ERI-SOL-004

Circuit board — digital technology solutions

Photo: Alexandre Debiève / Unsplash

technologydigitalcircuit

View on Unsplash

Aerial / Overhead

Download

ERI-SOL-005

Large solar installation aerial — scaling renewables

Photo: Zbynek Burival / Unsplash

solaraerialscale

View on Unsplash

Aerial / Overhead

Download

ERI-FIN-001

Financial district aerial — capital markets

Photo: Maxim Hopman / Unsplash

financeinvestmentcapital

View on Unsplash

Human-Scale Detail

Download

ERI-FIN-002

Business meeting with financial data — investment decisions

Photo: Scott Graham / Unsplash

meetingfinancedata

View on Unsplash

Human-Scale Detail

Download

ERI-FIN-003

Financial documents — sustainable finance and green bonds

Photo: Markus Winkler / Unsplash

green bondssustainable financedocuments

View on Unsplash

Aerial / Overhead

Download

ERI-FIN-004

City financial district at night — capital concentration

Photo: Maxim Hopman / Unsplash

citynightfinancial

View on Unsplash

Human-Scale Detail

Download

ERI-FIN-005

ESG data analyst — climate finance and reporting

Photo: Maxim Hopman / Unsplash

ESGdataanalyst

View on Unsplash

Wide Establishing

Download

ERI-POL-001

UN General Assembly — international policy and governance

Photo: Mathias Reding / Unsplash

UNpolicygovernance

View on Unsplash

Wide Establishing

Download

ERI-POL-002

Climate conference — policy dialogue

Photo: Pedro Lastra / Unsplash

conferenceclimatepolicy

View on Unsplash

Wide Establishing

Download

ERI-POL-003

Government building — policy and regulatory frameworks

Photo: René DeAnda / Unsplash

governmentpolicyregulation

View on Unsplash

Human-Scale Detail

Download

ERI-POL-004

Panel discussion — narrative and business advocacy

Photo: Campaign Creators / Unsplash

paneldiscussionadvocacy

View on Unsplash

Human-Scale Detail

Download

ERI-POL-005

Roundtable meeting — multi-stakeholder engagement

Photo: Headway / Unsplash

roundtablemeetingstakeholders

View on Unsplash

29 images shown

Brand Graphics & Illustrations

Designed visual assets that represent ERI concepts and are approved for use across web applications, reports, presentations, and social media. These are distinct from photography — they are purpose-built illustrations and graphic compositions that carry specific conceptual meaning.

Human-AI Lab Hero — Hands Touching (Primary)

The primary hero background for the Human-AI Lab and any human + AI collaboration narrative. Two translucent wireframe hands reach toward each other across the S-curve crossing point, fingertips meeting in a golden burst of light — a Michelangelo-inspired composition set against a deep teal grid. The crossing point of the S-curves is the visual focal point: the moment of connection between human and AI.

EXPONENTIAL ROADMAP INITIATIVE — EXAMPLE

Exponential
Human-AI Lab

One place for everything ERI builds at the intersection of human expertise and AI.

Explore the Application Suite →

Asset Details

File name	hal-hero-human-v2-hands.png
Dimensions	1456 × 816 px
Format	PNG
Aspect ratio	16:9
Colours	Amber curve · Accent Lime curve · Dark teal grid · Wireframe hands
CDN token	heroImages.halHandsTouching

Download PNG (1456 × 816)

Usage Rules

• ✓Always use full-bleed — the image must fill the entire hero section width.
• ✓Always apply a #232323 overlay at 80–85% opacity over the image before placing text.
• ✓Use white Archivo for the main heading; Accent Lime #93E07D for the accent word.
• ✗Do not crop, rotate, or alter the image in any way.
• ✗Do not use on light backgrounds without the dark overlay.
• ✗Do not use as a decorative element in body content — hero sections only.

Conceptual Meaning

The two S-curves crossing represent the central ERI insight: legacy fossil-fuel systems are on a declining S-curve while clean-technology systems are on a rising S-curve. The crossing point is the transition moment — the moment of connection between human and AI. The amber curve represents the old economy; the lime curve represents the new. The wireframe hands reaching toward each other evoke the Michelangelo “Creation of Adam” — a universal symbol of the spark of intelligence passing between two entities. This image should only be used in contexts where this meaning is relevant — it is not a generic technology background.

Alternate Versions

Three alternate hero compositions share the same S-curve structure and are documented in full in the Surface Modes section.

Alternate

Human Network →

Alternate

Reaching Duo →

Minimal

Dual S-Curve →

Testimonials & Pull-Quotes

Testimonials appear on ERI web applications and in reports to convey third-party credibility. The layout pairs a rounded-rectangle portrait with a left-aligned block-quote and a bold attribution line. Heading copy uses the standard ERI accent-word treatment: one or two key words set in Primary Green on a light background.

Live Example

What others say about us

No company can achieve net zero alone. Accelerating decarbonisation requires collaboration and Exponential Roadmap Initiative has been a great partner and thought leader — helping us to think through our strategies and co-hosted Solutions House with Futerra at Climate Week NYC, facilitating great conversations around climate solutions, the challenges of Scope 3, advanced clean energy technologies and more.

Kate Brandt, Chief Sustainability Officer, Google

Exponential Framework

All visual assets for the Exponential Roadmap framework — pillar icons, framework diagrams, and pillar elements — are documented here. Always use the provided assets; never recreate or approximate them.

Pillar Icon Assets

Five WebP images represent the Exponential Framework pillars. They appear in the full-screen navigation overlay, pillar detail pages, and framework diagrams. Import from client/src/lib/pillarColors.ts for the canonical hex colours — never hard-code pillar colours inline.

Pillar 1

Cut Operational Emissions

pillar-1-icon.webp

#9aa08c

Pillar 2

Decarbonize Value Chain

pillar-2-icon.webp

#17b7dd

Pillar 3

Build & Scale Solutions

pillar-3-icon.webp

#00ac58

Pillar 4

Mobilize Finance & Investment

pillar-4-icon.webp

#ff8b00

Pillar 5

Shape Policy & Narrative

pillar-5-icon.webp

#ff5133

// Always import canonical colours from pillarColors.ts
import { pillarColors, pillarMeta } from "@/lib/pillarColors";
import { pillarBottomIcons } from "@/lib/assets";

// Render pillar icon with correct background tint
<div style={{ backgroundColor: pillarColors.pillar3 + "20" }}>
  <img src={pillarBottomIcons.pillar3} alt="Build & Scale Solutions" className="w-16 h-16" />
</div>

// Or iterate all five pillars
{pillarMeta.map((p) => (
  <img key={p.id} src={pillarBottomIcons[`pillar${p.id}`]} alt={p.name} />
))}

Framework Diagrams

v5 New

The Five Pillars radial diagram is the central visual identity of the Exponential Roadmap framework. Eight approved variants exist for different placement contexts. Always use the provided assets — never recreate the diagram.

Source: ERI Styleguide 1.0 — Framework (pp. 5–8) and Framework Integration (pp. 9–12).

Five Pillars Diagram — 8 Variants

BG

Background only (no logo/text)

framework-5pillars-bg.webp

BG + Logo

With ERI wordmark

framework-5pillars-bg-logo.webp

BG + Logo + Title

With wordmark and title text

framework-5pillars-bg-logo-title.webp

Extended

With action blocks around pillars

framework-5pillars-extended.webp

Transparent

No background — for dark slides

framework-5pillars-transparent.webp

Short Text (Transp)

Pillar names only, transparent

framework-5pillars-short-text.webp

Symbols (Transp)

Icons only, transparent

framework-5pillars-symbols-transparent.webp

Text (Transp)

Full text labels, transparent

framework-5pillars-text-transparent.webp

Placement Rules

Clear Space

Minimum clear space around the diagram equals x — one unit defined as the width of the “E” in EXPONENTIAL. Never crowd the diagram with other elements.

Background Combinations

Use the solid BG variant on white/light backgrounds. Use the Transparent variant on dark or coloured backgrounds. Never place the solid variant on a dark background.

Never Do

• • Do not distort, rotate, or recolour the diagram
• • Do not add extra elements inside the diagram
• • Do not use unofficial variants or recreations
• • Do not place the diagram on a clashing background colour

Supporting Diagrams

Four additional diagrams support the framework narrative. Use these in context — do not mix them with the Five Pillars radial diagram on the same slide.

Leadership A

Leadership categories diagram (variant A)

framework-leadership-a.webp

Leadership B

Leadership categories diagram (variant B)

framework-leadership-b.webp

Pillars Linear

Five pillars in horizontal linear layout

framework-pillars-linear.webp

Reducing / Enabling

Reducing vs. enabling emissions framework

framework-reducing-enabling.webp

Pillar Elements

v5 New

The pillar element is a vertical graphic unit that anchors each pillar in presentations, reports, and digital interfaces. It always appears on the left side of a slide or frame. Four variants exist — choose based on available space and content depth. All assets are available in solid (white background) and transparent versions.

Source: ERI Styleguide 1.0 — Framework Integration (pp. 13–18).

Long Pillar (Primary)

The primary integration element for company presentations. Placed on the left side of the frame. Use x (width of the "E" in EXPONENTIAL) as minimum clear space from pillar to frame edge.

Pillar 1pillar-1-long-solid.webp

Pillar 2pillar-2-long-solid.webp

Pillar 3pillar-3-long-solid.webp

Pillar 4pillar-4-long-solid.webp

Pillar 5pillar-5-long-solid.webp

Pillar 1pillar-1-long-transparent.webp

Pillar 2pillar-2-long-transparent.webp

Pillar 3pillar-3-long-transparent.webp

Pillar 4pillar-4-long-transparent.webp

Pillar 5pillar-5-long-transparent.webp

Regular Pillar

Scaled-down version for data slides where more horizontal space is needed. Can be placed over images. Use 3x as the distance from pillar to frame edge.

Pillar 1pillar-1-regular-solid.webp

Pillar 2pillar-2-regular-solid.webp

Pillar 3pillar-3-regular-solid.webp

Pillar 4pillar-4-regular-solid.webp

Pillar 5pillar-5-regular-solid.webp

Extended Pillar (with Action Blocks)

The most detailed variant — pillar extended downward with labelled Action Blocks (e.g. "Supplier Engagement"). The pillar icon appears at the bottom of the stack. Use 3x as the distance from pillar to frame edge.

Pillar 1pillar-1-extended-solid.webp

Pillar 2pillar-2-extended-solid.webp

Pillar 3pillar-3-extended-solid.webp

Pillar 4pillar-4-extended-solid.webp

Pillar 5pillar-5-extended-solid.webp

Action Block Specification

Background
Pillar colour

Text
White, Archivo Bold

Size
~8pt / 11px

Gap between blocks
1px white

Short Pillar (Symbol & Text variants)

Minimal variant — symbol only (icon mark) or text only (pillar number + name). Used where space is very limited or as a compact reference marker.

pillar-1-symbol-solid.webp

pillar-1-text-solid.webpPillar 1

pillar-2-symbol-solid.webp

pillar-2-text-solid.webpPillar 2

pillar-3-symbol-solid.webp

pillar-3-text-solid.webpPillar 3

pillar-4-symbol-solid.webp

pillar-4-text-solid.webpPillar 4

pillar-5-symbol-solid.webp

pillar-5-text-solid.webpPillar 5

Top row: Symbol variant. Bottom row: Text variant. Transparent versions also available.

✓ Correct Usage

• Always place on the left side of the slide or frame
• Maintain minimum clear space: x from pillar to frame edge (basic), 3x for alternate
• Use solid version on light backgrounds; transparent on dark
• Use Long Pillar as the default; scale down only when content requires it
• Keep pillar colours exactly as specified — never approximate

✗ Never Do

• Do not place the pillar on the right, centre, or bottom of the frame
• Do not distort, stretch, or rotate the pillar element
• Do not change pillar colours or mix pillar colours across elements
• Do not use the pillar element without the correct pillar number
• Do not use the Extended variant without all action blocks present

Charts & Data Visualisation

ERI data visualisation follows a consistent visual language across publications, the Crocodile Economy whitepaper, and digital products. The chart style is minimal, editorial, and high-contrast — designed for print and screen alike.

The Crocodile Economy Chart Style

The Crocodile Economy charts show the decoupling of emissions from economic growth over time. Two lines form the "crocodile jaw" — the upper line (GDP or revenue growth) diverges upward from the lower line (CO₂ emissions). The fill colour between the lines encodes the entity type: green for companies, salmon for nations/regions. This is a semantic encoding — not a stylistic choice.

Line Colours

Live Examples

Interactive recreations of the Crocodile Economy chart style using ERI brand colours.

Chart Typography

Member Company Logotypes

Official logotypes for ERI member companies. Use these assets when referencing member organisations in ERI publications, case studies, and digital products. Each logo has a stable CDN URL for use in Manus AI task prompts.

Note: All logos are the property of their respective companies and are provided here solely for use within authorised ERI communications.

AFRYEngineering

afryDownload

Alfa LavalIndustrial

alfaLavalDownload

AppleTechnology

appleDownload

Axel JohnsonInvestment

axelJohnsonDownload

BTTelecoms

btDownload

EricssonTechnology

ericssonDownload

GoogleTechnology

googleDownload

HandelsbankenFinance

handelsbankenDownload

Houdini SportswearApparel

houdiniSportswearDownload

IcebugApparel

icebugDownload

IKEARetail

ikeaDownload

Investor ABInvestment

investorAbDownload

Juan Valdez CaféFood & Beverage

juanValdezCafeDownload

Max BurgersFood & Beverage

maxBurgersDownload

NetflixMedia

netflixDownload

OatlyFood & Beverage

oatlyDownload

OracleTechnology

oracleDownload

PolestarAutomotive

polestarDownload

PowerCell SwedenEnergy

powercellSwedenDownload

Ragn-SellsWaste & Recycling

ragnsellsDownload

Scan Global LogisticsLogistics

scanGlobalLogisticsDownload

ScaniaAutomotive

scaniaDownload

SkanskaConstruction

skanskaDownload

Speedy HireEquipment Hire

speedyHireDownload

SpotifyMedia

spotifyDownload

StegraGreen Steel

stegraDownload

Tele2Telecoms

tele2Download

Telia CompanyTelecoms

teliaCompanyDownload

UnileverConsumer Goods

unileverDownload

Data Source & Partner Logos

Logos for data providers, research institutions, standards bodies, and partner organisations used across ERI products and publications. Use these when citing data sources or acknowledging partners in reports, dashboards, and presentations.

All logos remain the property of their respective organisations and are provided here for use within authorised ERI communications only.

All(29)AI ToolsBenchmarksCertificationClimate DataCompany DataDeveloperERI ToolsESG RatingsGovernmentInitiativesOpen DataPolicyPolicy DataResearchSocialStandardsStatistical Data

CDPClimate Data

cdpCorporate climate disclosure platform

Copy URL·Download

SBTiStandards

sbtiScience Based Targets initiative

Copy URL·Download

TPIClimate Data

tpiTransition Pathway Initiative

Copy URL·Download

GLEIFCompany Data

gleifGlobal Legal Entity Identifier Foundation

Copy URL·Download

MSCIESG Ratings

msciESG ratings and analytics

Copy URL·Download

WBABenchmarks

wbaWorld Benchmarking Alliance

Copy URL·Download

Net Zero TrackerClimate Data

netzerotrackerNet Zero Tracker

Copy URL·Download

B CorpCertification

bcorpB Corp certification

Copy URL·Download

EurostatStatistical Data

eurostatEU statistical office

Copy URL·Download

WikidataOpen Data

wikidataFree open knowledge base

Copy URL·Download

KlimatkollenClimate Data

klimatkollenSwedish climate data platform

Copy URL·Download

LobbyMapPolicy Data

lobbymapCorporate lobbying tracker

Copy URL·Download

Perplexity AIAI Tools

perplexityAI-powered research assistant

Copy URL·Download

SME Climate HubStandards

smeclimatehubSME climate commitment platform

Copy URL·Download

SR NavigatorERI Tools

srNavigatorSustainability Reporting Navigator

Copy URL·Download

LinkedInSocial

linkedinProfessional network

Copy URL·Download

GitHubDeveloper

githubCode repository and collaboration

Copy URL·Download

Oxford Net ZeroResearch

oxfordNetZeroOxford University Net Zero programme

Copy URL·Download

Oxford UniversityResearch

oxfordUniversityUniversity of Oxford

Copy URL·Download

IPCCResearch

ipccIntergovernmental Panel on Climate Change

Copy URL·Download

UNFCCCPolicy

unfcccUN Framework Convention on Climate Change

Copy URL·Download

WBCSDStandards

wbcsdWorld Business Council for Sustainable Development

Copy URL·Download

WRIResearch

wriWorld Resources Institute

Copy URL·Download

Project DrawdownResearch

projectDrawdownClimate solutions research

Copy URL·Download

Climate ChampionsInitiatives

climatechampionsUNFCCC Race to Zero Champions

Copy URL·Download

2030 BreakthroughsInitiatives

breakthroughs2030Exponential Roadmap 2030 Breakthroughs

Copy URL·Download

KlimatkommunernaInitiatives

klimatkommunernaSwedish climate municipalities network

Copy URL·Download

Viable CitiesInitiatives

viablecitiesSwedish smart city programme

Copy URL·Download

NaturvårdsverketGovernment

naturvardsverketSwedish Environmental Protection Agency

Copy URL·Download

Navigation & Layout Standards

All ERI web applications follow one of two layout tiers. Most apps have both a public marketing surface and an authenticated application surface — the tier determines the header behaviour for each surface, not the app as a whole. Choose the correct tier based on the surface being rendered, not the app type.

All ERI web applications follow one of three navigation tiers. The tier is determined by the application type — not by personal preference. Consistency across all apps reduces the learning curve for users who move between tools.

Layout & Navigation Tiers

Tier	Application type	Max content width	Header background	Navigation layers
Tier B Marketing	Content-led, editorial, marketing sites Human-AI Lab, Carbon Removals, Human-AI Impact	max-w-5xl (1024px)	Dark #232323 with image overlay	Header + two-column hamburger overlay
Tier A Simple Application	Data tools, reference apps, single-workflow — no public landing page Crocodile Economy	max-w-screen-xl (1280px)	White, always solid	Header + tab bar
Tier A + Landing Hero Application	Data / reference apps with a public-facing landing page that benefits from a visual hero Exponential Taxonomy	max-w-screen-xl (1280px)	Transparent over dark hero on / → white solid on interior pages	Dark hero (landing) → Header + tab bar (interior)
Tier A Workflow Application	Multi-step workflow tools, enterprise apps PSM, future workflow tools	max-w-screen-xl (1280px)	White, always solid	Header + context bar + workflow stepper + tab bar
Tier C Admin / Tool	Admin dashboards, multi-section tools PSM Admin, ERI Data Lake, future admin panels	full width	White, always solid	Persistent left sidebar + header with hamburger

Shared Header Specification

These rules apply to all ERI web applications regardless of tier.

Header Anatomy

Top strip

4px

Dark teal (#2C3F43) — always present, full width

Header

64px

Dark (#232323) for Tier B; white for Tier A & C; transparent over hero for Tier A + Landing Hero (landing page only)

Logo

—

ERI logo left, vertical divider, app title right — single line, no supertitle

Hamburger

—

Top right — always present, even when tabs or sidebar exist

Header Rules

✓Logo is always the ERI wordmark — never replaced with an app-specific logo

✓App title uses Archivo Bold, single line — no supertitle above it

✓Header height is always 64px — never taller or shorter

✓4px dark teal top strip is always present — it is the first visual element

✓Status badge (right zone): transparent outlined pill — rounded-full border border-current text-[11px] font-semibold tracking-widest uppercase px-2.5 py-0.5. Values: ALPHA / BETA / PREVIEW / LIVE. On dark: text-white border-white/60. On white: text-gray-500 border-gray-400.

✓Tier B only — one optional CTA button in header right zone (between version and hamburger): bg-[#93E07D] text-[#1a1a1a] rounded-lg px-4 py-2 text-sm font-semibold. Tier A apps: no CTA in header.

✗Do not add inline nav links inside the header bar — use the tab bar or sidebar instead

✗Do not make the header transparent on scroll for Tier A or Tier C interior pages — only on the public landing page of a Tier A + Landing Hero app

TIER B — HUB OVERLAY

Marketing — Full Two-Column Overlay

Used for content-led sites and the ERI Hub. The hamburger opens a full-screen overlay with two columns: Navigation on the left (large bold section titles with descriptions and a right-arrow) and Applications on the right (numbered cards with a pillar-colour left border and an external-link icon). External Resources appear below the navigation column as a compact link list.

EXPONENTIALROADMAP INITIATIVE

The Hub

Click ☰ to open the full Hub overlay

Left column — Navigation

Bold section titles (Archivo ExtraBold) + one-line description (Open Sans) + right-arrow chevron. Hover turns title and arrow green.

Right column — Applications

Numbered application cards (01–06). Each has a 2px left border in the relevant pillar colour, a bold title, a description, and an external-link icon.

External Resources

Below the navigation column, separated by a rule. Small caps label "EXTERNAL RESOURCES", then compact link list with external-link icons.

Live ExampleHuman-AI Lab — Hub Overlay open

✓ Background #232323

Dark neutral surface — not green-tinted. Applies to both columns and the header bar.

✓ Two-column layout

Navigation left, Applications right. Divider line separates the columns.

✓ Pillar-colour borders

Each application card has a 2px left border in its pillar colour — green, teal, orange, purple.

✓ Contact Us green

"Contact Us" link in Primary Green #3ba559 — the only coloured nav item.

TIER B — APP OVERLAY

Application — Single-Column Hamburger Overlay

Used for authenticated application pages (e.g. PSM). The hamburger opens a compact floating panel anchored to the top-right corner. It contains a single-column nav list, role-based highlighted items (e.g. Admin Panel in green), and a user identity footer with name, email, role, and a Logout CTA.

EXPONENTIALROADMAP INITIATIVE

Professional Services Matrix

BETAV.2026.04.08

Click ☰ to open the application overlay

Nav items

Single column, Open Sans Regular 14px. Role-based items (e.g. Admin Panel) are highlighted in Primary Green. External links show an external-link icon.

User identity footer

Always at the bottom: display name (semibold), email (truncated, grey), role label (green). Separated from nav by a rule.

Logout CTA

Full-width outlined button below the user footer. Uses the dark border (#232323) with a logout icon. Never use a destructive red colour here.

Live ExampleExponential Taxonomy — App Overlay open on landing page

✓ Dark panel bg

#232323 surface — not white or grey

✓ Active item

"Home" in Primary Green — inactive items in white/light text

✓ Admin link

"Admin Workspace" in Primary Green with external-link icon

✓ Content behind

Hero image and page content remain visible — panel overlays right side only

TIER C

Admin / Tool — Persistent Left Sidebar

Used for admin dashboards and multi-section tools where the user needs persistent access to all sections without losing their place. The sidebar is always visible on desktop — it does not collapse unless the viewport is below the mobile breakpoint. The hamburger in the header is retained for mobile and for the user overlay.

App

ERI Professional Serv…

Admin DashboardSystem HealthERI Data LakeData HubData Lake ArchitectureAssessment CriteriaCopy Templates

PSM APPLICATION

ERI Members (Public)PSM Application

ERI User ManagementWorkspace MembersSecurity Audit LogTrust & Security

N

nicklas.lemon

nicklas.lemon@exponentialroad…

Admin Dashboard

Click any sidebar item to navigate

Total Workspaces

3

Active Workspaces

3

Credits Allocated

11,999

Active: Admin Dashboard — green left border + green text + light green bg

Sidebar Anatomy

App identity

48px

App icon + truncated app name — top of sidebar

Nav item

36px

Icon + label, Open Sans 12px — inactive state

Active item

36px

Green-50 bg + 2px left border (#3ba559) + green text + green icon

Section label

24px

Small caps, 9px, grey — groups related items

User footer

52px

Avatar initial + display name + truncated email — always at bottom

Sidebar Rules

✓Sidebar width: 224px (14rem / w-56) — fixed, never resizable

✓Active item: green-50 background + 2px left border in #3ba559 + green text + green icon

✓Inactive item: transparent bg + grey icon + grey text — hover shows grey-50 bg

✓Section labels use 9px Archivo Bold, uppercase, tracked — never use a divider line alone

✓User identity footer is always present — shows name, email, and role

✗Do not use icons without labels in the sidebar — always pair icon with text

✗Do not collapse the sidebar to an icon-only rail — use the hamburger for mobile instead

✗Do not use the sidebar pattern for apps with fewer than 6 distinct sections — use tabs instead

TIER C

Mobile — Hamburger-Triggered Slide-In Drawer

Below the lg breakpoint (1024px) the persistent sidebar is hidden entirely. A hamburger button in the header triggers a full-height drawer that slides in from the left over a semi-transparent backdrop. The drawer contains the same navigation groups, active states, and user footer as the desktop sidebar. Tap the interactive mock on the left to see the animation.

Mobile — drawer closed

9:41

App

ERI Professional Serv…

Admin Dashboard

Workspaces

—

Active

—

Credits

—

Members

—

Tap ☰ to open drawer

App

ERI PSM

Admin DashboardSystem HealthERI Data LakeData HubData Lake ArchitectureAssessment CriteriaCopy Templates

PSM APPLICATION

ERI Members (Public)PSM Application

ERI User ManagementWorkspace MembersSecurity Audit LogTrust & Security

N

nicklas.lemon

ERI Admin

Mobile — drawer open

9:41

ERI Professional Serv…

App

ERI PSM

Admin Dashboard

System Health

ERI Data Lake

Data Hub

Data Lake Architecture

Assessment Criteria

Copy Templates

PSM APPLICATION

ERI Members (Public)

PSM Application

ERI User Management

Workspace Members

Security Audit Log

Trust & Security

N

nicklas.lemon

ERI Admin

Drawer dimensions

Width: 82% of viewport — leaves a visible backdrop strip on the right so users can tap to close. Max-width: 320px on large phones.

Animation

Slide in from left: transform: translateX(-100%) → translateX(0), 280ms, cubic-bezier(0.4,0,0.2,1). Backdrop fades in simultaneously: opacity 0 → 0.45, same duration.

Close triggers

→Tap the × button in the drawer header

→Tap the backdrop overlay

→Select any navigation item (drawer closes after navigation)

→Press Escape on keyboard (accessibility)

Breakpoint

Sidebar hidden below lg (1024px). Hamburger always visible in header on mobile. Drawer replaces sidebar entirely — do not show both simultaneously.

TIER A SIMPLE

Application — Header + Tab Bar

Used for data tools and single-workflow apps with no public landing page. White header with the tab bar directly below. Active tab is underlined in Primary Green. The hamburger opens the single-column application overlay (see above).

EXPONENTIALROADMAP INITIATIVE

Crocodile Economy

OverviewCompaniesNations / EUMethodology

Active: Overview — click tabs to switch

Tab active state

2px bottom border in Primary Green #3ba559, text colour #3ba559

Tab inactive state

No border, text Neutral Gray #6b7280 — hover shows grey underline

Mobile

Tabs scroll horizontally — do not wrap or collapse to a dropdown

TIER A + LANDING HERO

Application with Public Landing Page — Dark Hero → White App Interior

Used when a Tier A data application has a public-facing landing page that benefits from a visual hero. The landing page (/) uses the standard dark image hero pattern with a transparent header. Once the user navigates into the application interior (tab bar pages), the header becomes white and solid. The app is still classified as Tier A — the tier does not change.

!

When to use this pattern vs Tier B: If the app has a data/tool interior with tabs, use Tier A + Landing Hero. If the entire site is editorial or marketing content (no tab-bar app interior), use Tier B. The Exponential Taxonomy is Tier A + Landing Hero. Human-AI Lab is Tier B.

View:Landing page (/)Interior page (/solutions)

EXPONENTIALROADMAP INITIATIVE

Exponential Taxonomy

BETAV.2026.04

Exponential Roadmap Initiative

Science-Backed
Climate Solutions

114 Climate Solutions · 31 Fossil Fuel Activities · 17 Transition Support Activities

Explore Climate Solutions

Landing page — transparent header over dark hero · Accent Lime accent word · pill CTA

Landing Page Rules

✓Use transparentHeader prop on the landing page only — header becomes transparent until scrolled

✓Hero image: heroImages.halHandsTouching (primary) — full-bleed, #232323 overlay at 80–85% opacity

✓Heading: white Archivo ExtraBold — first word or key phrase in Accent Lime #93E07D

✓CTA button: Accent Lime background, dark text — pill-shaped marketing CTA style

✓Stat counters below hero: white background, large Archivo numbers, Primary Green accent

✗Do not use a transparent header on interior tab pages — white solid only

✗Do not add a tab bar to the landing page — tabs appear only in the app interior

Interior Page Rules

✓All interior pages use the standard white Tier A Simple header — no transparency

✓Tab bar appears immediately below the white header — same as Tier A Simple

✓Page background: #F9FAFB — same as all Tier A apps

✓The landing page CTA buttons navigate to the first tab of the app interior

TIER A WORKFLOW

Application — Header + Context Bar + Stepper + Tab Bar

Used for multi-step workflow tools. Four navigation layers sit between the top strip and the page content. Click any step in the stepper to see how the tab bar updates per stage.

EXPONENTIALROADMAP INITIATIVE

Professional Services Matrix

BETAV.2026.04.08

Exponential RoadmapAdministrator1000 cr

Extend PortfolioMy AccountGuideConfigure

Workspace Home

1a

Client Assessment

1b

Project Assessment

1c

Portfolio Mapping

2

Desired State

3

Identify Gaps & Opps

4

Build Roadmap

5

Implement & Report

Client PortfolioAssess ClientUpload FileSync CRM / ERP

Click any step to change stage — tabs update per stage. Active: Client Assessment

Four Navigation Layers

Header

64px

Logo + app title + Beta badge + version + hamburger

Context bar

36px

Breadcrumb (workspace / user / credits) + utility links

Stepper

80px

Numbered stage circles with connecting lines — sequential

Tab bar

44px

Tabs for the selected stage — updates when stage changes

Stepper Rules

✓Active step: filled green circle (#3ba559), white icon/number

✓Completed steps: green outline circle, green number — user can navigate back

✓Future steps: grey outline circle, grey number — may be locked

✓Connecting lines turn green as steps are completed

✓Step labels use Open Sans, 10px, centred below circle

✗Do not use the stepper for non-sequential navigation — use tabs instead

Mobile Behaviour

TIER BHub

→Logo + hamburger only in header

→Overlay collapses to single column

→Hero image scales to full viewport width

TIER BApp overlay

→Panel anchors to full width on mobile

→User footer always visible at bottom

→Logout CTA always visible

TIER ASimple / Workflow

→Context bar hides on mobile

→Stepper scrolls horizontally

→Tab bar scrolls horizontally — no wrapping

TIER A + HEROLanding Hero

→Hero image scales to full viewport width

→Transparent header collapses to logo + hamburger only

→Interior tab bar scrolls horizontally — no wrapping

TIER CSidebar

→Sidebar hidden below lg breakpoint (1024px)

→Hamburger opens full-height slide-in drawer

→User footer visible in drawer on mobile

Spacing & Layout Tokens

All spacing uses the standard Tailwind 4px base scale. Container widths and grid patterns are defined here so every page shares the same spatial rhythm.

--eri-content-inset: clamp(1rem, 3vw, 2rem);
/* ~16px on mobile → ~32px on wide screens */
/* Defines the left edge shared by the header
   logotype and the hero text block. */

{/* Header inner container */}
<div className="max-w-screen-xl mx-auto w-full"
  style={{ paddingInline:
    'var(--eri-content-inset)' }}>

{/* Hero text container — same anchor */}
<div className="max-w-screen-xl mx-auto w-full"
  style={{ paddingInline:
    'var(--eri-content-inset)' }}>
  <div className="max-w-xl text-left">

Container Widths

Standard Grid Patterns

Spacing Scale

Component Library

Reusable components that enforce brand standards through their API. These components ensure consistency and prevent styling violations.

ChartContainer

Use for any section requiring a coloured header. The component restricts colours to the approved palette.

import { ChartContainer } from "@/components/ui/chart-container";

<ChartContainer
  title="Section Title"
  subtitle="Optional subtitle"
  headerColor="green" // green | cyan | orange | red | gray
>
  {/* Your content */}
</ChartContainer>

Badge Reference

Badges are used throughout the platform to communicate status, tier, priority, data type, and qualification. Always use the canonical classes below — never invent new badge colours.

1. Tier Badges

Used in the header, workspace hub, and assessment pages to indicate a company's transformation tier.

2. System & Experimental Badges

Used in the header and on feature flags to signal development status.

3. Priority Badges

Used in CPR Recommendations and action lists to indicate urgency level.

4. KPI & Framework Badges

Used in KPI sections and action themes to classify framework items.

5. Qualification & Status Badges

Used in Climate Solutions qualification, case study cards, and pillar content.

6. Data Source & API Badges

Used in DataSourceCard, DataSourcesTable, and widget headers to show data freshness and source type.

7. Opportunity & Category Badges

Used in CPR Opportunities and impact portfolio to categorise opportunity types.

Badge Anatomy Quick Reference

CTA Buttons

ERI uses one CTA button style across all products and surfaces. There are no exceptions. The shape is always rounded-lg — never a pill (rounded-full). The fill colour is always Accent Lime #93E07D — never Primary Green.

Live Examples

Code Reference

{/* ✅ Primary CTA — use on ALL surfaces */}
<a
  href="/solutions"
  className="inline-block px-6 py-3 rounded-lg font-archivo font-semibold text-base text-[#1a1a1a]"
  style={{ backgroundColor: "#93E07D" }}
>
  Explore Climate Solutions
</a>

{/* ✅ Secondary CTA — dark background */}
<a
  href="/playbook"
  className="inline-block px-6 py-3 rounded-lg font-archivo font-semibold text-base text-white border-2 border-white"
>
  Human-AI Playbook
</a>

{/* ✅ Secondary CTA — light background */}
<a
  href="/playbook"
  className="inline-block px-6 py-3 rounded-lg font-archivo font-semibold text-base text-[#232323] border-2 border-[#232323]"
>
  Learn More
</a>

{/* ❌ WRONG: pill shape */}  {/* rounded-full — reserved for status badges only */}
{/* ❌ WRONG: Primary Green fill */}  {/* bg-[#3ba559] — never for filled buttons */}
{/* ❌ WRONG: icon prefix */}  {/* no Lucide icons before button text */}
{/* ❌ WRONG: CTA in authenticated surface header */}  {/* Authenticated surface: no CTA in header right zone */}

Size Variants

Interactive States

Consistent hover, active, and focus states reinforce the brand colour system and improve usability.

// Colour transitions (links, buttons, icons)
className="transition-colors"

// All property transitions (cards, shadows, transforms)
className="transition-all"

// Translate on hover (arrow icons in nav)
className="group-hover:translate-x-1"

// Shadow elevation on hover (cards)
className="shadow-sm hover:shadow-md transition-shadow"

// Always pair with a duration class if non-default speed is needed:
className="transition-all duration-300 ease-in-out"

Contact Us Integration

Version 2026.04.16 · Service URL: contact-us.exponentialroadmap.org

URL Pattern

https://contact-us.exponentialroadmap.org/?source=<id>&sourceLabel=<name>&return=<url>

Parameters

Full Example — Professional Services Matrix

https://contact-us.exponentialroadmap.org/?source=psm&sourceLabel=Professional+Services+Matrix&return=https%3A%2F%2Fpsm.exponentialroadmap.org&subject=PSM+Enquiry

Button Implementation — Mandatory Style

{/* ✅ CORRECT — copy this exactly */}
const contactUrl =
  'https://contact-us.exponentialroadmap.org/' +
  '?source=YOUR_SOURCE_ID' +
  '&sourceLabel=Your+App+Name' +
  '&return=https%3A%2F%2Fyour-app.exponentialroadmap.org';

<a
  href={contactUrl}
  className="px-4 py-2 bg-[#93E07D] text-[#1a1a1a] rounded-lg text-sm font-semibold hover:opacity-90 transition-opacity"
>
  Contact Us
</a>

{/* ❌ WRONG — white fill */}
{/* <button className="bg-white text-gray-900 rounded-lg">Contact Us</button> */}

{/* ❌ WRONG — pill shape */}
{/* <button className="bg-[#93E07D] rounded-full">Contact Us</button> */}

{/* ❌ WRONG — icon suffix */}
{/* <button className="bg-[#93E07D] rounded-lg">Contact Us ✉</button> */}

Registered Source IDs

Source IDs are self-registering — no manual setup required. This table is maintained here for human reference. Add your app's row when integrating.

Choosing a Source ID

Implementation Checklist

Admin Dashboard

Standard Components

Version 2.0.0 · 6 canonical files · Copy verbatim — do not reconstruct

pnpm add "github:Exponential-Roadmap-Initiative/eri-brand-design-system#v2.10.0&path:packages/eri-components"

pnpm add "github:Exponential-Roadmap-Initiative/eri-brand-design-system#main&path:packages/eri-components"

@import "@eri/components/dist/eri-components.css";

import { EriPageLayout, EriHeroSection, EriStatusBadge, EriContactUsButton } from '@eri/components';

cd /home/ubuntu/eri-brand-design-system && TOKEN=$(gh auth token) && git remote set-url user_github "https://x-access-token:${TOKEN}@github.com/Exponential-Roadmap-Initiative/eri-brand-design-system.git" && git tag vX.Y.Z && git push user_github vX.Y.Z

@import "@eri/components/dist/eri-components.css";

@source "../../node_modules/@eri/components/src";

1. EriStatusBadge

Transparent outlined pill badge for app status. Four values: ALPHA BETA PREVIEW LIVE. Adapts to dark and light backgrounds via the theme prop. Never filled, never coloured.

export type EriStatusValue = 'ALPHA' | 'BETA' | 'PREVIEW' | 'LIVE';

export function EriStatusBadge({ status, theme = 'dark', className = '' }) {
  const colours =
    theme === 'dark'
      ? 'border-white/60 text-white'
      : 'border-gray-400 text-gray-500';
  return (
    <span className={`inline-flex items-center rounded-full border
      px-2.5 py-0.5 text-[11px] font-semibold tracking-widest
      uppercase ${colours} ${className}`}>
      {status}
    </span>
  );
}

2. EriContactUsButton

Accent Lime CTA button that links to the shared ERI contact service. Constructs the URL automatically from source, sourceLabel, and returnUrl props. Label is always "Contact Us" — do not rename.

export function EriContactUsButton({
  source, sourceLabel, returnUrl, subject, size = 'md', className = ''
}) {
  const encodedReturn = encodeURIComponent(returnUrl);
  const encodedLabel  = encodeURIComponent(sourceLabel);
  const subjectParam  = subject ? `&subject=${encodeURIComponent(subject)}` : '';
  const href = `https://contact-us.exponentialroadmap.org/
    ?source=${source}&sourceLabel=${encodedLabel}
    &return=${encodedReturn}${subjectParam}`;
  const padding = size === 'sm' ? 'px-3 py-1.5 text-xs' : 'px-4 py-2 text-sm';
  return (
    <a href={href}
       className={`inline-flex items-center justify-center
         rounded-lg font-semibold transition-opacity
         hover:opacity-90 ${padding} ${className}`}
       style={{ backgroundColor: '#93E07D', color: '#1a1a1a' }}>
      Contact Us
    </a>
  );
}

3. EriAppHeader

Canonical 64px fixed header. Left zone: ERI logo → pipe divider → app name. Right zone: status badge → version → optional CTA → hamburger. The showCTA prop is always true — the Contact Us CTA is visible on all surfaces. Rendered once in EriPageLayout — never imported directly in page files.

LIVE PREVIEW — public surface (showCTA=true)

Professional Services Matrix

BETAV.2026.04.18Contact Us

LIVE PREVIEW — internal tool (showCTA=false)

Internal Admin Tool

ALPHAV.2026.04.18

// In EriPageLayout (not in page files directly):
<EriAppHeader
  appName="Professional Services Matrix"
  status="BETA"
  version="V.2026.04.17"
  showCTA={true}
  source="psm"
  sourceLabel="Professional Services Matrix"
  returnUrl="https://psm.exponentialroadmap.org"
  onMenuClick={() => setMenuOpen(true)}
/>

4. EriAppFooter

Canonical two-zone dark footer. Left zone: ERI logo + optional tagline. Right zone: copyright string. Background is always #232323 — never dark green, white, or any other colour. Rendered once in EriPageLayout — never imported directly in page files.

// In EriPageLayout (not in page files directly):
<EriAppFooter
  appName="Professional Services Matrix"
  tagline="Making Pillar 3 climate impact measurable and actionable."
/>

5. EriHeroSection

Canonical full-viewport hero section. Matches the live pattern on human-ai-lab.exponentialroadmap.org. Text block is always left-aligned and vertically centred, anchored to --eri-content-inset so it aligns with the header logotype. The background image is centred (50% 50%) — the hands composition is designed to be centred. The overlay is always rgba(35,35,35,0.82) — brand dark, not pure black.titleLine1 is in Accent Lime; titleLine2 is in white. The canonical hands image is baked in as the default — no need to pass backgroundImage for standard use.

import { EriHeroSection } from '@eri/components';

{/* Standard usage with scroll indicator */}
<EriHeroSection
  eyebrow="PROFESSIONAL SERVICES MATRIX ——— BETA"
  titleLine1="Professional"
  titleLine2="Services Matrix"
  body="Making Pillar 3 climate impact measurable and actionable."
  primaryCTA={{ label: "Try the Client Assessment", href: "/assessment" }}
  secondaryCTA={{ label: "PSM Journey Demo", href: "/demo" }}
  showScrollIndicator
/>

{/* Custom image (e.g. Crocodile Economics) */}
import { EriHeroSection, ERI_HERO_IMAGE_HANDS } from '@eri/components';

<EriHeroSection
  eyebrow="CROCODILE ECONOMICS ——— PROTOTYPE"
  titleLine1="Crocodile"
  titleLine2="Economics"
  body="Revenue up. Emissions down."
  primaryCTA={{ label: "Explore the Data", href: "/data" }}
  backgroundImage="https://cdn.example.com/croc-hero.webp"
  overlayOpacity={0.75}
/>

{/* children slot — supplementary content below the CTAs */}
{/* Use for: attribution lines, stat counters, scroll indicators */}
<EriHeroSection
  eyebrow="HUMAN-AI LAB ——— EXPONENTIAL ROADMAP INITIATIVE"
  titleLine1="Human-AI"
  titleLine2="Collaboration"
  body="Exploring the frontier of human and AI working together."
  primaryCTA={{ label: "Explore the Lab", href: "/lab" }}
  secondaryCTA={{ label: "Read the Research", href: "/research" }}
>
  {/* Attribution line — rendered below the CTA buttons */}
  <p style={{ color: 'rgba(255,255,255,0.55)', fontSize: '11px', marginTop: '1.5rem' }}>
    Data sourced from the ERI Exponential Framework v5.0
  </p>
</EriHeroSection>

import { EriHeroSection, ERI_HERO_IMAGE_TRUST } from '@eri/components';

<EriHeroSection
  eyebrow="EXPONENTIAL ROADMAP INITIATIVE ——— TRUST"
  titleLine1="Security & Transparency"
  titleLine2="for every ERI application"
  body="How ERI protects your data, maintains system integrity, and upholds transparency across all applications."
  primaryCTA={{ label: "View Security Practices", href: "/security" }}
  secondaryCTA={{ label: "Data Privacy", href: "/privacy" }}
  backgroundImage={ERI_HERO_IMAGE_TRUST}
  showScrollIndicator
/>

6. EriPageLayout

Canonical layout wrapper. Renders EriAppHeader and EriAppFooter exactly once, wrapping all page content. Use this in App.tsx — never import header or footer directly in page files. The --eri-content-inset CSS variable must be defined in index.css.

:root {
  --eri-content-inset: clamp(1rem, 3vw, 2rem);
}

import { EriPageLayout } from '@eri/components';

function App() {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <EriPageLayout
      appName="Professional Services Matrix"
      status="BETA"
      version="V.2026.04.17"
      showCTA={true}
      source="psm"
      sourceLabel="Professional Services Matrix"
      returnUrl="https://psm.exponentialroadmap.org"
      footerTagline="Making Pillar 3 climate impact measurable."
      onMenuClick={() => setMenuOpen(true)}
    >
      <NavDrawer open={menuOpen} onClose={() => setMenuOpen(false)} />
      <Router /> {/* your page router */}
    </EriPageLayout>
  );
}

UI Components

All interactive components use shadcn/ui as the base. Two tab patterns exist — use the right one for the right context. Always import from @/components/ui/* or @/components/SimpleTabNav.

1. Page Navigation Tabs — SimpleTabNav

Used for page-level navigation where each tab changes the URL. Features: URL-driven active state, icon + label + count, green underline indicator, no background fill.

import { SimpleTabNav, TabConfig } from "@/components/SimpleTabNav";

const tabs: TabConfig[] = [
  { id: "file",  label: "File",  path: "/admin/data-lake/file",  count: 7,  icon: <FileText /> },
  { id: "api",   label: "API",   path: "/admin/data-lake/api",   count: 5,  icon: <Plug /> },
];

<SimpleTabNav tabs={tabs} basePath="/admin/data-lake" />

2. In-Page Content Tabs — <Tabs>

Used for in-page content switching where the URL does not change. Uses shadcn pill/background style.

3. Buttons

Import from @/components/ui/button. The outline variant uses a transparent background — add a bg class manually if needed.

import { Button } from "@/components/ui/button";

// Primary CTA
<Button variant="default">Try Assessment</Button>

// Secondary action (note: transparent bg — add bg-white if on coloured surface)
<Button variant="outline">View Details</Button>

// Danger action
<Button variant="destructive">Delete</Button>

4. Inputs & Selects

Always pair with a <label>. Use placeholder as a hint, not as a label substitute.

5. Cards

Use shadow-sm as the default elevation. Add hover:shadow-md transition-shadow for interactive cards. Never use shadow-lg or shadow-xl.

import { Card, CardContent } from "@/components/ui/card";

// Static data card
<Card className="shadow-sm"><CardContent className="p-5">...</CardContent></Card>

// Interactive/clickable card
<Card className="shadow-sm hover:shadow-md transition-shadow cursor-pointer">...</Card>

// Subtle callout card
<Card className="shadow-sm bg-gray-50 border-gray-200">...</Card>

6. Data Tables

Use plain HTML tables inside a Card with p-0 padding. Alternate row colours with bg-white / bg-gray-50.

3. CTA Buttons

The canonical call-to-action button for all ERI surfaces — hero sections, landing pages, interior pages, and footers. Accent Lime background (#93E07D), dark text (#1a1a1a), rounded-lg shape. This is the single CTA button style across all ERI products — do not use Primary Green (#3ba559) for filled buttons. Primary Green is reserved for links, active states, and text accents only.

{/* ✅ Primary CTA — use everywhere (hero, interior, footer) */}
<a
  href="/solutions"
  className="inline-block px-6 py-3 rounded-lg font-archivo font-semibold text-base text-[#1a1a1a]"
  style={{ backgroundColor: "#93E07D" }}
>
  Explore Climate Solutions
</a>

{/* ✅ Secondary CTA — dark background surfaces */}
<a
  href="/playbook"
  className="inline-block px-6 py-3 rounded-lg font-archivo font-semibold text-base text-white border-2 border-white"
>
  Human-AI Playbook
</a>

{/* ✅ Secondary CTA — light background surfaces */}
<a
  href="/playbook"
  className="inline-block px-6 py-3 rounded-lg font-archivo font-semibold text-base text-[#232323] border-2 border-[#232323]"
>
  Learn More
</a>

{/* ❌ Do NOT use Primary Green for filled buttons */}
{/* ❌ Do NOT add icon prefixes to CTA buttons */}
{/* ❌ Do NOT add CTA buttons to the header right zone */}
{/* ❌ Do NOT use pill shape (rounded-full) for CTAs */}

5. Footer

The standard ERI dark footer. Four columns: About (nav links), Newsletter (subscribe CTA), Follow us (social links as text), Contact us (email). Column headings: Archivo weight 500, 18px, white. All links in Accent Lime #93E07D, Open Sans 14px. Bottom bar: Open Sans 16px, white/40.

Surface Modes

ERI products use two named surface modes — Light and Dark. These are not competing themes; they are two contexts within the same brand. Light mode is the default for application interiors. Dark mode is used for marketing landing pages and hero sections.

Dark Hero Background Images

Pre-approved hero backgrounds for dark-mode landing pages. Always overlay with white or Accent Lime #93E07D text. The left quarter of each image is kept dark for text placement.

Primary

Download

Human-AI Lab — Hands Touching (Primary)

heroImages.halHandsTouching

Human-AI Lab landing page, any human + AI collaboration narrative. Two translucent wireframe hands reaching toward each other, fingertips meeting at the S-curve crossing point with a golden burst of light. Michelangelo-inspired composition. Currently live on human-ai-lab.exponentialroadmap.org.

Alternate

Download

Human-AI Lab — Human Network

heroImages.halHumanNetwork

Human-AI Lab, any human + AI collaboration narrative. Features the dual S-curves with a distributed network of connected person icons representing global human collaboration.

Minimal

Download

Human-AI Lab — Dual S-Curve (Minimal)

heroImages.halSCurveDual

Generic ERI dark hero, any dual-transition narrative without an explicit human network element.

Alternate

Download

Human-AI Lab — Reaching (Duo Figures)

heroImages.halMFReaching

Human-AI Lab, human collaboration with AI, gender-balanced team narratives. Two constellation figures (male left, female right) reaching toward each other across the S-curve crossing point — emphasising the human-to-human connection enabled by AI.

App-specific

Download

Crocodile Economics — Decoupling

heroImages.crocodileDecoupling

Crocodile Economics app, any absolute decoupling / emissions-reduction narrative. Features diverging jaw curves: cyan (#00B4D8) GDP line rising, amber emissions line falling.

Resources

Additional materials and tools to support brand-consistent design and development.